背景数据管理体系 - 项目架构设计-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:
}),
Components({
resolvers:
})
]
})
[*]直接利用
<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>
https://i-blog.csdnimg.cn/direct/1d0fbc71328f45f29c7843384d2accb5.png**彩蛋：**默认 components 下的文件也会被自动注册~
八、Pinia - 构建用户堆栈 和 长期化
https://i-blog.csdnimg.cn/direct/a83aaf45063045a6b3ec2d38d2cfe18d.png
官方文档：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('') // 定义 token
const setToken = (t) => (token.value = t) // 设置 token
return { 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>
[*]结果
https://i-blog.csdnimg.cn/direct/f8c2db3e6b734855ac6b195327349763.gif
九、 Pinia - 配置堆栈统一管理
pinia 独立维护
- 现在：初始化代码在 main.js 中，堆栈代码在 stores 中，代码分散职能不但一
- 优化：由 stores 统一维护，在stores/index.js中完成pinia初始化，交付main.js利用
[*]user.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
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
/*
实现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 中
[*] 目录
https://i-blog.csdnimg.cn/direct/d7a53c891f7d4fd884de1e0a899984fb.gif
十、数据交互 - 请求工具设计
https://i-blog.csdnimg.cn/direct/8afee5a343eb4170a0e0d219a3364341.png
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. 携带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 基本配置
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文件功能组件名路由级别/loginviews/login/LoginPage.vue登录&注册LoginPage一级路由/views/layout/LayoutContainer.vue布局架子LayoutContainer一级路由├─ /article/manageviews/article/ArticleManage.vue文章管理ArticleManage二级路由├─ /article/channelviews/article/ArticleChannel.vue频道管理ArticleChannel二级路由├─ /user/profileviews/user/UserProfile.vue个人详情UserProfile二级路由├─ /user/avatarviews/user/UserAvatar.vue更换头像UserAvatar二级路由├─ /user/passwordviews/user/UserPassword.vue重置暗码UserPassword二级路由 明白了路由规则，可以全部配完，也可以边写边配。
https://i-blog.csdnimg.cn/direct/39ee325846e043debc9151b57f8a4b0e.png
下期会笔记是黑马课程的登录注册页面讲授哟！期待吧
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]