Vue3項目練習詳細步驟(第三部分：文章分類頁面模塊)

文章分類列表

主體結構?

接口文檔

文章分類列表查詢接口數據綁定

?Pinia狀態管理庫

axios請求攔截器?

Pinia持久化插件-persist?

未登錄統一處理

添加文章分類?

主體結構?

?接口文檔

?綁定請求數據

編輯文章分類

彈框結構?

?數據回顯

?接口文檔

綁定請求數據

刪除分類?

接口文檔

?綁定請求數據

文章分類列表

主體結構?

?在ArticleCategory.vue文件中完成文章分類列表組件

<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"}
])
</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>

保存查看

接口文檔

詳細接口文檔鏈接：https://blog.csdn.net/dafsq/article/details/138500082?spm=1001.2014.3001.5502?

文章分類列表查詢接口數據綁定

在api目錄下新建article.js文件

完成分類列表查詢請求方法?

//導入請求工具文件
import request from '@/utils/request.js'//文章分類列表查詢
export const ArticleCategoryListService = () => {return request.get('/category')
}

?在文章分類ArticleCategory.vue文件中聲明文章分類列表查詢異步函數

//聲明文章分類列表查詢異步函數
import {articleCategoryListService} from '@/api/article.js'
const articleCategoryList = async() => {let result = await articleCategoryListService();if(result.code == 0){//成功獲取categorys.value = result.data;}else{//獲取失敗ElMessage.error('獲取失敗')}
}
//調用
articleCategoryList();

?Pinia狀態管理庫

?Pinia是Vue的專屬狀態管理庫，它允許你跨組件或頁面共享狀態

在項目目錄下安裝pinia

npm install pinia

在main.js文件中應用實例中使用pinia

創建src/stores/token.js文件在其中定義store

在登錄頁面Login.vue文件中定義tokenStore并把登錄時的token存入pinia

axios請求攔截器?

????????當進入主頁后，將來要與后臺交互，都需要攜帶token，如果每次請求都寫這樣的代碼，將會比較繁瑣，此時可以將攜帶token的代碼通過請求攔截器統一處理

在請求工具request.js文件中使用axios請求攔截器將token以請求頭的方式攜帶請求

//導入token狀態
import { useTokenStore } from '@/stores/token.js';
//添加請求攔截器
instance.interceptors.request.use((config)=>{//在發送請求之前做什么let tokenStore = useTokenStore()//如果token中有值，在攜帶if(tokenStore.token){config.headers.Authorization=tokenStore.token}return config},(err)=>{//如果請求錯誤做什么Promise.reject(err)}
)

?保存可以查看到賬號中已有的文章分類信息

Pinia持久化插件-persist?

Pinia默認是內存存儲，當刷新瀏覽器的時候會丟失數據。
Persist插件可以將pinia中的數據持久化的存儲?

在項目目錄下安裝persist

npm install pinia-persistedstate-plugin

在main.js文件在pinia中使用persist

在token.js文件中定義狀態Store時指定持久化配置參數,在defineStore函數中添加第三個參數

這樣登錄刷新后token持久保存就不會報錯了?

未登錄統一處理

????????在后續訪問接口時，如果沒有登錄，則前端不攜帶token，后臺服務器會返回響應狀態碼401，代表未登錄，此時可以在axios的響應攔截器中，統一對未登錄的情況做處理

//導入Element-Plus提示框組件
import { ElMessage } from 'element-plus'//導入路由
import router from '@/router/router.js'
//添加響應攔截器
instance.interceptors.response.use(result=>{return result.data;},err=>{//如果響應狀態碼時401，代表未登錄，給出對應的提示，并跳轉到登錄頁if(err.response.status===401){ElMessage.error('請先登錄！')router.push('/login')}else{ElMessage.error('服務異常');}return Promise.reject(err);//異步的狀態轉化成失敗的狀態}
)

添加文章分類?

主體結構?

在ArticleCategory.vue文件中添加分類彈窗組件

                <!-- 添加分類彈窗 --><el-dialog v-model="dialogVisible" title="添加彈層" width="30%"><el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 30px"><el-form-item label="分類名稱" prop="categoryName"><el-input v-model="categoryModel.categoryName" minlength="1" maxlength="10"></el-input></el-form-item><el-form-item label="分類別名" prop="categoryAlias"><el-input v-model="categoryModel.categoryAlias" minlength="1" maxlength="15"></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary"> 確認 </el-button></span></template></el-dialog>

?添加表單校驗和數據模型

//控制添加分類彈窗
const dialogVisible = ref(false)//添加分類數據模型
const categoryModel = ref({categoryName: '',categoryAlias: ''
})
//添加分類表單校驗
const rules = {categoryName: [{ required: true, message: '請輸入分類名稱', trigger: 'blur' },],categoryAlias: [{ required: true, message: '請輸入分類別名', trigger: 'blur' },]
}

在添加分類按鈕處綁定顯示彈窗的單擊事件

<el-button type="primary" @click="dialogVisible = true">添加分類</el-button>

點擊添加文章按鈕時彈窗正常顯示

?綁定數據模型

綁定校驗規則

已綁定成功

?綁定取消按鈕事件，使彈框不顯示

?接口文檔

?綁定請求數據

在article.js文件中添加請求函數

//文章分類添加
export const articleCategoryAddService = (categoryModel) => {return request.post('/category',categoryModel)
}

在文章分類頁面ArticleCategory.vue文件中添加單擊事件請求函數

//導入Element-Plus提示框組件
import { ElMessage } from 'element-plus'
//導入articleCategoryAddService函數
import {articleCategoryAddService} from '@/api/article.js'
const addCategory = async () => {let result = await articleCategoryAddService(categoryModel.value);if(result.code == 0){//成功添加ElMessage(result.message? result.message:'添加成功')//隱藏彈窗dialogVisible.value = false//再次訪問后臺接口，查詢所有分類articleCategoryList();}else{//添加失敗ElMessage.error('添加失敗')}
}

在確認按鈕中綁定該事件函數?

<el-button type="primary" @click="addCategory"> 確認 </el-button>

編輯文章分類

彈框結構?

?在編輯按鈕處添加事件，點擊后顯示彈框

<el-button :icon="Edit" circle plain type="primary" @click="dialogVisible = true"></el-button>

定義變量控制彈窗標題?

//定義變量控制彈窗標題
const title=ref('')

在彈窗標題中綁定變量

<el-dialog v-model="dialogVisible" :title="title" width="30%">

?在添加分類按鈕中賦值給標題變量

<el-button type="primary" @click="dialogVisible = true;title='添加分類'">添加分類</el-button>

在編輯按鈕中賦值標題變量

<el-button :icon="Edit" circle plain type="primary" @click="dialogVisible = true;title='編輯分類'"></el-button>

?保存之后點擊不同的按鈕將會顯示對應的彈框標題

?數據回顯

?定義數據回顯函數

//修改分類回顯
const updateCategoryEcho = (row) => {title.value = '修改分類'dialogVisible.value = true//將row中的數據賦值給categoryModelcategoryModel.value.categoryName=row.categoryNamecategoryModel.value.categoryAlias=row.categoryAlias//修改的時候必須傳遞分類的id，所以擴展一個id屬性categoryModel.value.id=row.id
}

?通過插槽的方式得到被點擊按鈕所在行的數據

    <template #default="{ row }"><el-button :icon="Edit" circle plain type="primary" @click="updateCategoryEcho(row)"></el-button><el-button :icon="Delete" circle plain type="danger"></el-button></template>

保存后點擊編輯文本框回顯效果

?接口文檔

綁定請求數據

在article.js文件中添加請求函數

?在文章分類頁面ArticleCategory.vue文件中添加修改文章分類單擊事件請求函數

//導入articleCategoryUpdateService函數
import {articleCategoryUpdateService} from '@/api/article.js'
//修改分類
const updateCategory=async ()=>{let result = await articleCategoryUpdateService(categoryModel.value)if(result.code == 0){ElMessage.success(result.message? result.message:'修改成功')//隱藏彈窗dialogVisible.value=false//再次訪問后臺接口，查詢所有分類articleCategoryList();}else{//添加失敗ElMessage.error('修改失敗')}
}

由于現在修改和新增共用了一個數據模型，所以在點擊添加分類后，有時候會顯示數據，此時可以將categoryModel中的數據清空 ?

//清空模型數據
const clearData = ()=>{categoryModel.value.categoryName='',categoryModel.value.categoryAlias=''
}

?修改確定按鈕的綁定事件

<el-button type="primary" @click="title==='添加分類'? addCategory():updateCategory()"> 確認 </el-button>

?修改添加按鈕的點擊事件

<el-button type="primary" @click="dialogVisible = true;title='添加分類';clearData()">添加分類</el-button>

?保存之后就能完成添加和修改的功能了

刪除分類?

接口文檔

?綁定請求數據

?在article.js文件中添加請求函數

//刪除分類
export const articleCategoryDeleteService = (id) => {return request.delete('/category?id='+id)
}

??在文章分類頁面ArticleCategory.vue文件中編寫刪除文章分類單擊事件請求函數并在函數內部添加提示框組件

//導入element的ElMessageBox提示框組件
import { ElMessageBox } from 'element-plus'
//導入articleCategoryDeleteService函數
import {articleCategoryDeleteService} from '@/api/article.js'
//刪除分類
const deleteCategory = (row) => {ElMessageBox.confirm('確認是否刪除該分類信息？','提示',{confirmButtonText: '確認',cancelButtonText: '取消',type: 'warning',}).then(async () => {//用戶點擊了確認let result = await articleCategoryDeleteService(row.id)ElMessage.success(result.message?result.message:'刪除成功')//再次調用getAllCategory，獲取所有文章分類articleCategoryList();}).catch(() => {//用戶點擊了取消ElMessage({type: 'info',message: '取消刪除',})})
}

?在刪除圖標按鈕處綁定該點擊事件函數

<el-button :icon="Delete" circle plain type="danger" @click="deleteCategory(row)"></el-button>

?保存后即可正常刪除文章分類