XHR

自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。 yarn add element-theme --dev 2.安装chalk主题 安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码，这里从 npm 安装。 yarn add element-theme-chalk -D 3.初始化变量文件 主题生成工具安装成功后，如果全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss ，当然你可以传参数指定文件输出目录。 node_modules/.bin/et -i 执行命令 命令执行成功之后，会在根目录生成 scss文件 element-variables.scss 。 4、修改主题色 在 element-variables.scss 文件里修改 $–color-primary:#4b5f6e，即你想要的主题颜色 5、编译主题 执行主题编译命令生成主题，根目录会生成一个theme的文件夹 。 node_modules/.bin/et 6、引入自定义主题 把生成的主题按颜色改名放置 src

自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。 yarn add element-theme --dev 2.安装chalk主题 安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码，这里从 npm 安装。 yarn add element-theme-chalk -D 3.初始化变量文件 主题生成工具安装成功后，如果全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss ，当然你可以传参数指定文件输出目录。 node_modules/.bin/et -i 执行命令 命令执行成功之后，会在根目录生成 scss文件 element-variables.scss 。 4、修改主题色 在 element-variables.scss 文件里修改 $–color-primary:#4b5f6e，即你想要的主题颜色 5、编译主题 执行主题编译命令生成主题，根目录会生成一个theme的文件夹 。 node_modules/.bin/et 6、引入自定义主题 把生成的主题按颜色改名放置 src

文件上传是最古老的互联网操作之一，20多年来几乎没有怎么变化，还是操作麻烦、缺乏交互、用户体验差。 一、前端代码 英国程序员 Remy Sharp 总结了这些 新的接口 ，本文在他的基础之上，讨论在前端采用HTML5的API，对文件上传进行渐进式增强： * iframe上传 　　 * ajax上传 　　 * 进度条 　　 * 文件预览 　　 * 拖放上传 1.1 传统形式 　　文件上传的传统形式，是使用表单元素file，参考 http://www.ruanyifeng.com/blog/2012/08/file_upload.html ： <form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" > 　　　　<input type="file" id="upload" name="upload" /> <br /> 　　　　<input type="submit" value="Upload" /> </form> 所有浏览器都支持上面的代码，点击上传按钮后，网页"锁死"，用户只能等待上传结束，然后浏览器刷新，跳到表单的action属性指定的网址。 1.2 iframe上传 　　用户点击submit时，动态插入一个iframe元素 var form = $("

今天分享JBolt极速开发平台中使用的异步下载文件的解决方案。 需求场景： 列表查询界面有一个【导出Excel】按钮，需要点击按钮，弹出loading信息框，异步调用后台action，得到数据库数据后生成Excel数据然后响应发送到前端，异步请求拿到数据后，当做文件下载下来。 重点： 异步请求，导出Excel，前端拿到后做成文件下载 解决方案： 1、前端异步请求 点击按钮的时候，执行一个异步请求，去访问Action <button type="button" onclick="ajaxDownload('admin/user/exportExcel')">导出Excel</button> //异步下载 function ajaxDownload(url,fileName){ var xhr = new XMLHttpRequest(); xhr.timeout=jboltAjaxTimeout; xhr.open('GET', url, true); xhr.responseType = "blob"; // 返回类型blob //定义请求完成的处理函数 xhr.onload = function () { // 请求完成 if (this.status === 200) { // 返回200 var blob = this.response; var reader = new

图片上传（基于vue) 　　相信上传图片是所有系统必备的功能吧，工作中的第一个管理系统就在上传图片的功能上卡顿了一整天。 　　当时用的elementUI组件，但是由于样式和设计图样式差别较大再加上原生相较好理解，便使用了原生实现图片上传功能。 　　菜鸟上路，望多多指点。 图片上传原理（csdn里看到的比较通俗易懂的图片上传原理）　 　　　 参考地址： https://blog.csdn.net/q857277886/article/details/79092591 　　前端网页文件上传一般使用 <input type="file" />来实现。 在 HTML 文档中 <input type="file" />标签每出现一次，一个 FileUpload 对象就会被创建。 　　 2.该标签包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件,该标签的 value属性保存了用户指定的文件的名称。 3.多选：标签可以通过添加 multiple 属性来支持多选；如果选择了多个文件, 这个值表示第一个被选择的文件路径. JavaScript 可以通过 Input 的 FileList 属性获取到其他的文件路径. 4.文件信息：可以通过 input.files 属性返回 — 返回值是一个 FileList 对象,这个对象是一个包含了许多 File

最近遇见一个需要上传超大大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。 在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。 下面从文件上传方式入手，整理大文件上传的思路，并给出了相关实例代码，由于PHP内置了比较方便的文件拆分和拼接方法，因此服务端代码使用PHP进行示例编写。 本文相关示例代码位于github上，主要参考 聊聊大文件上传 大文件切割上传 文件上传的几种方式 首先我们来看看文件上传的几种方式。 普通表单上传 使用PHP来展示常规的表单上传是一个不错的选择。首先构建文件上传的表单，并指定表单的提交内容类型为enctype="multipart/form-data"，表明表单需要上传二进制数据。 然后编写index.php上传文件接收代码，使用move_uploaded_file方法即可(php大法好…) form表单上传大文件时，很容易遇见服务器超时的问题。通过xhr，前端也可以进行异步上传文件的操作，一般由两个思路。 文件编码上传 第一个思路是将文件进行编码，然后在服务端进行解码，之前写过一篇在前端实现图片压缩上传的博客

【一、项目目标】 获取 QQ 音乐指定歌手单曲排行指定页数的歌曲的歌名、专辑名、播放链接。 由浅入深，层层递进，非常适合刚入门的同学练手。 【二、需要的库】 主要涉及的库有：requests、json、openpyxl 【三、项目实现】 1.了解 QQ 音乐网站的 robots 协议 只禁止播放列表，可以操作。 2.进入 QQ 音乐主页 https://y.qq.com/ 3.输入任意歌手，比如邓紫棋 4.打开审查元素（快捷键 Ctrl+Shift+I） 5.分析网页源代码 Elements，发现无歌曲信息，无法使用 BeautifulSoup，如下图所示，结果为空。 6.点击 Network，看数据在不在 XHR（无刷新更新页 面），我的经验是先看 Size 最大的，然后分析 Name， 查看 Preview，果然在里面！ 7.点击 Headers，拿到相关参数。如下图，仔细观察 url 与 Query String Parameters 参数的关系，发现 url 中的 w 代表歌手名，p 代表页数。 8.通过 json 代码实现，首先小试牛刀，爬取第一页 的数据，url 直接复制过来。成功！ 9.引入 params 参数，实现指定歌手、指定页数的查询。 注意代码url为上一步url中“？”之前的部分， params两边的参数都需要加 ’’,requests.get 添加

【一、项目目标】 获取 QQ 音乐指定歌手单曲排行指定页数的歌曲的歌名、专辑名、播放链接。 由浅入深，层层递进，非常适合刚入门的同学练手。 【二、需要的库】 主要涉及的库有：requests、json、openpyxl 【三、项目实现】 1.了解 QQ 音乐网站的 robots 协议 只禁止播放列表，可以操作。 2.进入 QQ 音乐主页 https://y.qq.com/ 3.输入任意歌手，比如邓紫棋 4.打开审查元素（快捷键 Ctrl+Shift+I） 5.分析网页源代码 Elements，发现无歌曲信息，无法使用 BeautifulSoup，如下图所示，结果为空。 6.点击 Network，看数据在不在 XHR（无刷新更新页 面），我的经验是先看 Size 最大的，然后分析 Name， 查看 Preview，果然在里面！ 7.点击 Headers，拿到相关参数。如下图，仔细观察 url 与 Query String Parameters 参数的关系，发现 url 中的 w 代表歌手名，p 代表页数。 8.通过 json 代码实现，首先小试牛刀，爬取第一页 的数据，url 直接复制过来。成功！ 9.引入 params 参数，实现指定歌手、指定页数的查询。 注意代码url为上一步url中“？”之前的部分， params两边的参数都需要加 ’’,requests.get 添加

【一、项目目标】 获取 QQ 音乐指定歌手单曲排行指定页数的歌曲的歌名、专辑名、播放链接。 由浅入深，层层递进，非常适合刚入门的同学练手。 【二、需要的库】 主要涉及的库有：requests、json、openpyxl 【三、项目实现】 1.了解 QQ 音乐网站的 robots 协议 只禁止播放列表，可以操作。 2.进入 QQ 音乐主页 https://y.qq.com/ 3.输入任意歌手，比如邓紫棋 4.打开审查元素（快捷键 Ctrl+Shift+I） 5.分析网页源代码 Elements，发现无歌曲信息，无法使用 BeautifulSoup，如下图所示，结果为空。 6.点击 Network，看数据在不在 XHR（无刷新更新页 面），我的经验是先看 Size 最大的，然后分析 Name， 查看 Preview，果然在里面！ 7.点击 Headers，拿到相关参数。如下图，仔细观察 url 与 Query String Parameters 参数的关系，发现 url 中的 w 代表歌手名，p 代表页数。 8.通过 json 代码实现，首先小试牛刀，爬取第一页 的数据，url 直接复制过来。成功！ 9.引入 params 参数，实现指定歌手、指定页数的查询。 注意代码url为上一步url中“？”之前的部分， params两边的参数都需要加 ’’,requests.get 添加

原生JS封装： moreSelect: function (url,elements) { function GetArea(url) { this .url = url this .init(elements) } GetArea.prototype = { num: 0 , selections: null , list: [], createOptions(data, parent) { if (!parent) return if (parent.children) { var leng = parent.children.length for ( var j = 0; j < leng; j++ ) { parent.lastElementChild.textContent = '' parent.lastElementChild.remove() } } for ( var i = 0; i < data.length; i++ ) { var option = document.createElement('option' ); option.textContent = data[i].name || data[i] parent.appendChild(option) } parent.addEventListener( 'change', this