环境判断，全局拦截，请求封装

//所需插件
import Vue from 'vue'
import axios from 'axios'
import querystring from 'querystring'
import {errorAlert} from '../utils/alert'
import store from "../store"
import router from "../router"


//工具的代码
import Vue from 'vue'
let vm=new Vue()
//成功的弹窗
export const successAlert=msg=>{
    vm.$message({
        message: msg,
        type: 'success'
      });
}

//失败的弹窗
export const errorAlert=msg=>{
    vm.$message({
        message: msg,
        type: 'warning'
      });
}

运行环境的判断

//环境判断
if(process.env.NODE_ENV==="development"){//开发环境
        Vue.prototype.$pre="http://localhost:2000"
}

if(process.env.NODE_ENV==="production"){//生产环境，上线环境
        Vue.prototype.$pre=""
}

请求拦截

//请求拦截
axios.interceptors.request.use(config=>{
        //每次请求都要执行的逻辑
         if(config.url !== '/api/userlogin'){
            config.headers.authorization=store.getters.userInfo.token;
        }
        //token存在请求头中发送到后端
        return config;
        
})

响应拦截

//响应拦截
axios.interceptors.response.use(res=>{
        //每次响应都要执行的逻辑
        //统一打印
          console.group('本次请求地址：'+res.config.url)
          console.log(res);
          console.groupEnd();
         
        //错误打印处理
          if(res.data.code!=200){
                errorAlert(res.data.msg);
            }
        
        //掉线处理
         if(res.data.msg==='登录已过期或访问权限受限'){
                //清楚vuex和本地存储的数据
                 store.dispatch("changeUserInfo",{})
                //跳转页面
                 router.push("login")
            }
         return res;
})

get封装

//get封装
export const get=(url,params={})=>{
    return axios({
        url,
        method:'get',
        params
    })
}

post封装

//post封装
/**
 * 
 * @param {*} url 请求地址
 * @param {*} params 请求参数
 * @param {*} haveFile 判断是否有文件，有就传true,没有文件不用传，默认false
 */

export const post=(url,params,haveFile=false)=>{
    let data=null;
    if(haveFile){
        //有文件
        data=new ForData()
        for(let i in params){
            data.append(i,params[i])
        }    
    }else{
        //无文件
        data=querystring.stringify(params)
    }
    
    return axios({
        url,
        method:'post',
        data
    })
}

 设置接

//文件名为api.js
import {get,post} from './http'

//菜单列表
export const reqmenulist=params=>get('/api/menulist',params)
//菜单添加
export const reqmenuadd=params=>post('/api/menuadd',params)
//菜单详情
export const reqmenuinfo=params=>get('/api/menuinfo',params)
//菜单修改
export const reqmenuedit=params=>post('/api/menuedit',params)
//菜单删除
export const reqmenudelete=params=>post('/api/menudelete',params)