axios

项目介绍 本项目采用VUE + ES6实现，其中jwps.es6.js是由WPS开发组特别提供，本项目对该js做了部分调整 本次更新 增加新建模版入口，快速新建word，excel，ppt文件 增加上传、删除等文件管理入口 调整目录结构，调整vueconfig 特别注意 次前端工程必须配合后台部分使用 main.js 中的axios.defaults.baseURL请自行更换，必须和 wps开放平台 上的回调URL一致 演示地址 https://ljserver.cn/wpsonline 后台java代码地址 https://gitee.com/zm_space/wps-view-java.git 安装依赖 yarn install 开发运行 yarn serve 生产打包 yarn build 来源： oschina 链接： https://my.oschina.net/u/4356644/blog/4260630

vue之element-ui文件上传 文件上传需求 ​ 对于文件上传，实际项目中我们的需求一般分两种： 对于单个的文件上传，比如拖动上传个图片之类的，或者是文件。 和表单一起实现上传（这种情况一般都是文件上传之后，后端返回保存在服务器的文件名，最后和我们的表单一起上传） 对于第一种情况，通过看api就很明了。 http://element-cn.eleme.io/#/zh-CN/component/upload 对于第二种情况，我们需要考虑一个问题就是手动异步上传，后面会具体说明一下，您耐心往下看... 识别几种文件上传格式 在上传文件之前，我们需要了解我们前端在请求数据的时候，几种格式的区别。因为前后的格式不统一，就会导致我们的上传失败，毕竟踩坑了，真的。 1.application/x-www-form-urlencoded 最常见的post提交编码格式，一般的表单提交默认以此方式，具体的请求格式看下面： 2.multipart/form-data 这个比较常见的post提交方式，我们通常是在文件上传的时候使用。形式特别好认，一长串的字符... 3.application/json 使用vue现在我们用的服务都是axios，（vue-resource论坛里不更新了），axios默认的提交就是用的这种方式 json就不截图了，只要是我们一般的请求，都基本是json格式

一、项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例，实现消息发送/动态表情，图片/视频预览，拖拽图片/粘贴截图发送，朋友圈/红包/换肤等功能。 二、效果图 三、技术栈 框架技术：electron + electron-vue + vue 状态管理：Vuex 地址路由：Vue-router 字体图标：阿里iconfont字体图标库 弹窗插件：wcPop 打包工具：electron-builder 环境配置：Node.js + Chromium 图片预览：vue-photo-preview 视频组件：vue-video-player 如何配置开发环境及使用electron-vue，这里不作多介绍，可查阅官网及搜资料 https://simulatedgreg.gitbooks.io/electron-vue/content/cn/ https://github.com/SimulatedGREG/electron-vue 注意： 由于electron-vue作者长时间未更新，里面electron版本v2.0.4太旧，如遇问题，可升级到最新版本 ◆ Electron主进程index.js 通过BrowserWindow创建和控制浏览器窗口

关于 axios ，其实原本在做开发的几年里并不知道，一直使用的也都是 jquery 的 ajax 。后来因为一个同事的述说，我才知道有这么个库，基于 promise 的http库。 看来，以前的我确实比较井底之蛙了。以为前端就是这么点东西。 已至于 react、vue、angular 也是因为后来项目准备使用react开发的时候才知道的。 一直只用es5，异步只用ajax，导致es6也没有花太多时间去学习。后来才知道es6中的一种异步是promise。 这次我们就来说一下axios： axios是支持 浏览器和node 2种运行平台的，基于promise，可以自动识别json，可防止跨站请求伪造CSRF。 浏览器 中使用 axios ： 我们来看个请求： 其实也和jquery的ajax请求差不多。 axios的 get 请求方式1： axios的 get 请求方式2： 两种请求就是参数的传递方式不同。一个直接拼接url，一个传个对象 这里的 then 是 promise 的，用于表示请求成功后的回调处理，后面的catch表示请求失败后的回调处理 请求方式： 请求和响应结果相同：返回很多信息。有用的一般有data、status、statusText，其他的看情况使用，比如请求头。 axios的 post 请求方式： 其实就是换下名字 请求方式： 响应结果就是post的响应结果了。

来源： oschina 链接： https://my.oschina.net/u/4004801/blog/4259418

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

记录 vue 项目打包的一些事情 首先声明项目都是由 vue-cli 生成; vue 项目从 dev 切换到 prod 时有很多地方需要注意; 首先是大家最需要注意的 ajax 切换环节 以前一开始用 Vue 的时候我是在 build 之后,手动修改 ajax 的请求前缀 比如现在我使用的 axios, axios.defaults.baseURL = 'api' 但是打包的时候一般都要改动 url,直到我后来知道了 process.env 这个对象, 使用他可以获取当前的环境(后续还会提到,如何修改这个对象) 之后就可以轻松的修改 ajax 的基础路径了: axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'api' : '' 使用该方法能够无需在打包时修改路径,更好地配合 webpack 的 proxyTable; 与 1 类似的 Vue.config.devtools 同样地使用 process 来解决这个问题, Vue.config.devtools = process.env.NODE_ENV === 'development' 该属性是是否能够打开 vue 的 devTools; 某个小有名气的网站,vue 上线的时候,还是 dev 环境,大家引以为戒吧 sources里的 webpack

1 、什么是vuex? 　　　　公共状态管理；解决多个非父子组件传值麻烦的问题；简单说就是多个页面都能用Vuex中store公共的数据 　　　　a、并不是所有的数据都要放在Vuex中，只有各个组件公用的一些数据会放在Vuex当中 　　　　b、Vuex是一个公共状态管理模式 并不是数据库 所以不可能持久保存一些数据 　　　　　　当用户刷新浏览器的时候那么数据就有可能消失 　　　　c、Vuex主要应用在大型的单页面开发中 2 、vuex的特点 　　　　1、遵循单向数据流 　　　　2、Vuex中的数据是响应式的 3 、vuex的流程图： 　　 4 、vuex的具体使用： 　　　　一、 使用vuex： 　　　　　　1、安装： yarn add vuex 　　　　　　2、使用插件（创建仓库）： 存放所有组件内的数据（传的值） 　　　　　　　　　　新建index.js:　 　　　　　　　　　　import Vue from "vue" ; import Vuex from "vuex" ; import axios from "axios" ; Vue.use(Vuex); const store = new Vuex.store({ // 配置项（vuex中5个属性，这里只说三个） // 公共仓库，储存数据 state：{ n: 10 }, // 处理异步函数和业务逻辑，里面的参数都是函数

其他 此应用的全部数据来自 QQ音乐，利用 axios 结合 node.js 代理后端请求抓取 全局通用的应用级状态使用 vuex 集中管理 全局引入 fastclick 库，消除 click 移动浏览器 300ms 延迟 页面是响应式的，适配常见的移动端屏幕，采用 flex 布局 疑难总结 & 小技巧 关于 Vue 知识 & 使用技巧 v-html 可以转义字符，处理特定接口很有用 watch 对象可以观测 属性 的变化 像这种父组件传达子组件的参数通常都是在data()里面定义的，为什么这里要放到created()定义，两者有什么区别呢？ 因为这个变量不需要观测它的变化，因此不用定义在 data 里，这样也会对性能有所优化 不明白什么时候要把变量放在data()里，什么时候又不需要放 ？ 需要监测这个数据变化的时候，放在 data() 里，会给数据添加 getter 和 setter 生命周期 钩子函数 生命周期钩子函数，比如 mounted 是先触发子组件的 mounted，再会触发父组件的 mounted，但是对于 created 钩子，又会先触发父组件，再触发子组件。 销毁计数器 如果组件有计数器，在组件销毁时期要记得清理，好习惯 对于 Vue 组件，this.$refs.xxx 拿到的是 Vue 实例，所以需要再通过 $el 拿到真实的 dom 关于 JS 知识 &