接著上一次Spring Boot + Vue3 前后端分離 實戰(zhàn) wiki 知識庫系統(tǒng)＜七＞--分類管理功能開發(fā)的分類功能繼續(xù)完善。

分類編輯功能優(yōu)化：

概述：

現(xiàn)在分類編輯時的界面長這樣：

很明顯目前的父分類的展現(xiàn)形式不太人性，這里需要指定父分類的id才可以，對于用戶來說這種交互是反人道的，用戶怎么知道父分類在數(shù)據(jù)庫中的id值呢？所以接下來咱們需要來優(yōu)化一下它，其優(yōu)化的效果如下：

也就是新增/修改分類時，支持選中某一分類作為父分類，或無父分類。

說實話，對于小白來說，要實現(xiàn)這么一個效果，還是挺讓人抓狂的，下面則來一點點攻克它。

實現(xiàn)：

1、先來挑選下拉框組件：

首先上Ant Design Vue上來挑選下拉框組件，如下：

咱們將它集成到自己的頁面中先來看一下效果：

運行：

2、修改下拉框數(shù)據(jù)

接下來咱們則來將下拉框展示所有的父分類，如下：

此時運行：

其中為了調(diào)試方便，將這個文本框先保留，能看出選擇之后的父分類ID：

此時咱們新建編輯看一下，是否好使：

一切正常。

3、禁止父分類可以選擇自己：

這里演示一個bug：

發(fā)現(xiàn)木有，新建的“測試”這個父分類，在編輯時，還是選擇它，再保存時就從列表中消失不見了，因為我們顯示一級分類的id都是0，而“測試”這個分類在編輯時由于將父分類也選擇成了自己了，那么很顯然它的父分類id就變成了“測試”的id，而不是一個0，當然就顯示不到這個列表上了。

所以需要規(guī)避這種情況，其思路也很簡單，就是在父分類選擇中，將自己這一項不讓用戶選既可，而讓選項置灰也很簡單：

加一個屬性既可，所以咱們需要做一個判斷：

此時再來看一下效果：

最后咱們將測試的這個文本框給去掉：

最終的效果：

電子書管理增加分類選擇：

概述：

對于電子書管理這個模塊來說，也有分類的選擇屬性：

所對應的數(shù)據(jù)庫字段：

那很明顯目前的電子書新增時對于分類的選擇是非常不人性的，需要讓用戶指定分類的id，所以接下來需要來優(yōu)化電子書編輯時分類的選擇。

實現(xiàn)：

1、上Ant Design Vue尋找分類選擇組件：

?而最終咱們要實現(xiàn)的效果如下：

?

接下來看一下它的實現(xiàn)代碼：

<template><a-cascader v-model:value="value" :options="options" placeholder="Please select" />
</template>

其中v-model:value中的值其實是選擇的多個分類：

也就是它里面是一個數(shù)組：

而:options則是分類的樹形菜單，這個在分類管理的樹形顯示中已經(jīng)知道怎么將其轉(zhuǎn)換成樹形結(jié)構(gòu)了。

2、查詢所有分類：

為了能讓分類可以讓用戶選擇，很明顯需要查詢出所有的分類，并將數(shù)據(jù)以樹形的結(jié)構(gòu)組裝起來，這塊可以直接用分類管理的：

3、顯示所有分類：

接下來咱們就可以在編輯分類時顯示級聯(lián)效果，原來我們是把分類一和分類二都顯示了，沒有一個樹形結(jié)構(gòu)：

現(xiàn)在很明顯需要將這倆合二為一了，變成這樣：

此時就需要用到a-cascader，修改如下：

那怎么修改呢？很明顯這個分類這一列的樣式應該需要定義一下，此時就需要用到<a-table>自定義渲染了，如下：

接下來則需要來定義categoryIds這個響應式變量了：

這個響應式的變量的含義有木有明白？它其實就是用來保存選擇二級分類的兩個分類id的，也就是這個級聯(lián)控件選擇之后，會將選擇的兩個分類的id存在categoryIds變量中，接下來在顯示的時候，則需要將這個變量給分解開了，如下：

接下來運行的效果如下：

4、選擇分類保存處理：

接下來處理一下編輯時分類保存的邏輯，現(xiàn)在點擊編輯其顯示效果是出來了：

但是只是一個假像，沒有處理保存的邏輯，下面來處理一下。

編輯分類回顯：

而categoryIds剛好是級聯(lián)控件所使用的：

保存分類數(shù)據(jù)：

接下來則來將選擇的分類保存到數(shù)據(jù)庫中，如下：

好，接下來運行看一下效果：

5、從數(shù)據(jù)庫中讀取選擇的分類：

接下來還差最后一步，就是列表分類的顯示處理了，目前我們的分類顯示的是id：

而處理它，其實就是根據(jù)id到分類列表中找到對應的分類名，如下：

此時運行一下，你會發(fā)現(xiàn)結(jié)果有問題：

原因是因為獲取的這個方法有點問題，得改一下：

再運行就正常顯示了：

首頁顯示分類菜單：

效果：

接下來則需要來完善一下首頁的分類菜單了，也就是這塊的東東：

而最終的效果就是：

實現(xiàn)：

1、加載分類數(shù)據(jù)，變成樹形結(jié)構(gòu)：

這塊代碼跟之前分類管理加載所有分類是一樣的，如下：

2、顯示菜單：

接下來則循環(huán)樹型分類數(shù)據(jù)，將分類菜單給展現(xiàn)出來，如下：

對于這段代碼是不是有點陌生了，你能理解它么？

不用理解，這其實就是Ant Design Vue中這個分類組件的模板代碼，此時運行的效果：

發(fā)現(xiàn)咋展不開呢？

將它去掉：

點擊分類菜單顯示電子書：

接下來則需要來完成點擊分類，查把該分類下所有的電子書給查出來了。

點擊分類重新查詢電子書：

1、菜單增加點擊事件：

運行看一下：

其中可以發(fā)現(xiàn)，只有點擊二級分類時才會進行打印，也符合常理。

2、根據(jù)二級分類來查詢電子書：

在點擊時我們先獲取二級分類的id【由于我們點擊只有響應二級分類，所以這里查詢的話也只查二級分類了】，如下：

這里在點擊之后需要發(fā)起一下查詢動作，所以我們可以將這一段代碼封裝一下：

電子書后端接口增加分類參數(shù)：

1、EbookController：

接下來則需要回到后端進行電子書查詢接口的修改了，先來找到列表查詢接口：

其中查詢參數(shù)中目前只有：

咱們則需要再加一個二級分類的id了：

2、EbookService：

接下來則來到Service中增加對于這個參數(shù)的查詢處理：

這樣對于電子書二級分類的查詢接口就寫好了。

運行：

首頁顯示歡迎頁面：

概述：

最后，咱們對于首頁做一個小調(diào)整，就是進來時先顯示歡迎頁，也就是長這樣：

實現(xiàn)：

1、定義歡迎的內(nèi)容區(qū)域：

對于右側(cè)的內(nèi)容我們是定義了一個列表標簽：

這里我們再來定義一個歡迎區(qū)域：

2、左側(cè)菜單增加一個歡迎項：

接下來左側(cè)菜單新增一個歡迎項，用來回到首頁，如下：

其中要注意，這里的key我們定義死了，以便之后在進行點擊事件的處理里使用。

3、點擊分類時，則需要隱藏歡迎頁：

先來定義一個響應式的變量用來控制這個歡迎的顯示與隱藏：

然后在點擊分類時對該變量進行一下控制：

此時咱們還需要在控件上使用該響應式的變量，如下：

4、運行：

運行看一下效果：

總結(jié)：

其實也沒啥可總結(jié)的，寫這篇斷斷續(xù)續(xù)地耗時大約2個多月，也是因為工作上的煩心事比較多，思想變懶惰了，但是無論如何，不要忘了堅持就可以了，人的心情也是會隨著四季的變化而變化，心情不好思想懶惰懶惰也是很有必要的，人生漫漫，學會享受各種變化，心靈雞湯就不多說了，下篇繼續(xù)~~

??關(guān)注個人公眾號，獲得實時推送