第六天:配置项目拦截器,配置请求,配置验证码

一.安装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";

/*
    响应拦截器: 统一处理消息提示
*/
axios.interceptors.response.use(success => { // 访问到后端接口
    // 业务逻辑错误
    if (success.status && success.status === 200) { // 调到接口
        // 后端：500 业务逻辑错误，401 未登录，403 无权访问；
        if (success.data.code === 500 || success.data.code === 401 || success.data.code === 403) {
            // 输出后端的错误提示信息(业务逻辑错误,未登录,无权访问)
            Message.error({message: success.data.message});
            return;
        }
        if (success.data.message) {
            // 输出后端的成功提示信息(添加成功,删除成功...)
            Message.success({message: success.data.message});
        }
    }
    return success.data;
}, error => { // 没访问到后端接口
    if (error.response.code === 504 || error.response.code === 404) {
        Message.error({message: '服务器被吃掉了'})
    } else if (error.response.code === 403) {
        Message.error({message: '权限不足，请联系管理员！'})
    } else if (error.response.code === 401) {
        Message.error({message: '您还未登录，请登录！'})
        router.replace('/') // 路由替换
    } else {
        if (error.response.data.message) {
            Message.error({message: error.response.data.message})
        } else {
            Message.error({message: '未知错误！'})
        }
    }
    return;
});

/*
    配置请求
*/
// 预备前置路径
let base = '';

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

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

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

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

三.配置验证码

修改yeb/src/views/Login.vue

1.绑定点击事件

// 验证码url
// time参数确保点击刷新验证码出来的是不同验证码
captchaUrl: '/captcha?time=' + new Date(),

2.调用后端接口

3.配置点击事件

// 点击刷新验证码
updateCaptcha(){
  this.captchaUrl = '/captcha?time=' + new Date();
},

四.转发解决跨域访问

新建yeb/vue.config.js

let proxyObj = {} // 代理对象
proxyObj['/'] = {
    // websocket
    ws: false,
    // 代理目标地址
    target: 'http://localhost:8081',
    // 发送请求头 host 会被设置 target
    changeOrigin: true,
    // 不重写请求地址
    pathRewrite: {
        '^/': '/'
    }
}

// 访问的默认的路径和端口
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj // 代理
    }
}

五.调整一下验证码样式

修改yeb/src/views/Login.vue

/*验证码*/
.el-form-item__content {
  display: flex;
  align-items: center;
}