更改後端介面

server.port=8081

安裝axios

npm install axios

封裝網路請求

新建utils/api.js

import axios from 'axios'
import {Message} from 'element-ui';
import el from "element-ui/src/locale/lang/el";

axios.interceptors.response.use(success=>{
    if(success.status &&success.status==200&&success.data.status==500){
        Message.error({message:success.data.msg})
        return;
    }
    //登陸成功提示
    if(success.data.msg){
        Message.success({message:success.data.msg})
    }
    return success.data;
},error => {
    if(error.response.status==504||error.response.status==404){
        Message.error({message:'伺服器被吃了'})
    }else if(error.response.status==403){
        Message.error({message:'許可權不足，請聯絡管理員'})
    }else if (error.response.status == 401) {
        Message.error({message:'尚未登入，請登入'})
    }else{
        if(error.response.data.msg){
            Message.error({message:error.response.data.msg})
        }else{
            Message.error({message:'未知錯誤'})
        }
    }
    return;
})

let  base='';

export const postKeyValueRequest=(url,params)=>{
    return axios({
        method:'post',
        url:`${base}${url}`,
        data:params,
        transformRequest:[function(data){
            let  ret='';
            for(let i in data){
                ret+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
            }
            return ret;
        }],
        header:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    })
}

//請求方法的封裝
export const postRequest=(url,params)=>{
    return axios({
        method:'post',
        url:'${base}${url}',
        data:params
    })
}
export const putRequest=(url,params)=>{
    return axios({
        method:'put',
        url:'${base}${url}',
        data:params
    })
}
export const getRequest=(url,params)=>{
    return axios({
        method:'get',
        url:'${base}${url}',
        data:params
    })
}
export const deleteRequest=(url,params)=>{
    return axios({
        method:'delete',
        url:'${base}${url}',
        data:params
    })
}
 

配置請求轉發的代理vue.config.js

let proxyObj ={}
proxyObj['/']={
    vs:false,
    target:'http://localhost:8080',
    changeOrigin: true,
    pathRewrite:{
        '^/':''
    }
}
module.exports={
    devServer:{
        host:'localhost',
        port:8081,
        proxy:proxyObj
    }
}