学习进度条
今日所花时间：一小时
今日代码量：100行
博客量：2篇
了解到的知识点： 列表查询 Pinia状态管理库 Pinia持久化插件-persist 如何处理未登录统一处理
列表查询：
根据后端接口书写以及返回值
在api文件夹下创建article.js文件书写以下代码
import request from '@/utils/request.js'
//文章分类列表查询
export const articleCategoryListService = () => {
return request.get('/category')
}
在ArticleCategory.vue中书写代码，进行调用（绑定数据模型categorys）
<script setup>
import {
Edit,
Delete
} from '@element-plus/icons-vue'
import { ref } from 'vue'
const categorys = ref([
{
"id": 3,
"categoryName": "美食",
"categoryAlias": "my",
"createTime": "2023-09-02 12:06:59",
"updateTime": "2023-09-02 12:06:59"
},
{
"id": 4,
"categoryName": "娱乐",
"categoryAlias": "yl",
"createTime": "2023-09-02 12:08:16",
"updateTime": "2023-09-02 12:08:16"
},
{
"id": 5,
"categoryName": "军事",
"categoryAlias": "js",
"createTime": "2023-09-02 12:08:33",
"updateTime": "2023-09-02 12:08:33"
}
])
//声明一个异步的函数
import {articleCategoryListService} from '@/api/article.js'
const articleCategoryList = async () => {
let result = await articleCategoryListService();
categorys.value = result.data;
}
//调用函数
articleCategoryList();
//调用后台接口，获取文章分类列表
// let result = await articleCategoryService()
// if (result.code === 1) {
// categorys.value = result.data
// } else {
// ElMessage.error(result.msg ? result.msg : '获取文章分类列表失败')
// }
</script>
<template>
<el-card class="page-container">
<template #header>
<div class="header">
<span>文章分类</span>
<div class="extra">
<el-button type="primary">添加分类</el-button>
</div>
</div>
</template>
<el-table :data="categorys" style="width: 100%">
<el-table-column label="序号" width="100" type="index"> </el-table-column>
<el-table-column label="分类名称" prop="categoryName"></el-table-column>
<el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
<el-table-column label="操作" width="100">
<template #default="{ row }">
<el-button :icon="Edit" circle plain type="primary" ></el-button>
<el-button :icon="Delete" circle plain type="danger"></el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="没有数据" />
</template>
</el-table>
</el-card>
</template>
<style lang="scss" scoped>
.page-container {
min-height: 100%;
box-sizing: border-box;
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
}
</style>
以上代码的主要部分是以下内容
//声明一个异步的函数
import {articleCategoryListService} from '@/api/article.js'
const articleCategoryList = async () => {
let result = await articleCategoryListService();
categorys.value = result.data;
}
//调用函数
articleCategoryList();
但是以上代码不能够正常使用（检查页面显示401错误）（页面显示服务异常（调用接口的时候没有携带token）），还需要使用到Pinia状态管理库
Pinia状态管理库
是Vue专属的状态管理库，它允许你跨组件或页面共享状态
使用步骤：
安装pinia npm install pinia
在vue应用实例中使用pinia
在src/stores/token.js中定义store
在组件中使用store
具体操作：
在终端输入npm install pinia进行安装
在main.js中添加以下代码：
import { createPinia } from 'pinia'
const pinia = createPinia();
app.use(pinia);
在src目录下创建stores文件夹创建token.js
书写以下代码：
//定义store
import { defineStore } from 'pinia'
import {ref} from 'vue'
/*
第一个参数：名字，唯一性
第二个参数：函数，（函数的内部可以定义状态的所有内容）返回一个对象（返回值就是函数），里面是状态和方法
这里的状态和方法是可以直接在组件中使用的
*/
export const useTokenStore = defineStore('token',()=> {
//定义状态的内容
//1.响应式变量
const token = ref(''); //token的状态
// 2.定义一个函数，修改token的值
const setToken = (newToken) => {
token.value = newToken;
}
// 3.定义一个函数，移除token的值
const removeToken = () => {
token.value = '';
}
return {
token,
setToken,
removeToken
}
});
在Login.vue中添加以下代码
import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore();
登录函数中添加的代码
//把得到的token存储到pinia中
tokenStore.setToken(result.data)
在article.js中添加
import { useTokenStore } from '@/stores/token.js'
//文章分类列表查询
export const articleCategoryListService = () => {
const tokenStore = useTokenStore();
//在pinia中定义的响应式数据，都不需要.value
return request.get('/category',{headers:{'Authorization':tokenStore.token}})
}
完整的ArticleCategory.vue代码
<script setup>
import {
Edit,
Delete
} from '@element-plus/icons-vue'
import { ref } from 'vue'
const categorys = ref([
])
//声明一个异步的函数
import {articleCategoryListService} from '@/api/article.js'
const articleCategoryList = async () => {
let result = await articleCategoryListService();
categorys.value = result.data;
}
//调用函数
articleCategoryList();
//调用后台接口，获取文章分类列表
// let result = await articleCategoryService()
// if (result.code === 1) {
// categorys.value = result.data
// } else {
// ElMessage.error(result.msg ? result.msg : '获取文章分类列表失败')
// }
</script>
<template>
<el-card class="page-container">
<template #header>
<div class="header">
<span>文章分类</span>
<div class="extra">
<el-button type="primary">添加分类</el-button>
</div>
</div>
</template>
<el-table :data="categorys" style="width: 100%">
<el-table-column label="序号" width="100" type="index"> </el-table-column>
<el-table-column label="分类名称" prop="categoryName"></el-table-column>
<el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
<el-table-column label="操作" width="100">
<template #default="{ row }">
<el-button :icon="Edit" circle plain type="primary" ></el-button>
<el-button :icon="Delete" circle plain type="danger"></el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="没有数据" />
</template>
</el-table>
</el-card>
</template>
<style lang="scss" scoped>
.page-container {
min-height: 100%;
box-sizing: border-box;
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
}
</style>
优化
Axios请求拦截器
在request.js中添加请求拦截器
//导入pinia的token状态
import { useTokenStore } from '@/stores/token';
//添加请求拦截器
instance.interceptors.request.use(
(config)=>{
//请求前的回调
//添加token
const tokenStore = useTokenStore();
//判断是否有token
if(tokenStore.token){
config.headers.Authorization = tokenStore.token;
}
return config;
},
(err)=>{
//请求错误的回调
promise.reject(err);//返回一个失败的promise对象
}
)
修改article.js中的代码为
import request from '@/utils/request.js'
import { useTokenStore } from '@/stores/token.js'
//文章分类列表查询
export const articleCategoryListService = () => {
// const tokenStore = useTokenStore();
//在pinia中定义的响应式数据，都不需要.value
// return request.get('/category',{headers:{'Authorization':tokenStore.token}})
return request.get('/category')
}
浙公网安备 33010602011771号