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

七、引入 element-ui 组件库

官方文档: https://element-plus.org/zh-CN/

  • 安装
jsx 复制代码
$ pnpm add element-plus

自动按需:

  1. 安装插件
jsx 复制代码
pnpm add -D unplugin-vue-components unplugin-auto-import
  1. 然后把下列代码插入到你的 ViteWebpack 的配置文件中
jsx 复制代码
...
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()]
    })
  ]
})
  1. 直接使用
jsx 复制代码
<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/

  1. 安装插件 pinia-plugin-persistedstate
jsx 复制代码
pnpm add pinia-plugin-persistedstate -D
  1. 使用 main.js
jsx 复制代码
import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))
  1. 配置 stores/user.js
jsx 复制代码
import { defineStore } from 'pinia'
import { ref } from 'vue'

// 用户模块
export const useUserStore = defineStore(
  'big-user',
  () => {
    const token = ref('') // 定义 token
    const setToken = (t) => (token.value = t) // 设置 token

    return { token, setToken }
  },
  {
    persist: true // 持久化
  }
)
  • A.vue
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
js 复制代码
import { defineStore } from "pinia";
import {ref} from 'vue'
// 用户模块 :token setToken removeToken

export const useUserStore = defineStore('big-user',()=>{
  const token =ref('')
  // 传递新的token
  const 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
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('')
  // 传递新的token
  const add = (n) =>{
    count.value += n
  }
  
// 暴露出去
return {
  count,
  add,
}

} )
  • index.js
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
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 进行基本的二次封装, 单独封装到一个模块中, 便于使用

  1. 安装 axios

    pnpm add axios

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

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

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

js 复制代码
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. 携带token
    return 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 基本配置

jsx 复制代码
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 二级路由

明确了路由规则,可以全部配完,也可以边写边配。

下期会笔记是黑马课程的登录注册页面讲解哟!期待吧

相关推荐
宅小海18 分钟前
scala String
大数据·开发语言·scala
qq_3273427321 分钟前
Java实现离线身份证号码OCR识别
java·开发语言
锅包肉的九珍22 分钟前
Scala的Array数组
开发语言·后端·scala
心仪悦悦25 分钟前
Scala的Array(2)
开发语言·后端·scala
yqcoder1 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
baivfhpwxf20231 小时前
C# 5000 转16进制 字节(激光器串口通讯生成指定格式命令)
开发语言·c#
许嵩661 小时前
IC脚本之perl
开发语言·perl
长亭外的少年1 小时前
Kotlin 编译失败问题及解决方案:从守护进程到 Gradle 配置
android·开发语言·kotlin
直裾1 小时前
Scala全文单词统计
开发语言·c#·scala
心仪悦悦1 小时前
Scala中的集合复习(1)
开发语言·后端·scala