vue2.0 + webpack+axios+elementUi+vue-router+vuex 搭建后台管理系统（axios的封装）

前言

最近公司项目需要做一个小型的填报的录入系统，根据业务的具体分析，采用了基于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