axios

methods: { submitForm() { this.$api .login({ mobile: "yunfeng", password: "123456" }) .then((res) => { if (res.status === 200) { // 在 sessionStorage中设置token，值为后台数据中的token sessionStorage.setItem('token',res.data.data.token) //重点 this.$store.commit("changeUser", res.data.data); this.$store.commit("changeFlag", true); this.$router.push({ name: "order" }); } else { console.log(res.data.info); } }) .catch((data) => { console.log(data); }); }, （在api/index.js文件中） const myPost = axios.create({ baseURL: urls.baseUrl, method: 'post', headers: { 'token': sessionStorage.getItem("token") }, }) const myGet

Upload 上传组件 自定义上传 使用http-request属性 覆盖默认的上传行为，会向自己定义的方法传入一个当前上传实例， 要显示进度条就需要手动调用onProgress(e)方法 { action:"" data:undefined file:File filename:"file" headers:Object onError:onError(err) onProgress:onProgress(e) onSuccess:onSuccess(res) withCredentials:false } 实现进度条代码（这里贴出axios的代码） let form = new FormData(); //uploader为之前提到的实例 form.append("file", uploader.file); axios .post(url,form, { headers: { "Content-Type": "multipart/form-data" }, onUploadProgress: progressEvent => { let percent=(progressEvent.loaded / progressEvent.total * 100) | 0 //调用onProgress方法来显示进度条，需要传递个对象 percent为进度值 uploader

经过小女子的不懈努力，终于解决了。 1.第一步：axios 接口请求的一定要传 ，下图仅供参考 responseType: 'blob' 2.调用接口 　　看后台返回的是二进制流还是blob对象 　　（1）是二进制流需要用 new Blob([res.data], {type: 'application/octet-stream'}); 　　转化成 Blob对象 　　（2）那就方便了直接使用 3.拿到文件就开始下载了 let url = window.URL.createObjectURL(res.data); console.log(blob) var a = document.createElement("a"); document.body.appendChild(a); a.href = url; a.download ="aaa.xls"; a.click(); window.URL.revokeObjectURL(url); 　　 　　按正常情况已经完成了，开心开心，但是事情总是 出其不意，OMG。下载下来的文件竟然打不开，内心。。。 经过很长时间的查找与百度最后终于发现了关键地方。 敲黑板 vue项目中使用了mock模拟数据 导致responseType: 'blob'无效，把mock模式关闭 ， 完美 perfect！ 以上内容是工作中遇到的问题，如有不妥记得留言哦

需要在文件根目录手动创建一个vue.config.js文件； // 用于处理文件与目录的路径； const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { publicPath: "/", //部署应用时的根路径 devServer: { port: 9000, // 端口号 host: "jianshi.com", // 如需配置本地域名，打开C:\Windows\System32\drivers\etc文件夹，输入自己的ip地址配置即可，如下图 https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 hotOnly: true, // 热更新 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 proxy: { "/api": { target: "http://192.168.3.6:8000/v1", //后端接口地址 ws: false, //websocket； changeOrigin: true, //是否允许跨域 pathRewrite: { "^/api": "/", //直接用'api

小编这一期跟大家讲一下关于优化Vue性能相关的知识，Vue众所周知，是一个轻量级的框架，源码仅仅为72.9KB，但是也有它自己的缺点，就是首屏加载会比较慢，因为和传统项目相比，Vue会在首屏加载的时候加载出所有的组件和插件，并且向服务器请求数据，导致可能有时候首屏加载的时间就会到4、5秒的样子。 但是这样做很明显是在挑战用户的耐心，按照惯例，最好能把加载时间控制在1秒左右。接下来小编讲一下Vue性能优化的两个个方向。 一．源码优化 1、代码模块化 ，咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。 2、for循环设置key值 ，在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。 3、Vue路由设置成懒加载 ，当首屏渲染的时候，能够加快渲染速度。 4、更加理解Vue的生命周期 ，不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null。 5、可以使用keep-alive ，keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。 二．打包优化 1、修改vue

先在项目里打开cmd 输入npm i element-ui -S回车，然后在配置 npm i element-ui -S 在 main.js 中写入以下内容： import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); 安装 axios : npm install axios//生产环境 npm install --save axios vue-axios//测试环境 两者都下载 在 main.js 中写入以下内容： import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) 在页面中的用法： Vue.axios.get(api).then((response) => { console.log(response.data) }) this.axios.get(api).then((response) => { console.log(response.data) }) this.

1、创建一个server目录，在该目录下创建index.js文件 2、配置axios： import axios from 'axios' //使用create方法创建axios实例 export const Service = axios.create({ timeout: 6000, // 请求超时时间 baseURL: process.env.BASE_API,// 配置在环境变量中 headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) // 添加请求拦截器 Service.interceptors.request.use( config => { // 这里可以引入loading 或者 执行一个回调方法 return config }， error => { return Promise.reject(error) } ) // 添加响应拦截器 Service.interceptors.response.use(response => { // console.log(response) let res = response.data return res }, error => { console.log(error) const msg = error.message!== undefined

前言 axios 是一个轻量的HTTP客户端，它基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大大（Vue作者尤雨溪）宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选。 （如果你还不熟悉 axios，可以在 这里 查看它的API）。 axios 的API很友好，你完全可以很轻松地在项目中直接使用。不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都就地写一遍，得疯！这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。 为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用。 那么，怎么封装 axios 呢？ 原来的样子 封装前，先来看下，不封装的情况下，一个实际项目中axios请求的样子。大概是长这样： axios('http://localhost:3000/data', { method: 'GET', timeout: 1000, withCredentials: true, headers: { 'Content-Type': 'application/json',

前言 随着信息时代的发展变迁，荧幕里呈现的 智慧城市 慢慢出现了在现实生活中，很大程度上便利了日常的管理和维护。在智慧城市的大背景下， 智慧交通监管可视化系统 是其重要的组成部分，通过一条条道路监控的串联，引申出一座智慧城市的管控，而在众多数据的维护中， 实时数据 、 设备状态 以及 视频监控 是极为重要的。其中视频监控一直是作为主体的部分，而在 互联网 和 物联网 齐头并进的形式下， “中国天网” 应运而生，这其实是一项城市监控系统，但它不是个仅一台摄像头的设备，而是足足有1.7亿个监控摄像头，而在未来三年内，还将再安装4亿个摄像头。交通作为城市发展的动脉，与人们下日常息息相关，而在这一系列的监管作用下，成为了一个“公安治安视频监控系统”，关乎人们日常的安全治安管理。 城市交通的主要方式体现在城市道路、公交、轨道交通等设施上，但随着城市化进程的加快和经济社会发展的推动下，机动车保有量迅速增加，城市交通问题日益严峻。面对这一现状，为了缓和城市交通的各种问题，采取了多种解决方案，例如建设一系列信号灯控制，路口卡口监控、视频监控等多种方法的系统维护，有着一定程度上的效果，但是各个系统都独立着解决其对应的问题，无法从整体的交通态势上进行综合掌控，而实现城市化智慧交通的管理系统可以很好地应对这一问题。介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT ）的 HT for