后台数据管理系统 - 项目架构设计-Vue3+axios+Element-plus（0917）

七、引入 element-ui 组件库

我的Git仓库：https://gitee.com/msyycn/vue3-hei-ma.git
官方文档： https://element-plus.org/zh-CN/

安装

$ pnpm add element-plus

自动按需：

安装插件

pnpm add -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

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

直接使用

<template><div><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button>...</div>
</template>

请添加图片描述 **彩蛋：**默认 components 下的文件也会被自动注册~

八、Pinia - 构建用户仓库和持久化

请添加图片描述

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

安装插件 pinia-plugin-persistedstate

pnpm add pinia-plugin-persistedstate -D

使用 main.js

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))

配置 stores/user.js

import { defineStore } from 'pinia'
import { ref } from 'vue'// 用户模块
export const useUserStore = defineStore('big-user',() => {const token = ref('') // 定义 tokenconst setToken = (t) => (token.value = t) // 设置 tokenreturn { token, setToken }},{persist: true // 持久化}
)

A.vue

   <script setup>import { useUserStore } from '@/stores/user';const userStore = useUserStore();</script><template><div>
<h2>A组件</h2>
<p>{{ userStore.token }}</p>
<el-button type="primary" @click="userStore.setToken('1234dxybihxtyb567890')" >登录</el-button>
<el-button type="danger" @click="userStore.removeToken()">退出</el-button></div></template><style lang="scss" scoped></style>

效果

九、 Pinia - 配置仓库统一管理

pinia 独立维护

- 现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一

- 优化：由 stores 统一维护，在stores/index.js中完成pinia初始化，交付main.js使用

user.js

import { defineStore } from "pinia";
import {ref} from 'vue'
// 用户模块 ：token setToken removeTokenexport const useUserStore = defineStore('big-user',()=>{const token =ref('')// 传递新的tokenconst setToken = (newToken) =>{token.value = newToken}// 清除token const removeToken = ()=>{token.value=''}
//  合并上面两个方法// const setToken = (newToken) =>{//   if(newToken){//     token.value = newToken//   }//   else{//     token.value = ''//   }// }
// 暴露出去
return {token,setToken,removeToken,
}},{persist:true,
})

counter.js

import { rowKey } from "element-plus/es/components/table-v2/src/common";
import { defineStore } from "pinia";
import {ref} from 'vue'export const useCounterStore = defineStore('counter',()=>{const count =ref('')// 传递新的tokenconst add = (n) =>{count.value += n}// 暴露出去
return {count,add,
}} )

index.js

/* 实现pinia独立维护
*/import { createPinia } from 'pinia'
// 引入持久化插件const pinia = createPinia()
pinia.use(persist)
export default pinia//初始的样子
// import {counterStore} from '@/stores/modules/counter.js'
// export {counterStore}
// import {userStore} from '@/stores/mouser.js'
// export{userStore}//统一维护
export * from '@/stores/modules/counter.js'
export * from '@/stores/modules/user.js'

main.js

import { createApp } from 'vue'import App from './App.vue'
import router from './router' 
// 从store/index.js导入pinia实例
import pinia from  '@/stores/index.js'  // 引入全局样式
import '@/assets/main.scss' const app = createApp(App)app.use(pinia)
app.use(router)
// 挂载
app.mount('#app')

然后在页面使用即可

仓库统一导出

现在：使用一个仓库 import { useUserStore } from ./stores/user.js 不同仓库路径不一致
优化：由 stores/index.js 统一导出，导入路径统一 ./stores，而且仓库维护在 stores/modules 中
目录

请添加图片描述

十、数据交互 - 请求工具设计

请添加图片描述

1. 创建 axios 实例

们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

安装 axios

pnpm add axios

新建 utils/request.js 封装 axios 模块

利用 axios.create 创建一个自定义的 axios 来使用

http://www.axios-js.com/zh-cn/docs/#axios-create-config

import axios from 'axios'const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址，超时时间
})instance.interceptors.request.use((config) => {// TODO 2. 携带tokenreturn config},(err) => Promise.reject(err)
)instance.interceptors.response.use((res) => {// TODO 3. 处理业务失败// TODO 4. 摘取核心响应数据return res},(err) => {// TODO 5. 处理401错误return Promise.reject(err)}
)export default instance

2. 完成 axios 基本配置

import { useUserStore } from '@/stores/user'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({baseURL,timeout: 100000
})instance.interceptors.request.use((config) => {const userStore = useUserStore()if (userStore.token) {config.headers.Authorization = userStore.token}return config},(err) => Promise.reject(err)
)instance.interceptors.response.use((res) => {if (res.data.code === 0) {return res}ElMessage({ message: res.data.message || '服务异常', type: 'error' })return Promise.reject(res.data)},(err) => {ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })console.log(err)if (err.response?.status === 401) {router.push('/login')}return Promise.reject(err)}
)export default instance
export { baseURL }

3、首页整体路由设计

实现目标:

完成整体路由规划【搞清楚要做几个页面，它们分别在哪个路由下面，怎么跳转的…】
通过观察, 点击左侧导航, 右侧区域在切换, 那右侧区域内容一直在变, 那这个地方就是一个路由的出口
我们需要搭建嵌套路由

目标：

把项目中所有用到的组件及路由表, 约定下来

约定路由规则

path	文件	功能	组件名	路由级别
/login	views/login/LoginPage.vue	登录&注册	LoginPage	一级路由
/	views/layout/LayoutContainer.vue	布局架子	LayoutContainer	一级路由
├─ /article/manage	views/article/ArticleManage.vue	文章管理	ArticleManage	二级路由
├─ /article/channel	views/article/ArticleChannel.vue	频道管理	ArticleChannel	二级路由
├─ /user/profile	views/user/UserProfile.vue	个人详情	UserProfile	二级路由
├─ /user/avatar	views/user/UserAvatar.vue	更换头像	UserAvatar	二级路由
├─ /user/password	views/user/UserPassword.vue	重置密码	UserPassword	二级路由