一.安裝axios

npm install axios -s

image.png

安裝成功:

image.png

二.配置攔截器

新建yeb/src/utils文件夾
新建yeb/src/utils/api.js文件
api.js

import axios from "axios";
import {Message} from "element-ui";
import router from "../router";

/*
    響應(yīng)攔截器: 統(tǒng)一處理消息提示
*/
axios.interceptors.response.use(success => { // 訪問(wèn)到后端接口
    // 業(yè)務(wù)邏輯錯(cuò)誤
    if (success.status && success.status === 200) { // 調(diào)到接口
        // 后端：500 業(yè)務(wù)邏輯錯(cuò)誤，401 未登錄，403 無(wú)權(quán)訪問(wèn)；
        if (success.data.code === 500 || success.data.code === 401 || success.data.code === 403) {
            // 輸出后端的錯(cuò)誤提示信息(業(yè)務(wù)邏輯錯(cuò)誤,未登錄,無(wú)權(quán)訪問(wèn))
            Message.error({message: success.data.message});
            return;
        }
        if (success.data.message) {
            // 輸出后端的成功提示信息(添加成功,刪除成功...)
            Message.success({message: success.data.message});
        }
    }
    return success.data;
}, error => { // 沒(méi)訪問(wèn)到后端接口
    if (error.response.code === 504 || error.response.code === 404) {
        Message.error({message: '服務(wù)器被吃掉了'})
    } else if (error.response.code === 403) {
        Message.error({message: '權(quán)限不足，請(qǐng)聯(lián)系管理員！'})
    } else if (error.response.code === 401) {
        Message.error({message: '您還未登錄，請(qǐng)登錄！'})
        router.replace('/') // 路由替換
    } else {
        if (error.response.data.message) {
            Message.error({message: error.response.data.message})
        } else {
            Message.error({message: '未知錯(cuò)誤！'})
        }
    }
    return;
});

/*
    配置請(qǐng)求
*/
// 預(yù)備前置路徑
let base = '';

// 傳送 json 格式的 post 請(qǐng)求
export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: '${base}${url}',
        data: params
    })
}

// 傳送 json 格式的 get 請(qǐng)求
export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: '${base}${url}',
        data: params
    })
}

// 傳送 json 格式的 put 請(qǐng)求
export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params
    })
}

// 傳送 json 格式的 delete 請(qǐng)求
export const deleteRequest = (url, params) => {
    return axios({
        method: 'delete',
        url: `${base}${url}`,
        data: params
    })
}

三.配置驗(yàn)證碼

修改yeb/src/views/Login.vue

1.綁定點(diǎn)擊事件

// 驗(yàn)證碼url
// time參數(shù)確保點(diǎn)擊刷新驗(yàn)證碼出來(lái)的是不同驗(yàn)證碼
captchaUrl: '/captcha?time=' + new Date(),

2.調(diào)用后端接口

<!-- 驗(yàn)證碼 -->
<img :src="captchaUrl" @click="updateCaptcha()">

3.配置點(diǎn)擊事件

// 點(diǎn)擊刷新驗(yàn)證碼
updateCaptcha(){
  this.captchaUrl = '/captcha?time=' + new Date();
},

四.轉(zhuǎn)發(fā)解決跨域訪問(wèn)

新建yeb/vue.config.js

let proxyObj = {} // 代理對(duì)象
proxyObj['/'] = {
    // websocket
    ws: false,
    // 代理目標(biāo)地址
    target: 'http://localhost:8081',
    // 發(fā)送請(qǐng)求頭 host 會(huì)被設(shè)置 target
    changeOrigin: true,
    // 不重寫(xiě)請(qǐng)求地址
    pathRewrite: {
        '^/': '/'
    }
}

// 訪問(wèn)的默認(rèn)的路徑和端口
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj // 代理
    }
}

五.調(diào)整一下驗(yàn)證碼樣式

修改yeb/src/views/Login.vue

/*驗(yàn)證碼*/
.el-form-item__content {
  display: flex;
  align-items: center;
}