10、springboot3 vue3开发平台-前端-elementplus， axios配置及封装使用， 包含token 存储

1. 准备工作

1.1 清除项目自带页面

删除views和components目录下所有东西：
在这里插入图片描述

1.2 修改App.vue

<script setup lang="ts"></script><template><router-view></router-view>
</template><style scoped></style>

1.3 修改main.css

修改assets/main.css, 默认样式会影响布局


body {margin: 0;
}

1.4 安装 scss

npm install -D sass

2. 创建路由配置

在router/index.ts 创建登录页面路由配置

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '',redirect: "/login"},{path: '/login',name: 'login',component: () => import('@/views/Login.vue')},{path: '/401',component: () => import('@/views/error/401.vue')},{path: '/404',component: () => import('@/views/error/404.vue')},]
})export default router

3. 使用pinia 存储token

3.1 pinia持久化

安装插件， 文档： https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

npm i pinia-plugin-persistedstate

在main.ts 中配置：

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

在这里插入图片描述
使用：

{persist: true   // 持久化存储
}

注意： 不要使用js版本的pinia-plugin-persist，导入时会因为类型问题报错

3.2 在stores下创建token.ts， 存储token

// 定义 store
import { defineStore } from "pinia"
import {reactive, ref} from 'vue'
/*第一个参数:名字,唯一性第二个参数:函数,函数的内部可以定义状态的所有内容返回值: 函数*/
export const useTokenStore = defineStore('token', () => {// 响应式变量const tokenInfo = reactive({tokenName: '',tokenValue: ''})// 修改token值函数const setToken = (newTokenName: string, newTokenValue: string) => {tokenInfo.tokenName = newTokenNametokenInfo.tokenValue = newTokenValue}// 移除token值函数const removeToke = () => {tokenInfo.tokenName = ''tokenInfo.tokenValue = ''}return {tokenInfo, setToken, removeToke}
}, 
{persist: true   // 持久化存储
}
)

4.安装 ElementPlus, 并使用

4 .1 安装配置

 npm install element-plus --save

ElenentPlus 支持完整导入，按需导入，具体可参考官方文档， 这里使用官网推荐方式，使用按需自动导入。
需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件：

npm install -D unplugin-vue-components unplugin-auto-import

按官网文档， 在vite.config.ts进行如下配置：

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

在这里插入图片描述
会在根目录下生成这两个文件， 插件会自动处理组将的导入和注册
在这里插入图片描述

4.2 图标自动导入

安装依赖

npm install @element-plus/icons-vuenpm i -D unplugin-icons unplugin-auto-import

在vite.config.添加配置：
在这里插入图片描述

完整配置文件：

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// ElementPlus的Icon自动导入
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),AutoImport({resolvers: [ElementPlusResolver(),// 自动导入图标IconsResolver({prefix: 'Icon',}),]}),Components({resolvers: [ElementPlusResolver(),// 自动注册图标IconsResolver({enabledCollections: ['ep'],}),]}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

注： 使用自动导入引用时和其他方式不同：

原来：   <Lock />
自动导入： <i-ep-lock />

4.3 ElMessage 导入找不到问题

auto-imports.d.ts中添加：

const ElMessage: typeof import('element-plus/es')['ElMessage']

在这里插入图片描述

在tsconfig.app.json 添加：
在这里插入图片描述

5. axios 安装配置

安装：

npm install axios

5.1 axios 配置

在src目录下创建request目录， 在目录下创建axios-config.ts文件。
在这里插入图片描述


import axios, { type AxiosInstance } from 'axios'// 定义公共前缀，创建请求实例
const baseURL = '/api/'
const instance: AxiosInstance = axios.create({baseURL})import { useTokenStore } from '@/stores/token'// 配置请求拦截器
instance.interceptors.request.use((config) => {// 请求前回调// 添加tokenconst tokenStore = useTokenStore()// 判断有无tokenif (tokenStore.tokenInfo) {config.headers[tokenStore.tokenInfo.tokenName] = tokenStore.tokenInfo.tokenValue}return config},(err) => {// 请求错误的回调Promise.reject(err)}
)import router from "@/router";
// 添加响应拦截器
instance.interceptors.response.use(result => {// //console.log("header:", result)// 判断业务状态码if (result.data.code === 0) {// return result.data;return result.data} else if (result.data.code === 1) {// 操作失败ElMessage.error(result.data.message ? result.data.message : '服务异常')// 异步操作的状态转换为失败return Promise.reject(result)} else {return result}},err => {// 判断响应状态码， 401为未登录，提示登录并跳转到登录页面if (err.response.status === 401) {ElMessage.error('请先登录')router.push('/login')} else if (err.response.status === 403){ElMessage.error('登录超时')router.push('/login')} else {ElMessage.error('服务异常')}// 异步操作的状态转换为失败return Promise.reject(err)  }
)export default instance

6. 服务代理配置

在项目根目录下创建两个环境配置文件，分别配置开发和生产环境配置
.env.production // 生产环境

VITE_MODE_NAME=pro
VITE_BASE_URL=api
VITE_TARGET_URL=http://localhost:8999/

.env.development // 开发环境

VITE_MODE_NAME=dev
VITE_BASE_URL=api
VITE_TARGET_URL=http://127.0.0.1:8999/

在vite.config.ts配置：

server: {proxy: {'/api': {   // 获取路径中包含了/api的请求//target: 'http://192.168.1.51:8999',        // 服务端地址target: env.VITE_TARGET_URL,changeOrigin: true, // 修改源rewrite:(path) => path.replace(/^\/api/, '')   // api 替换为 ''}},host: "0.0.0.0"  // 局域网其他电脑可访问}

完整配置：

import { fileURLToPath, URL } from 'node:url'import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// ElementPlus的Icon自动导入
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'// 引入path
import path from 'path'// https://vitejs.dev/config/
export default defineConfig(({mode}) => {const env = loadEnv(mode, process.cwd()); return {plugins: [vue(),vueDevTools(),AutoImport({resolvers: [ElementPlusResolver(),// 自动导入图标IconsResolver({prefix: 'Icon',}),]}),Components({resolvers: [ElementPlusResolver(),// 自动注册图标IconsResolver({enabledCollections: ['ep'],}),]}),// 自动安装图标Icons({autoInstall: true,}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},server: {proxy: {'/api': {   // 获取路径中包含了/api的请求//target: 'http://192.168.1.51:8999',        // 服务端地址target: env.VITE_TARGET_URL,changeOrigin: true, // 修改源rewrite:(path) => path.replace(/^\/api/, '')   // api 替换为 ''}},host: "0.0.0.0"  // 局域网其他电脑可访问}
}
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/392480.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于R语言绘制GGE双标图2

基于R语言绘制GGE双标图2

参考资料&#xff1a; 严威凯等: 双标图分析在农作物品种多点试验中的应用【作物学报】 https://cran.r-project.org/web/packages/GGEBiplots/GGEBiplots.pdf 1、如何判断双标图是否充分体现数据中的规律 在对双标图的解释中&#xff0c;有一个隐含的假设&#xff0c;就是所…
阅读更多...
COFFEE AI PARTNER -- 神奇的AI工具，相当我雇佣了一个AI员工，淘汰你的是会使用AI的人

COFFEE AI PARTNER -- 神奇的AI工具，相当我雇佣了一个AI员工，淘汰你的是会使用AI的人

COFFEE AI PARTNER介绍 COFFEE AI PARTNER是由 AI JAVA开发的一款生成式人工智能工具&#xff08;又名AI助手&#xff09;&#xff0c;尝试一下。 首先域名似乎正在备案中&#xff0c;企业邮箱似乎正在采购&#xff0c;目前服务地址是&#xff1a;COFFEE AI PARTNER-官网 官网…
阅读更多...
git安装图文

git安装图文

1.下载 通过百度网盘分享的文件&#xff1a;git安装图文 链接&#xff1a;https://pan.baidu.com/s/17ZMiWUIULtrGGba5n-WLeA 提取码&#xff1a;anjm --来自百度网盘超级会员V3的分享 2.安装
阅读更多...
【C语言篇】猜数字游戏（赋源码）

【C语言篇】猜数字游戏（赋源码）

文章目录 猜数字游戏前言随机数生成randsrandtime设置随机数生成范围 猜数字游戏的实现 猜数字游戏 前言 在前两篇博客对于分支和循环语句进行了详细的介绍&#xff1a; 分支语句详解 循环语句详解 我们就可以写一写稍微有趣的代码了&#xff0c;比如&#xff1a; 写一个…
阅读更多...
二分查找法

二分查找法

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…
阅读更多...
SQL各种注入详解加案例--持续更新

SQL各种注入详解加案例--持续更新

sql注入 联合查询注入案例手工注入判断是否有SQL注入漏洞 sqlmap工具注入 报错注入常用的函数updatexml()函数案例 floor()涉及的函数实现手工注入sqlmap工具注入 盲注布尔盲注案例手工注入脚本sqlmap自动化工具 时间盲注 post注入GET传参和POST传参案例手工注入sqlmap工具 二次…
阅读更多...
使用 Python 制作一个属于自己的 AI 搜索引擎

使用 Python 制作一个属于自己的 AI 搜索引擎

1. 使用到技术 OpenAI KEYSerper KEYBing Search 2. 原理解析 使用Google和Bing的搜搜结果交由OpenAI处理并给出回答。 3. 代码实现 import requests from lxml import etree import os from openai import OpenAI# 从环境变量中加载 API 密钥 os.environ["OPENAI_AP…
阅读更多...
MySQL：索引（Index）语句

MySQL：索引（Index）语句

索引的限制 每个表最多可以有 16 个索引&#xff08;InnoDB 表的限制&#xff09;。 单个索引最多可以包含 16 列。 索引列的最大长度为 767 字节&#xff08;对于 CHAR, VARCHAR, 和 BINARY 类型&#xff09;&#xff0c;3072 字节&#xff08;对于 BLOB 类型&#xff09;。…
阅读更多...
浅谈取样器插件之bzm - Free-Form Arrivals Thread Group

浅谈取样器插件之bzm - Free-Form Arrivals Thread Group

浅谈取样器插件之bzm - Free-Form Arrivals Thread Group bzm - Free-Form Arrivals (Ultimate Thread Group) 是一个高级且灵活的线程组插件&#xff0c;专为Apache JMeter设计。它扩展了JMeter的标准线程组功能&#xff0c;允许用户以自由形式定义线程&#xff08;用户&…
阅读更多...
SSM项目学习：用xml配置文件或注解开发实现控制反转和依赖注入

SSM项目学习：用xml配置文件或注解开发实现控制反转和依赖注入

什么是SSM SSMSpring(Spring Framework)Spring MVC mybatis Spring Framework系统架构 Spring Framework学习线路 IoC(Inversion of Control)和DI(Dependency Injection) 他们解决的问题&#xff1a;代码耦合度高的问题&#xff0c;需要类自己new对象&#xff0c;修改部分代…
阅读更多...
03、DQL（数据查询语句）

03、DQL（数据查询语句）

目录 1、编写顺序 2、基本查询 3、条件查询 4、聚合函数 5、分组查询 6、排序查询 7、分页查询 8、执行顺序 1、编写顺序 SELECT 字段列表 FROM 表名列表 WHERE 条件列表 GROUP BY 分组字段列表 HAVING 分组后条件列表 ORDER BY 排序字段列表 LIMIT 分页参数2、基本查…
阅读更多...
简单的docker学习 第11章 镜像中心

简单的docker学习 第11章 镜像中心

第11章 镜像中心 Docker Hub 与阿里云都是 Docker 的公网镜像中心&#xff0c;用户可以将自己的镜像 push 到公网镜像中心中自己的镜像仓库&#xff0c;并可将仓库设置为私有库&#xff0c;使他人无法看到&#xff0c;更无法 pull&#xff0c;以保证镜像的安全性。不过&#x…
阅读更多...
【LeetCode刷题笔记】LCR.27 回文链表

【LeetCode刷题笔记】LCR.27 回文链表

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 更多算法知识专栏&#xff1a;算法分析&#x1f525; 给大家跳段街舞感谢…
阅读更多...
为什么康耐视visionpro的C#二次开发调用的recorddisplay控件偶尔会显示白色的，偶尔又正常了？

为什么康耐视visionpro的C#二次开发调用的recorddisplay控件偶尔会显示白色的，偶尔又正常了？

recorddisplay控件正常显示 异常显示 原因分析&#xff1a; 没有完全加载recorddisplay控件&#xff0c;有可能是有bug没有完全加载&#xff0c;打断点调试控件是否完全加载。
阅读更多...
EMQX服务器安装MQTT测试

EMQX服务器安装MQTT测试

cd /usr/local/develop wget https://www.emqx.com/en/downloads/broker/5.7.1/emqx-5.7.1-el7-amd64.tar.gz mkdir -p emqx && tar -zxvf emqx-5.7.1-el7-amd64.tar.gz -C emqx ./emqx/bin/emqx start 重启 ./emqx/bin/emqx restart http://10.8.0.1:18083/ 账号ad…
阅读更多...
【Kubernetes】应用的部署（一）：金丝雀部署

【Kubernetes】应用的部署（一）：金丝雀部署

应用的部署&#xff08;一&#xff09;&#xff1a;金丝雀部署 在项目迭代开发过程中&#xff0c;经常需要对应用进行上线部署。上线部署策略主要有 3 种&#xff1a;金丝雀部署、蓝绿部署 和 滚动部署。 金丝雀部署 也被叫作 灰度部署。金丝雀部署过程&#xff1a;先让一部分…
阅读更多...
letcode 分类练习 哈希表 242.有效的字母异位词 349. 两个数组的交集 202. 快乐数 1. 两数之和

letcode 分类练习 哈希表 242.有效的字母异位词 349. 两个数组的交集 202. 快乐数 1. 两数之和

letcode 分类练习 哈希表 242.有效的字母异位词 349. 两个数组的交集 202. 快乐数 1. 两数之和 242.有效的字母异位词349.两个数组的交集202.快乐数1.两数之和 242.有效的字母异位词 分别定义两个字母哈希表就可以了 class Solution { public:bool isAnagram(string s, strin…
阅读更多...
搭建pxe网络安装环境

搭建pxe网络安装环境

实验目的&#xff1a; 搭建pxe网络安装环境实现服务器自动部署 实验原理&#xff1a; PXE 网络安装环境实现服务器自动部署的实验原理为&#xff1a; 待安装的服务器&#xff08;PXE 客户端&#xff09;开机时&#xff0c;BIOS 设置从网络启动&#xff0c;向网络发送请求。…
阅读更多...
科普文：JUC系列之ForkJoinPool源码解读ForkJoinWorkerThread

科普文：JUC系列之ForkJoinPool源码解读ForkJoinWorkerThread

科普文&#xff1a;JUC系列之ForkJoinPool基本使用及原理解读-CSDN博客 科普文&#xff1a;JUC系列之ForkJoinPool源码解读概叙-CSDN博客 科普文&#xff1a;JUC系列之ForkJoinPool源码解读WorkQueue-CSDN博客 科普文&#xff1a;JUC系列之ForkJoinPool源码解读ForkJoinTask…
阅读更多...
【第13章】Spring Cloud之Gateway全局异常处理

【第13章】Spring Cloud之Gateway全局异常处理

文章目录 前言一、异常处理1. 响应实体类2. 异常处理类 二、单元测试1. 无可用路由2. 服务不可用 总结 前言 网关作为我们对外服务的入口起着至关重要的作用&#xff0c;我们必须保证网关服务的稳定性&#xff0c;下面来为网关服务增加异常处理机制。 一、异常处理 1. 响应实…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023