準(zhǔn)備工作

1.引入axios
npm install --save axios vue-axios
引入qs npm install qs
2.main.js里引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
3.src下面創(chuàng)建類似于下圖的目錄

目錄.png

之后創(chuàng)建某個(gè)頁面的js文件如下

import { get, post,cut,put } from '../axiosconfig/axiostool'
//import 需要哪些引入哪些川抡，我這里只需要post
export default {

  //登錄
  groupAccountLogin(param){
    return post('/group/account/login',param);
  },
  //修改密碼
  groupaccountResetPwd(param){
    return post('/group/account/changePwd',param);
  },
  //退出
  logout(param){
    return post('/group/account/logout',param);
  }
}

然后index.js,代碼如下

import groupOrg from "./groupOrg";
import login from './login'
export default {
    login,
    groupOrg
 }

最后是axiostool.js代碼

import Vue from 'vue'
import axios from 'axios'
import router from "../../router"
import { Message } from 'element-ui'
import store from '../../store'
 import qs from 'qs'

let token = ''
// 響應(yīng)時(shí)間
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置cookie
// axios.defaults.headers.common['Authorization '] = token
// 配置請求頭
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// axios.defaults.headers.post['Content-Type'] = 'application/json'
// 靜態(tài)資源
Vue.prototype.$static = ''
// 配置接口地址
axios.defaults.baseURL = ''
/* let loadingInstance */
// POST傳參序列化(添加請求攔截器)
axios.interceptors.request.use(config => {
  // if (config.method === 'post') {
  //   config.data = qs.stringify(config.data)
  // }
  //  let useinfo = window.sessionStorage.getItem('_evgetinfo1')
  // if (useinfo) {
  //   token = boost.Boost(useinfo)
  // }
  token=sessionStorage.getItem('TOKEN');
  config.headers.common['Authorization'] =token;
  //請求頭轉(zhuǎn)換為表單形式
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
  config.transformRequest = [function (data) {
    // 在請求之前對data傳參進(jìn)行格式轉(zhuǎn)換
    data = qs.stringify(data)
    return data
  }]
  return config
}, err => {
  // Message.error('請求錯(cuò)誤!');
  return Promise.reject(err)
})
// 返回狀態(tài)判斷(添加響應(yīng)攔截器)
axios.interceptors.response.use(res => {
  if (res.data.code === 0||res.data.code === 200) {
    return res
  } else if (res.data.code==1||res.data.code==401){
    localStorage.clear();
    Message.error(res.data.msg);
    sessionStorage.clear();
   router.push('/');
  }
  else {
   Message.error(res.data.msg);
    /* loadingInstance.close() */
    // this.$message.error(res.data.msg)
  }
}, err => {
   // Message.error('請求失敗, 請稍后再試!');
  return Promise.reject(err)
})
// post請求
export function post (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then(res => {
        resolve(res.data)
      }, err => {
        reject(err.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
// get請求
export function get (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
// put請求
export function put (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .put(url, params)
      .then(res => {
        resolve(res.data)
      }, err => {
        reject(err.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

// delete請求
export function cut (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .delete(url, params)
      .then(res => {
        resolve(res.data)
      }, err => {
        reject(err.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

這個(gè)文件里的內(nèi)容可以根據(jù)需求修改
最后main.js里面引用
import api from './service/apiconfig/'
Vue.prototype.api和你main.js里面Vue.prototype.$api = api這個(gè)定義的一樣,
login 是server里面index.js文件中引用時(shí)定義的名稱

              let param={};
               param.loginName=this.loginDic.loginName;
               param.loginPwd=MD5(this.loginDic.loginPwd);
                // this.$router.push('/mainback')
               this.$api.login.groupAccountLogin(param).then(res=>{
                   if (res.code==0) {
                           //你需要的內(nèi)容...
                       sessionStorage.setItem('userInfo',JSON.stringify(res.data))
                       this.$router.push('/home')
                   }
               })

我就是這么愛偷懶的人兒须尚，哈哈