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

news2024/12/28 4:50:20

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 = newTokenName
       tokenInfo.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-vue


npm 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) => {
        // 请求前回调
        // 添加token
        const tokenStore = useTokenStore()
        // 判断有无token
        if (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.coloradmin.cn/o/1983522.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

能量柱 成交量 高抛低吸 文华财经指标公式源码 幅图 九稳量化系统 全网最火指标公式源码 期货最牛的买卖指标源码公式

能量柱 成交量 高抛低吸 文华财经指标公式源码 幅图 九稳量化系统 全网最火指标公式源码 期货最牛的买卖指标源码公式

我觉得期货市场就是一个战场的翻版。 但是专注并不是每天盯盘&#xff0c;这样交易容易耗费太多的精神和心力。交易要做趋势&#xff0c;如果萎靡&#xff0c;趋势根本就跟不上。不要用生命&#xff0c;身体去交易&#xff0c;要用思想去交易。做单要做的舒畅&#xff0c;才能…
阅读更多...
【SEO优化】做好外部站点优化让你获取更多链接

【SEO优化】做好外部站点优化让你获取更多链接

今天我们就来谈谈外部网站优化&#xff0c;这在搜索引擎优化中的重要性不亚于内部优化。但与此同时&#xff0c;SEO的初学者往往不会给予太多的关注&#xff08;由于各种原因&#xff09;。顺便说一句&#xff0c;这对谷歌的算法非常重要。如果没有高质量和全面的外部优化&…
阅读更多...
sql注入总结-1

sql注入总结-1

SQL注入 1.查看类型 如果是字符型注入 我们可以输入?id1\ 弹出的 near 1) LIMIT 0,1 报错类 型为‘&#xff09; near 1)) LIMIT 0,1 报错类型为)) 切在变为?id1\--后恢复正常则可以判断类型 2.id1和id-1的区别 id1&#xff1a;这个条件通常用于查找数据库中 id 列值为 …
阅读更多...
ZICO2: 1【附代码】(权限提升)

ZICO2: 1【附代码】(权限提升)

靶机下载地址&#xff1a; https://vulnhub.com/entry/zico2-1,210/https://vulnhub.com/entry/zico2-1,210/ 1. 主机发现端口扫描目录扫描敏感信息收集 1.1. 主机发现 nmap -sn 192.168.5.0/24|grep -B 2 08:00:27:62:AC:7F 1.2. 端口扫描 nmap -p- 192.168.5.66 1.3. 目…
阅读更多...
Effective-Java-Chapter3

Effective-Java-Chapter3

https://github.com/clxering/Effective-Java-3rd-edition-Chinese-English-bilingual/blob/dev/Chapter-3 准则一 覆盖 equals 方法时应遵守的约定 重写equals 方法需要满足的特性 Reflexive: For any non-null reference value x, x.equals(x) must return true. 反身性&a…
阅读更多...
科普文：微服务之Spring Cloud Alibaba分布式事务组件Seata4种分布式事务模式及其选择

科普文：微服务之Spring Cloud Alibaba分布式事务组件Seata4种分布式事务模式及其选择

https://zhouxx.blog.csdn.net/article/details/140940976 科普文&#xff1a;微服务之Spring Cloud Alibaba分布式事务组件Seata设计方案-CSDN博客 一、概述 Seata是一款开源的分布式事务解决方案&#xff0c;致力于提供高性能和简单易用的分布式事务服务。Seata提供了AT、…
阅读更多...
基于springboot+vue+uniapp的智慧校园管理系统小程序

基于springboot+vue+uniapp的智慧校园管理系统小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…
阅读更多...
[网鼎杯 2018]Comment

[网鼎杯 2018]Comment

使用环境为https://adworld.xctf.org.cn/challenges&#xff0c;搜索题目[网鼎杯 2018]Comment。 进入环境&#xff0c;发现为一个留言板&#xff0c;点击发帖试试。 尝试发帖 跳转到登录页面&#xff0c;根据提示使用burp进行暴力破解。 发现payload为666时状态码不同。 尝试…
阅读更多...
【Flutter 自定义字体】等宽字体等

【Flutter 自定义字体】等宽字体等

一般如果涉及自定义字体、等宽字体&#xff0c;我们通常使用到 Google 提供的&#xff1a;https://fonts.google.com/&#xff08;可能需要魔法&#xff09;&#xff0c; 1 如果是等宽字体&#xff0c;搜索关键词 ”mono“ 就会发现有很多&#xff1a; 2 我们可以直接选择第一…
阅读更多...
nuScenes数据集及mmdetection3d中的相关处理

nuScenes数据集及mmdetection3d中的相关处理

1. nuScence数据集简单介绍 数据集官网&#xff1a;https://www.nuscenes.org 论文&#xff1a;https://arxiv.org/abs/1903.11027 官方github页面&#xff1a;GitHub - nutonomy/nuscenes-devkit: The devkit of the nuScenes dataset. 1.1 坐标系的定义 nuScence数据集共…
阅读更多...
cpp学习记录06：文件操作与模板

cpp学习记录06：文件操作与模板

文件操作 对文件操作需要包含头文件<fstream> 文件类型&#xff1a; 文本文件&#xff1a;以文本ASCII码形式储存 二进制文件&#xff1a;以文本的二进制形式储存 操作文件三大类&#xff1a; ofstream&#xff1a;写操作 ifstream&#xff1a;读操作 fstream&…
阅读更多...
以知识图谱结构为Prompt框架，帮LLM快速找出因果关系生成更精准内容

以知识图谱结构为Prompt框架，帮LLM快速找出因果关系生成更精准内容

因果关系提取一直是LLM领域一个热门的研究方向&#xff0c;正如我上一篇文章中介绍的&#xff0c;我们在制定决策和科学研究时&#xff0c;往往需要LLM具有非常稳健的因果推理能力。幸运的是&#xff0c;恰巧知识图谱结构作为Prompt(“KG Structure as Prompt”&#xff09;能够…
阅读更多...
做一个能和你互动玩耍的智能机器人之六-装配

做一个能和你互动玩耍的智能机器人之六-装配

openbot小车&#xff0c;最简单的配件。一个小车支架或者底盘&#xff0c;四个马达&#xff0c;最好是双层的&#xff0c;下层安装马在&#xff0c;上层电池和电源盒&#xff0c;L298N&#xff0c;arduino&#xff0c;手机支架&#xff0c;根据需要配置蓝牙&#xff0c;超声波等…
阅读更多...
Arrays、Lambda表达式、Collection集合

Arrays、Lambda表达式、Collection集合

1. Arrays 1.1 操作数组的工具类 方法名说明public static String toString(数组)把数组拼接成一个字符串public static int binarySearch(数组,查找的元素)二分查找法查找元素public static int[] copyOf(原数组,新数组长度)拷贝数组public static int[] copyOfRange(原数组…
阅读更多...
接口自动化测试mock框架模块实战

接口自动化测试mock框架模块实战

前言 mock的介绍 py3已将mock集成到unittest库中&#xff1b; 为的就是更好的进行单元测试&#xff1b; 简单理解&#xff0c;模拟接口返回参数&#xff1b; 通俗易懂&#xff0c;直接修改接口返回参数的值&#xff1b; mock的作用 1、解决依赖问题&#xff0c;达到解耦作用…
阅读更多...
基于Spring前后端分离版本的论坛

基于Spring前后端分离版本的论坛

基于Spring前后端分离版本的论坛系统 PP论坛地址系统设计逻辑交互图数据库设计工程结构概述注册功能实现展示注册交互图参数要求接口规范后端具体实现前端数据集成 接口拦截器实现mybatis生成类与映射文件改造session存储到 redis加盐算法实现部分Bug调试记录项目测试记录Postm…
阅读更多...
关于正点原子imx6ull-mini在写触摸驱动时，一直挂载不上驱动，就是没有一些信息反馈

关于正点原子imx6ull-mini在写触摸驱动时，一直挂载不上驱动，就是没有一些信息反馈

/** 设备树匹配表 */ const struct of_device_id gt9147_of_match_table[] {{.compatible "goodix,gt9147" },{ /* sentinel */ } };const struct of_device_id gt9147_of_match_table[] {{.compatible "goodix&#xff0c;gt9147"},{} }; 找了俩小时…
阅读更多...
高频面试题全攻略：从算法到解题技巧

高频面试题全攻略：从算法到解题技巧

干货分享&#xff0c;感谢您的阅读&#xff01; &#xff08;暂存篇---后续会删除&#xff0c;完整版和持续更新见高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09;&#xff09; 备注&#xff1a;引用请标注出处&#xff0c;同时存在的问题请在相关博客留言…
阅读更多...
基于宝塔面板稳定快速安装 ssl 证书脚本

基于宝塔面板稳定快速安装 ssl 证书脚本

背景 我通过AI制作了不少关于签发ssl证书的脚本&#xff0c;目的是方便无脑安装&#xff0c;不需要懂代码。 但全都是基于acme.sh这个工具来设计的脚本&#xff0c;而且证书申请有点慢&#xff0c;有时还会申请失败。 然后我发现了certbot, 安装证书可谓神速&#xff01; c…
阅读更多...
[米联客-安路飞龙DR1-FPSOC] UDP通信篇连载-04 IP层程序设计

[米联客-安路飞龙DR1-FPSOC] UDP通信篇连载-04 IP层程序设计

软件版本&#xff1a;Anlogic -TD5.9.1-DR1_ES1.1 操作系统&#xff1a;WIN10 64bit 硬件平台&#xff1a;适用安路(Anlogic)FPGA 实验平台&#xff1a;米联客-MLK-L1-CZ06-DR1M90G开发板 板卡获取平台&#xff1a;https://milianke.tmall.com/ 登录“米联客”FPGA社区 ht…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023