前言
最近公司项目需要做一个小型的填报的录入系统,根据业务的具体分析,采用了基于vue2.0 + webpack+axios+elementUi+vue-router+vuex全家桶的技术栈构建录入系统,同时也作为学习vue全家桶技术栈的一个学习记录。
目标
- axios的二次封装
- loading的加载
axios 的封装
第一步:先新建一个axios封装的js文件,如api.js
第二步:导入axios、router、element-ui,代码如下:
import axios from 'axios'
import router from '../router'
import {Loading} from 'element-ui'
第三步:编写封装的常用方法的请求api
// 封装axios的post请求
export function postRequest (url, params) {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
// 封装上传文件接口
export function uploadFileRequest (url, params) {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
// 封装put接口
export function putRequest (url, params) {
return axios({
method: 'put',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
// 封装删除接口
export function deleteRequest (url) {
return axios({
method: 'delete',
url: `${base}${url}`
})
}
// 封装get接口
export function getRequest (url) {
return axios({
method: 'get',
url: `${base}${url}`
})
}
第四步:由于所有的请求都会判断用户登录信息是否过期,如果过期的话,我们将重定向到ld