Day31Web进阶-ElementPlus

ElementPlus

Vue中涉及跳转需要通过路由router

//跳转到登录界面

router.push('/login');

vue类型需要构建router实例

import { useRouter } from "vue-router";

const router = useRouter();

js文件不需要，例如request.js

import router from '../router';

request.js

import axios from 'axios';

import { ElMessage } from 'element-plus';

import router from '../router';

//创建axios实例对象

const request = axios.create({

baseURL: '/api',

timeout: 600000

})

//axios的响应 request 拦截器 - 获取localStorage中的token令牌，在请求头中增加token请求头

request.interceptors.request.use(

(config) =>{

const loginUser = JSON.parse(localStorage.getItem('loginUser'));

if(loginUser && loginUser.token){

config.headers.token = loginUser.token;

}

return config;

}

)

//axios的响应 response 拦截器

request.interceptors.response.use(

(response) => { //成功回调

return response.data

},

(error) => { //失败回调

if(error.response.status === 401){//===全等，类型和值

//提示信息

ElMessage.error('登录超时，请重新登录')

//跳转到登录界面

router.push('/login');

}else{

ElMessage.error('接口访问异常');

}

return Promise.reject(error)

}

)

export default request

layout.vue

​
​ 班级管理
​
​
​ 学员管理
​
​
​
​
​
​ <template #title>
​ 系统信息管理
​
​
​ 部门管理
​
​
​ 员工管理
​
​

​
​
​ <template #title>
​ 数据统计管理
​
​
​ 员工信息统计
​
​
​ 学员信息统计
​
​
​ 日志信息统计
​
​
​
​
​
​
​
​
​
​
​

打包只打包源码，不包括config.js配置文件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [vue()],

resolve: {

alias: {

'@': fileURLToPath(new URL('./src', import.meta.url))

}

},

server: {

proxy: {

'/api': {

​ target: 'http://localhost:8080',

​ secure: false,

​ changeOrigin: true,

​ rewrite: (path) => path.replace(/^/api/, ''),

}

},

// hmr: {

// overlay: false

// }

}

})

MySQL :: Download MySQL Community Server (Archived Versions)

安装代码在接口文档里面的第19天