6.前後端接口對接

更改後端接口

server.port=8081
           

安裝axios

npm install axios
           

封裝網絡請求

建立utils/api.js

import axios from 'axios'
//将element-ui的錯誤資訊的彈框引入進來
////單獨引入 此時調用方法為 Message(options)。
// 我們也為每個 type 定義了各自的方法，如 Message.success(options)。
// 并且可以調用 Message.closeAll() 手動關閉所有執行個體。
import {Message} from 'element-ui';


//編寫處理資訊響應的攔截器，該攔截器有success和error兩個回調函數，做一些判斷
//處理響應資訊的響應攔截器
/*上面已經導入了axios的對象了，這個對象裡面有個響應的攔截器axios.interceptors.response.use(),
use裡面的data是服務端響應給你的資料，該攔截器有兩個回調函數，一個是success，一個是error,和jQuery
裡面的ajax一樣請求資料的時候也有兩個回調函數，一個success，一個error,可以簡單的了解為
http的響應碼是200的，它會進入到success方法中來，400以上的會進入到error來，
*/
axios.interceptors.response.use(success=>{
    //success.status:http的響應碼    success.status ==200   success.data.status == 500:傳回json的status
    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=''; ////防止有一天要給所有請求加字首要一個一個去改，太麻煩
//請求位址  請求參數param
export const postKeyValueRequest=(url,params)=>{
    return axios({ //和ajax請求差不多
        method:'post',
        url:`${base}${url}`,
        data:params, //直接這樣會以json的形式傳給伺服器，這是不支援的
        transformRequest:[function(data){
            let  ret='';
            for(let i in data){
                //往ret上面追加變量
                ret+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
            }
            console.log(ret)
            return ret;
        }],
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    }
    )
}
           

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

//配置請求轉發的代理
//定義代理的對象
let proxyObj ={}

proxyObj['/']={ //攔截的http請求
    ws:false,   //關掉websocket
    target:'http://localhost:8081', //目标轉發位址
    changeOrigin: true,
    pathRewrite:{   //請求位址重寫
        '^/':''     //攔截到的位址不去修改它
    }
}
//把這個導出來
module.exports={  //配置開發環境
    devServer:{
        host:'localhost',  //端口号
        port:8080,
        proxy:proxyObj   //代理對象
    }
}
           

設定Login.vue

methods:{
            submitLogin(){
                this.$refs.loginForm.validate((valid) => {
                    if(valid){
                        postKeyValueRequest('/doLogin',this.loginForm).then(resp=>{
                            //resp：從服務端拿到的資料  使用者的資料要儲存到哪裡？ 儲存在sessionSto  打開就沒了
                            if(resp){
                                alert(JSON.stringify(resp))
                                // window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
                                // this.$router.replace('/home') //replace替換 push壓入
                            }
                        })
                    }else{
                        this.$message.error('請輸入所有字段')
                        return false;
                    }
                })
            }
        }
           

運作點選登入按鈕