axios

1.安装axios (在项目中) npm i axios 　　 2.创建axios.intercept.js 内容如下 // 配置axios拦截器 import axios from 'axios'; import store from '../store'; // 追加token // 创建axios实例 const service = axios.create({ // baseURL: process.env.VUE_APP_URL, // api 的 VUE_APP_URL timeout: 50000 // 请求超时时间 }); // request拦截器,在请求之前做一些处理 service._requestCount = 0; // 接口请求累加 service.interceptors.request.use( config => { service._requestCount++; store.commit('handleLoading', true); // 接口请求loading return config }, error => { console.log(error) // for debug Promise.reject(error) } ) // response 拦截器,数据返回后进行一些处理 service.interceptors

路由拦截 项目中，有些页面需要登录后才能进入，例如，在某页面A，用户在操作前需要先进入登录页（此时需要将上一页的地址（ /survey/start ）作为query存入login页面的地址中，如: http://localhost:8071/#/login?redirect=%2Fsurvey%2Freport ），登录成功后再进入页面A。 首先，在router.js中创建路由时，给需要登录的路由中的 meta 添加字段：requireLogin，如下： const router = new Router({ routes: [ { path: '/login', name: 'Login', component: Login, meta: { title: '登录页' } }, { path: '/register', name: 'Register', component: Register, meta: { title: '注册页' } }, { path: '/', redirect: '/survey/start', name: 'Full', component: Full, children: [ { path: '/survey/start', name: 'Home', component: Home, meta: { title: '首页',

上传文件就按照element官方文档就可以实现上传：代码如下 <el- upload :action="#" :before-upload="beforeUpload" :auto-upload="true" :multiple="false" ref="newupload" accept=" application/vnd.openxmlformats- officedocument.spreadsheetml.sheet" //上传的文件格式 > <el-button size="small" type="primary">上传文件</el-button> </el-upload> ============js部分=================== beforeUpload (file) { let fd = new FormData() fd.append('excelFile', file) // 传文件 // fd.append('srid', this.aqForm.srid) // 传其他参数 this.$http.post(url, fd).then(res => { console.log('文件上传成功') }) 上传图片和图片的格式，大小，宽高校验 <el- upload class ="avatar-uploader" accept ="image

Vue+iView通过a标签 绑定事件 导出文件 使用a标签绑定事件: <a @click.prevent="downloadItem(downUrl)" :href="downUrl" >下载模板</a> 定义下载方法会使用到axios: import Axios from ' axios ' methods: { downloadItem (url) { Axios. get (url, { responseType: ' blob ' }) .then(({ data }) => { // 为了简单起见这里blob的mime类型 固定写死了 let blob = new Blob([data], { type: ' application/vnd.ms-excel ' }) let link = document.createElement( ' a ' ) link.href = window.URL.createObjectURL(blob) link.download = url.split( ' / ' ).pop() link.click() . catch (error => { console.error(error) }) }) } } Vue+iView通过a标签 属性 导出文件 a标签绑定属性 <a href= " url " download=

简介 之前的技术路线本来是angular的，后来经过一段时间的开发还是打算选择vue，原因是vue简单丰富，尽管angular规范强大，但是组件库都不太符合国人风格。看到GitHub上Vue Element Admin这么高的人气后就毫不犹豫的选择了这个后台管理框架。作为一个后端开发，刚刚下载Vue Element Admin框架时确实无从下手，但是一番研究之后也就适应了，今天就介绍下改造Vue Element Admin登录并对接vNext授权服务。vNext授权服务使用的是ids4框架，所以使用ids4框架授权的服务都可以参考该登录。 代码分析 根据Vue Element Admin作者的介绍，该框架登录需要两步，获取token和获取userinfo（用户信息）。作者公司的后端设计应该是用户信息中包括用户权限，所以Vue Element Admin（后称Admin）登录只需调两次接口。 在view路径的login中可以看到login的click事件： handleLogin() { this .$refs.loginForm.validate(valid => { if (valid) { this .loading = true this .$store.dispatch("user/userLogin", this .loginForm).then(()=> { this