vue之element-ui的引入及登录页编写
1 Element UI的引入
1.1 安装
npm i element-ui -S // -S安装到项目目录下
官方文档（适配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')
2 请求封装
2.1 安装axios（用于前后端数据交互）
npm install axios -S
2.2 编写拦截器
在src目录下新建utils文件夹，并新建api.js文件
拦截器功能：
- 请求封装：规范前端发送给后端的各种请求（post、get、put、delete）为：请求方式、接口路径、携带参数。
- 响应拦截器：由于后台回传数据的格式是有标准格式的，这里对回传的数据进行统一处理。
- 请求拦截器：将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
})
}
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的地址
}
}