vue之element-ui的引入及请求封装_elementui请求

1 Element UI的引入

1.1 安装

npm i element-ui -S	// -S安装到项目目录下
1

官方文档（适配vue2.x）：https://element.eleme.cn/#/zh-CN/
适配vue3.x的为Element Plus，其官方文档地址为：https://element-plus.org/zh-CN/#/zh-CN，如果使用的是vue3那么请参照指南-安装中的内容安装Element Plus。

1.2 配置

在main.js中引入并进行启用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'				// 引入1
import 'element-ui/lib/theme-chalk/index.css'	// 引入2

Vue.config.productionTip = false
Vue.use(ElementUI)								// 启用

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2 请求封装

2.1 安装axios（用于前后端数据交互）

npm install axios -S
1

2.2 编写拦截器

在src目录下新建utils文件夹，并新建api.js文件
拦截器功能：

1. 请求封装：规范前端发送给后端的各种请求（post、get、put、delete）为：请求方式、接口路径、携带参数。
2. 响应拦截器：由于后台回传数据的格式是有标准格式的，这里对回传的数据进行统一处理。
3. 请求拦截器：将token放到请求头中。

import axios from "axios";			 // 引入 axios 
import { Message} from "element-ui"; // 直接在页面提示消息
import router from "../router";		 // 用于路径跳转

// 请求拦截器
axios.interceptors.request.use(
    config=>{
        // 如果存在token，请求头将会携带token，后端到时候会进行验证该token
        if (window.sessionStorage.getItem('tokenStorage')) {
            config.headers['Authorization'] = window.sessionStorage.getItem('tokenStorage');
        }
        return config;
    },error => {
        console.log(error);
    }
);

// 响应拦截器
// 这里最好奇的就是success和error是什么东东，内部都包含什么东西。我现在知道success有status和data，data我在后端知道有code、message、obj。
// error有response
axios.interceptors.response.use(
    success=>{  // 成功调到了后端接口，而不是说成功获取到正确的内容。和业务逻辑无关，业务逻辑再在内部进行判断（也就是说，后端是有这个接口的）
        // 业务逻辑错误
        if(success.status&& success.status==200){   //  调到接口后会返回status（存在）并且status为200（http协议默认的，调到接口返回200）
            // 正式判断业务逻辑有没有问题
            // data由三部分组成：code、message、object
            // 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;
    }
);

// 请求封装
//注意其中url上的引号为tab键上的``，而不是''
// 传送json格式的post请求
// 请求的路径，和参数
let base=''; // 前置路径（ip地址、端口号、前置路径）
export const postRequest=(url,params)=>{
    return axios({
        method:'post',
        url:`${base}${url}`,
        data:params
    })
}
// 传送json格式的put请求
export const putRequest=(url,params)=>{
    return axios({
        method:'put',
        url:`${base}${url}`,
        data:params
    })
}

// get
export const getRequest=(url,params)=>{
    return axios({
        method:'get',
        url:`${base}${url}`,
        data:params
    })
}

// 传送json格式的delete请求
export const deleteRequest=(url,params)=>{
    return axios({
        method:'delete',
        url:`${base}${url}`,
        data:params
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

2.3 请求转发

在项目目录下新建vue.config.js文件。
实现原理：所有请求依然是发送到localhost:8080，这个文件实现了地址代理，将发送到localhost:8080的请求转发到了localhost:8082(后端地址端口)

let proxyObj={};

proxyObj['/'] = {
    //websocket
    ws:false,// 先使用nodejs转发的普通代理，等后续使用websocket代理
    target:'http://localhost:8082',// 代理8080的地址（后端地址）
    changeOrigin:true, // 发送请求的请求头，会被设置成

    pathRewrite:{   //重写请求地址
        '^/':'/'
    }
}

module.exports={
    devServer:{
        host:'localhost',
        port:8080,
        proxy:proxyObj  // 代理8080的地址
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20