Introducción de element-ui en vue y preparación de la página de inicio de sesión
1 Introducción de la interfaz de usuario del elemento
1.1 Instalación
npm i element-ui -S // -S安装到项目目录下
Documento oficial (adaptado a vue2.x): https://element.eleme.cn/#/zh-CN/El
adaptado a vue3.x es Element Plus, y su dirección del documento oficial es: https://element- plus.org/zh-CN/#/zh-CN , si está utilizando vue3, consulte el contenido en Guía-Instalación para instalar Element Plus.
1.2 Configuración
Introducir y habilitar en 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 Solicitar encapsulación
2.1 Instalar axios (para interacción de datos de front-end y back-end)
npm install axios -S
2.2 Escribir interceptores
Cree una nueva carpeta de utilidades en el directorio src y cree un nuevo archivo api.js.Función
interceptora:
- Encapsulación de solicitudes: estandarice varias solicitudes (publicar, obtener, colocar, eliminar) enviadas desde el front-end al back-end como: método de solicitud, ruta de interfaz y parámetros de transporte.
- Interceptor de respuesta: dado que el formato de los datos devueltos por el fondo tiene un formato estándar, los datos devueltos se procesan de manera uniforme aquí.
- Interceptor de solicitudes: coloque el token en el encabezado de la solicitud.
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 Solicitud de reenvío
Cree un nuevo archivo vue.config.js en el directorio del proyecto.
Principio de implementación: todas las solicitudes aún se envían a localhost: 8080. Este archivo implementa el proxy de dirección y reenvía las solicitudes enviadas a localhost: 8080 a localhost: 8082 (puerto de dirección de backend).
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的地址
}
}