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

已于 2024-08-14 23:32:18 修改
阅读量1k 收藏 19
点赞数 13
分类专栏： springboot3 + vue3 开发平台 文章标签： 前端
于 2024-08-06 03:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51355375/article/details/140909915
版权

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 /> 或者<i-ep-Lock />， 但是必须加前缀  i-ep-

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.tokenName && tokenStore.tokenInfo.tokenValue) {
            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("result:", 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 => {
        console.log("error", 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"  // 局域网其他电脑可访问
      }
}
})
不知所云,
关注
  • 13
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3【使用axios并封装axios请求】
蜗牛~~
05-12 2735
由于 Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。1、我们可以通过window.location.protocol和window.location.host获取协议和主机ip端口，然后统一设置axios的默认请求baseURL。来绑定的，例如 Vue.prototype.$toast = Toast。proxy是getCurrentInstance()对象中的一个属性，然后通过对象的解构赋值方式拿到proxy。
vue3_ts_axios_elementPlus:一个基于vue3 全家桶 + typescript+ element-plus+axios等 搭建的基础代码库, 有登录拦截鉴权，基本页面框架已经搭建好，可以直接进行各个模块开发
05-09
cli_demo 一个基于vue3 全家桶 + typescript + element-plus 搭建的基础代码库, 有登录拦截鉴权，基本页面框架已经搭建好，可以直接进行各个模块开发。 :open_book: Vue3.0 相关文档： 相关库名称 在线地址 :link: Vue3.0 官方文档 Vue3.0 中文文档 Composition-API手册 Vue3.0 源码学习 Vue-Router 官方文档 Vuex4.0 element-plus 主要用到的库 vue 全家桶 vue3 + vue-router + vuex + typescript http 请求:axios ui 库:element-plus. 代码检查:eslint+eslint-typescript,格式化:prettier webpack 插件:style-resources-loader（全局 stylus）webpack-bundle
axios全局封装（vue3 element-plus）
博客
06-29 659
axios在前端项目中是常用的http请求封装库，基于promise写法，让我们能更好的做异步处理。这里的代码主要借鉴了网上的代码，进行更改成自己的代码。
SpringBoot3+Vue3
m0_52485622的博客
12-13 544
Spingboot是Spring提供的一个子项目，用于快速构建Spring应用程序。
【SpringBoot3+Vue3】一【基础篇】
春天的波菜
11-13 5579
Spring Boot是Spring提供的一个子项目，用于快速构建Spring应用程序发送邮件为例@AutoConfiguration//表示当前类是一个自动配置类@Bean@Bean//扫描的包:启动类所在的包及其子包//扫描的注解。
SpringBoot 3+Vue 3实战笔记（01）[持续更新中....]
m0_55369737的博客
01-15 485
SpringBoot+vue实战项目，文章内容为笔者自己的整理的笔记
SpringBoot实现Vue-admin-template登录.docx
06-27
前端项目的端口配置在`vue.config.js`中，一般默认为9528，如果需要与后端接口交互，可能需要修改`VUE_APP_BASE_API`的基础URL，以指向后端服务器。 后端部分，我们使用SpringBoot来实现登录接口。SpringBoot提供了...
详解Vue前端对axios的封装和使用
10-17
本文将详细介绍如何在 Vue 前端中封装和使用 axios，以便提高开发效率和便于维护。 首先，我们得了解一下 axios 这个库。axios 支持浏览器和 node.js，提供了一种简单且有效的方法来发送 HTTP 请求到 REST ...
vue3.0 +element-puls框架 封装axios
qq_45293165的博客
05-23 452
2.在utils下面再创建一个http.js 文件用来封装api接口。完成了 希望对大家有所帮助。这个是axios.js。
vue学习-----二次封装axios和请求发送详解
快来一起学习前端知识把！加油，前端人
09-20 280
同源策略：就是我我们的浏览器出于安全考虑，只允许与本域（同协议，同域名，同端口的就叫本域）下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。当我们向不同源的网站发起请求时，就会产生跨域问题，（跨域中请求是发送出去了，服务器响应了，但是会被浏览器的同源策略所拦截，使我们不能得到响应）
【SpringBoot3+Vue3】二【实战篇】-后端
春天的波菜
11-15 984
SpringBoot3+Vue3项目实战-后端。
从零搭建SpringBoot3+Vue3前后端分离项目基座，中小项目可用
qq_51355375的博客
04-05 3399
从零搭建SpringBoot3+Vue3前后端分离项目基座，中小项目可用，项目使用SpringBoot3+Vue3， 后端使用springboot3, mybatisPlus, druid,knife4j(swagger3),Jwt;前端 vue3 , element-plus, axios, pinia, vue-router;项目前后端分离， 可持续扩展。
SpringBoot3+Vue3项目学习笔记
m0_56761804的博客
06-10 551
Spring Boot是Spring提供的一个子项目，用于快速构建Spring应用程序。
SpringBoot3+Vue3实战篇
m0_56761804的博客
06-17 420
导学
Spring Boot 3 + Vue 3 项目实战，手把手教你从零开始开发上线一套生产级别的 Java 系统
qq_22803841的博客
08-11 7307
novel 是一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习实战型小说项目，配备保姆级教程手把手教你从零开始开发上线一套生产级别的 Java 系统，由小说门户系统、作家后台管理系统、平台后台管理系统等多个子系统构成。包括小说推荐、作品检索、小说排行榜、小说阅读、小说评论、会员中心、作家专区、充值订阅、新闻发布等功能。...
1、springboot3 vue3开发平台-后端-项目构建
最新发布
qq_51355375的博客
07-19 554
springboot3 vue3开发平台-后端-1-项目构建
Springboot3+vue3从0到1开发实战项目（一）
全栈技术分享，项目分享，资料分享
11-24 1309
后端开发 ： Validation, Mybatis,Redis, Junit,SpringBoot3 ，mysql，Swagger,JDK17项目部署。前端开发： Vue3，Vite，Router，Pina ，Element-Plus。：注册，登录，用户详细信息，更新用户基本信息， 更新用户头像，更新用户密码。： 文章分类列表， 新增文章分类，更新文章分类，获取文章分类，删除文章分类。：新增文章， 更新文章，获取文章详情， 删除文章，文章列表（条件分页）开发工具idea ，VsCode，navicat。
使用SpringBoot替代Nginx发布Vue3项目
Good Luck
07-27 3904
在nginx时候我们是配置了反向代理：（try_files $uri $uri/ /index.html）；从而将所有的url都代理到了index.html路径下。在SpringBoot中我们怎么办呢？新建配置文件：MindWebMvcConfigurer。至于打包，就跟平时打包到nginx一样的去打包就行了。（博主SpringBoot版本2.7.14）（博主vue版本：3.2.44）不要添加base参数，画蛇添足！
为vue3 封装一个基于axios的request 请求时header带上X-X-TOKEN
06-01
好的，以下是一个基于axios的request请求，在header中带上X-X-TOKEN的Vue3封装示例： ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'your-base-url' //设置请求的base url }); // 添加请求拦截器 instance.interceptors.request.use(function (config) { // 在发送请求之前做些什么 const token = localStorage.getItem('token'); //假设您的token存储在localStorage中 if (token) { //在header中加入X-X-TOKEN config.headers['X-X-TOKEN'] = token; } return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); export default { // 封装post请求 post(url, data) { return instance({ method: 'post', url, data }); }, // 封装get请求 get(url, params) { return instance({ method: 'get', url, params }); } } ``` 在这个封装中，我们使用了Axios的拦截器功能，在请求发送前对请求的header进行了修改，添加了X-X-TOKEN字段。此外，我们还封装了post和get请求，方便使用。您可以根据实际情况进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不知所云,

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值