文章將自動(dòng)保存至草稿箱

今天我們來(lái)借助若依來(lái)快速的搭建一個(gè)springboot vue3的前后端分離的的Java管理后臺(tái)，后臺(tái)網(wǎng)頁(yè)使用vue3和 Element Plus來(lái)快速搭建。

這里我們可以借助若依自動(dòng)生成Java和vue3代碼，這就是若依的強(qiáng)大之處，即便你不會(huì)Java和vue開發(fā)，只要跟著石頭哥也可以快速的開發(fā)一款Java和vue程序。

一，技術(shù)點(diǎn)和準(zhǔn)備工作

后端技術(shù)點(diǎn)

• Java17
• 數(shù)據(jù)庫(kù)：mysql8
• mybatis：作為持久層框架，實(shí)現(xiàn)了數(shù)據(jù)庫(kù)的CRUD操作，簡(jiǎn)化了與數(shù)據(jù)庫(kù)的交互
• redis5：作為緩存中間件，提高了系統(tǒng)性能和響應(yīng)速度
• Spring Boot ：作為核心框架，提供了一系列開箱即用的功能，如數(shù)據(jù)訪問(wèn)、消息傳遞、任務(wù)調(diào)度等
• Spring Security：提供了強(qiáng)大的安全認(rèn)證和授權(quán)功能
• Jwt，權(quán)限認(rèn)證使用Jwt，支持多終端認(rèn)證系統(tǒng)

前端技術(shù)點(diǎn)

• vue3
• Element Plus
• vite

軟件和開發(fā)環(huán)境

官方只是給我們提供一個(gè)推薦，建議大家盡量和右邊的課程版本保持一致。

官方推薦	課程版本
JDK>=1.8	JDK17
Mysql>=5.7	Mysql8
Redis>=3	Redis5
Maven>=3	Maven3
node>=12	Node20.15

建議大家盡量和課程版本保持一致，避免一些版本不對(duì)應(yīng)導(dǎo)致一些不必要的錯(cuò)誤。

我們Java后端使用idea開發(fā) vue3前端網(wǎng)站使用vscode軟件開發(fā)。 大家自行下載這兩款軟件即可。

這里安裝redis和node的時(shí)候有些注意事項(xiàng)給大家簡(jiǎn)單說(shuō)說(shuō)。

安裝軟件注意事項(xiàng)

我們安裝redis和node的時(shí)候都需要配置環(huán)境變量，其實(shí)我們?cè)诎惭b的過(guò)程中，就可以直接勾選上，這樣就可以免去自己再單獨(dú)配置環(huán)境變量的麻煩了。 所以不管安裝redis和node時(shí)，只要看到PATH的地方，一定要記得都勾選上。

redis記得勾選PATH

安裝node也記得點(diǎn)中PATH

如果沒有配置好環(huán)境變量，也可以自己去網(wǎng)上搜索redis5和node20安裝教程，跟著安裝即可。

如果你找不到安裝包，我也給大家提供了安裝包，去評(píng)論區(qū)看置頂評(píng)論就可以拿到

二，啟動(dòng)若依的Springboot項(xiàng)目和vue3項(xiàng)目

2-1-1，去官方下載前后端項(xiàng)目

我們使用idea開發(fā)者工具來(lái)去若依官網(wǎng)下載官方提供的springboot項(xiàng)目

我們使用前后端分離的版本。

如上圖所示，我們拿到下載地址即可。 然后打開idea，如下圖所示，使用get fromVCS

然后把復(fù)制的下載地址粘貼到如下圖所示的地方，記得指定源碼路徑，安裝下git。

然后等待源碼下載

下載成功后會(huì)自動(dòng)打開項(xiàng)目。

正常第一次打開項(xiàng)目需要導(dǎo)入一些安裝包和依賴。

2-1-2，mysql數(shù)據(jù)庫(kù)的配置和導(dǎo)入

在項(xiàng)目的sql目錄下，有我們數(shù)據(jù)庫(kù)配置需要的一些東西。

所以我們先用idea自帶的mysql管理工具，鏈接我們的mysql數(shù)據(jù)庫(kù)，然后創(chuàng)建一個(gè)ruoyi的數(shù)據(jù)庫(kù)。至于mysql的安裝和使用idea鏈接mysql我這里不拆開講了，可以去看下我Java基礎(chǔ)入門的視頻和博客筆記。我會(huì)在視頻里給大家演示的。

創(chuàng)建好ry-vue數(shù)據(jù)庫(kù),這里數(shù)據(jù)庫(kù)名最好也是用ry-vue,因?yàn)楹罄m(xù)運(yùn)行項(xiàng)目時(shí)官方代碼里就是取得這個(gè)數(shù)據(jù)庫(kù)名。創(chuàng)建好數(shù)據(jù)庫(kù)以后，就可以執(zhí)行sql下的文件了。我們先執(zhí)行quartz.sql文件

我們?cè)诋?dāng)前頁(yè)執(zhí)行sql的時(shí)候，記得ctrl a全選當(dāng)前的sql，然后點(diǎn)擊綠色箭頭執(zhí)行sql

執(zhí)行完以后如下

然后同樣的方式執(zhí)行另外一個(gè)sql文件

兩個(gè)sql都執(zhí)行完以后，點(diǎn)擊刷新就可以看到我們成功的導(dǎo)入了以下數(shù)據(jù)表

創(chuàng)建好數(shù)據(jù)庫(kù)和數(shù)據(jù)表以后，我們需要在下圖所示的地方修改myslq數(shù)據(jù)庫(kù)的賬號(hào)和密碼，記得改成我們自己的。

2-1-3，配置redis

其實(shí)配置reids很簡(jiǎn)單，只要你電腦上已經(jīng)成功安裝并啟動(dòng)redis，一切都保持默認(rèn)即可。由于我的電腦本地redis沒有設(shè)置密碼，所以不用配置reids即可，當(dāng)然如果你設(shè)置了redis訪問(wèn)密碼，記得去下圖所示的地方將修改密碼。如果和石頭哥一樣沒有設(shè)置reids密碼，password后面空著即可。

2-1-4，啟動(dòng)項(xiàng)目

如下圖所示我們找到RuoYiApplication然后就可以點(diǎn)擊綠色箭頭運(yùn)行項(xiàng)目了。

啟動(dòng)成功我們可以看到如下標(biāo)識(shí)

啟動(dòng)成功后通過(guò)http://localhost:8080 看到如下所示，就代表若依版的springboot項(xiàng)目已經(jīng)成功運(yùn)行了。

Java后端啟動(dòng)成功了，接下來(lái)我們就要啟動(dòng)前端vue3項(xiàng)目進(jìn)行網(wǎng)站端的部署運(yùn)行了。

2-2-1，下載vue3項(xiàng)目源碼

由于上門Java項(xiàng)目里的ruoyi-ui使用的是vue2開發(fā)的前端網(wǎng)站，所以我們想用vue3，就得使用官方提供的另外一套代碼，所以這里的ruoyi-ui可以直接刪除了。

其實(shí)在官方的文檔里提供的vue3版本的下載地址

我們點(diǎn)進(jìn)去可以看到是gitbhub上的一個(gè)倉(cāng)庫(kù)

也可以像上面Java項(xiàng)目一樣借助idea的git下載，我們這里為了讓大家學(xué)習(xí)不同的方式。就用另外一種方式教大家下載項(xiàng)目源碼吧。

我們只需要下載zip壓縮包就可以了。下載到桌面即可，然后解壓。

解壓后的目錄如下

可以看出來(lái)這是一個(gè)標(biāo)準(zhǔn)的vue3項(xiàng)目。

2-2-2，運(yùn)行vue項(xiàng)目

我們這里用到的node，所以要確保你node安裝成功，并且配置好環(huán)境變量。 我們運(yùn)行項(xiàng)目使用專業(yè)的前端開發(fā)工具vscode 其實(shí)導(dǎo)入項(xiàng)目到vscode很簡(jiǎn)單，只需要在vscode里打開項(xiàng)目文件夾即可。

我們打開項(xiàng)目后要去安裝依賴，安裝依賴之前要記得安裝node，我們這里使用npm i 來(lái)自動(dòng)安裝依賴。

然后耐心等待依賴安裝完即可。安裝完如下。

依賴安裝完，就可以用npm run dev來(lái)運(yùn)行項(xiàng)目了。運(yùn)行成功后可以看到管理后端網(wǎng)站的訪問(wèn)地址。

然后就可以看到管理后臺(tái)的登錄界面

到這里我們整個(gè)前后端項(xiàng)目就運(yùn)行成功了。 使用默認(rèn)賬號(hào)先登錄進(jìn)去看看效果

三，自定義主題樣式和文案

我們有時(shí)候用別人的框架，肯定想自定義一些樣式，顏色，圖案。接下來(lái)石頭哥就帶大家自定義下。

項(xiàng)目中要到的圖標(biāo)，圖片，背景圖我給大家放到評(píng)論區(qū)了

3-1，自定義主題和樣式

在后臺(tái)的右上角，有一個(gè)入口。

點(diǎn)擊布局設(shè)置，就可以設(shè)置主題和顏色了 如我們把深色側(cè)邊欄改為淺色側(cè)邊欄

改變后如下

改變顏色，如果我們想改變按鈕的顏色，就修改下主題顏色即可。

可以看出，我們按鈕就從藍(lán)色改為了橘黃色，當(dāng)然你也可以改為別的顏色。

其他幾個(gè)選項(xiàng)可以自己根據(jù)需求配置。當(dāng)然也可以恢復(fù)默認(rèn)

3-2，修改圖標(biāo)

可以看到我們后臺(tái)網(wǎng)站的圖標(biāo)是這樣的，當(dāng)然這里的圖標(biāo)也可以換成自己的。

去代碼里查看，可以看到我們這里的圖標(biāo)用的是public目錄里的圖標(biāo)

我們只需要自己找一個(gè)圖標(biāo)，名字改成favicon并且圖片的后綴也改為 .ico就行。如我這里用自己的頭像來(lái)替換這個(gè)默認(rèn)圖標(biāo)。

替換后記得刷新下網(wǎng)頁(yè)?？梢钥吹轿覀冎辉诰W(wǎng)站頂部替換了，但是左側(cè)邊欄的還沒有替換掉。

去查看源碼

可以看到我們左側(cè)邊欄用的是src下的logo.png,所以這里也要替換下。

如我們這里替換為自己的

再刷新下網(wǎng)頁(yè)，可以看到成功了

3-3，vscode里修改文案

可以看到我們項(xiàng)目里到處都是若依的字樣，那么我們就使用vscode自帶的全局替換，來(lái)替換下。最左邊有一個(gè)搜索框，點(diǎn)擊下。

可以搜索到整個(gè)項(xiàng)目里的若依字段

下面的替換里輸入自己替換的文字就行。然后記得點(diǎn)擊下這個(gè)圖標(biāo)。

然后刷新網(wǎng)頁(yè)，就可以看到我們文案全部替換成功了

3-4.idea里修改Java文案

我們前面一步只是修改了前端文案。還有Java后端文案需要修改下。 進(jìn)入idea然后按快捷鍵 ctrl shift R 就可以彈出下面的彈窗，然后搜索若依，替換為編程小石頭。再點(diǎn)擊下全部替換。

這樣整個(gè)Java項(xiàng)目里若依的文案也就全部替換了。

3-5，刪除數(shù)據(jù)里的文案

細(xì)心的同學(xué)可能發(fā)現(xiàn)，前端網(wǎng)頁(yè)左側(cè)邊欄里還有若依文案

因?yàn)閭?cè)邊欄我們是從數(shù)據(jù)庫(kù)里動(dòng)態(tài)加載的，所以要去數(shù)據(jù)庫(kù)里刪除對(duì)應(yīng)的數(shù)據(jù)。我們?nèi)dea里借助mysql管理工具，找到sys_menu數(shù)據(jù)表，然乎雙擊打開。

打開后如下

可以看到這里存的是我們左側(cè)邊欄的文案，把若依官網(wǎng)的這行刪除即可。 選中這行，然乎點(diǎn)擊減號(hào)

點(diǎn)完減號(hào)，記得點(diǎn)擊整個(gè)綠色向上的箭頭。同步下數(shù)據(jù)庫(kù)。

這樣就刪除成功了，然后刷新下后臺(tái)網(wǎng)頁(yè)。

可以看到?jīng)]有若依的文字了。

3-6，刪除若依的鏈接

在我們的后臺(tái)網(wǎng)頁(yè)右上角有這兩個(gè)圖標(biāo)。點(diǎn)擊后會(huì)跳轉(zhuǎn)到若依，我們這里也可以做下刪除。當(dāng)然整個(gè)刪除需要要vue3代碼里。

我們到vscode里找到對(duì)應(yīng)的源碼刪除即可。然后就可以看到左上角沒有了之前的兩個(gè)圖標(biāo)

到這里我們就把若依框架改的和我們自己寫的一模一樣了，看不出使用框架的痕跡了

3-7，修改登錄頁(yè)背景圖和文案

我們登錄頁(yè)的背景圖也可以替換的

看代碼可以找到我們背景圖是在src目錄下

我們把自己的圖片替換為和這個(gè)背景圖名字一樣就行了

替換完去網(wǎng)頁(yè)里刷新下?？梢钥吹骄吞鎿Q成功了。

修改底部文案。如ruoyi.vip我們可以改成biaochengxiaoshitou

然后刷新下網(wǎng)頁(yè)，就替換成功了。

四，單表生成Java和vue3代碼

自動(dòng)生成Java和vue代碼正式若依的強(qiáng)大之處，接下來(lái)我就來(lái)帶大家快速的實(shí)現(xiàn)一個(gè)對(duì)用戶信息進(jìn)行增刪改查的小案例。我們先講單表和主子表生成代碼，然后再講樹形表生成代碼。

4-1，創(chuàng)建用戶表

我們這里以一個(gè)用戶表為例，首先就是去若依后臺(tái)，創(chuàng)建一個(gè)數(shù)據(jù)表。這也是若依的強(qiáng)大之處，可以快速的創(chuàng)建數(shù)據(jù)表。 建表語(yǔ)句先給到大家。

create table qcl_user( id int(11) auto_increment comment '編號(hào)', name varchar(20) null comment '姓名', education varchar(20) null comment '學(xué)歷', age int null comment '年齡', primary key (id)) comment '用戶表';

我們借助若依提供的功能來(lái)實(shí)現(xiàn)數(shù)據(jù)表的創(chuàng)建，這里qcl_user是我們的表名，大家最好和石頭哥保持一致。點(diǎn)擊系統(tǒng)工具，然后點(diǎn)擊代碼生成，點(diǎn)擊新建，把上面的sql語(yǔ)句復(fù)制到這里即可。

注意事項(xiàng)：我們的sql語(yǔ)句里必須設(shè)置主鍵也就是主鍵一定要有。

創(chuàng)建好以后如下，可以看到數(shù)據(jù)庫(kù)里也多了qcl_user這個(gè)表

然后我們點(diǎn)擊編輯來(lái)生成對(duì)應(yīng)的增刪改查的代碼

4-2，生成Java和vue3代碼

我們進(jìn)入編輯后如下

這里全部保持默認(rèn)即可。然后點(diǎn)擊生成信息，生成信息這里我們需要做下修改

修改后如下，記得上級(jí)菜單不做選擇。這里一定要和石頭哥一樣用 qcluser 不能直接使用user因?yàn)閡esr在若依自帶的用戶管理里面已經(jīng)被使用過(guò)了。

然后點(diǎn)擊提交。這樣就可以生成對(duì)應(yīng)的Java和vue代碼了，可以點(diǎn)擊預(yù)覽查看代碼

當(dāng)然我們最重要的還是要下載代碼，然后把對(duì)應(yīng)的代碼粘貼到我們的項(xiàng)目里。

4-3，把自動(dòng)生成的代碼插入項(xiàng)目

我們前面點(diǎn)擊下載把下載好的代碼解壓好。解壓好以后隊(duì)醫(yī)的代碼如下。

4-3-1，執(zhí)行sql文件

我們先執(zhí)行slq語(yǔ)句，因?yàn)槲覀兊娜粢篮笈_(tái)菜單欄都是動(dòng)態(tài)注入的，所以這里要先執(zhí)行下sql。執(zhí)行sql用idea自帶的mysql管理工具即可。

然后執(zhí)行上面的sql文件

執(zhí)行成功，有如下打印

4-3-2，復(fù)制Java代碼到idea

然后就是復(fù)制Java代碼到idea，我們?cè)趍ain目錄里一層層的進(jìn)入，復(fù)制qcluser文件夾。

然后粘貼到ruoyi-admin項(xiàng)目的com.ruoyi目錄下即可。

然后就可以看到我們對(duì)應(yīng)的Java代碼就弄好了

4-3-3，復(fù)制mapper文件到idea

然后就回到main然后進(jìn)入resources目錄，復(fù)制mapper文件夾。

然后粘貼到ruoyi-admin的resources目錄里。

可以看到我們對(duì)應(yīng)的mybatis的配置文件就弄好了

4-3-4，粘貼vue3代碼到vscode

接下來(lái)我們就是進(jìn)入vue文件里粘貼vue3代碼了

這里有個(gè)api和views，我們要每個(gè)都進(jìn)入，然后粘貼里面對(duì)應(yīng)的代碼到vue3項(xiàng)目對(duì)應(yīng)的目錄里。 首先進(jìn)入api復(fù)制qcluser文件夾

然后粘貼到src下面的api目錄里

可以看到就是我們前端對(duì)應(yīng)的接口請(qǐng)求的代碼

然后就是進(jìn)入vue的views文件夾，復(fù)制qcluser

然后粘貼到vue3代碼里的src下的views里

可以看到就是我們對(duì)應(yīng)頁(yè)面的vue3代碼

4-4，重新運(yùn)行idea的Java項(xiàng)目

由于vue3項(xiàng)目是動(dòng)態(tài)的，所以vue3代碼粘貼到vscode里就可以實(shí)時(shí)更新，但是Java項(xiàng)目粘貼完代碼，要重新運(yùn)行下項(xiàng)目。

重新啟動(dòng)成功后如下

然后刷新我們的若依后臺(tái)

刷新后就可以看到我們的系統(tǒng)工具里多了一個(gè)用戶管理的菜單。

然后我們點(diǎn)擊新增就可以添加數(shù)據(jù)到數(shù)據(jù)庫(kù)了

可以看到我們新增數(shù)據(jù)成功

當(dāng)然也可以修改數(shù)據(jù)。比如點(diǎn)擊修改，我們做如下修改

可以看到數(shù)據(jù)修改成功

當(dāng)然也可以點(diǎn)擊刪除，刪除對(duì)應(yīng)的數(shù)據(jù)。

到這里我們自動(dòng)生成的代碼就可以運(yùn)行起來(lái)，并且對(duì)數(shù)據(jù)進(jìn)行增刪改查了。

4-5，修改菜單位置

細(xì)心的同學(xué)可能會(huì)說(shuō)了，用戶管理不應(yīng)該單獨(dú)做一個(gè)模塊嗎，放在系統(tǒng)工具里不太好吧。接下來(lái)就教大家怎么移動(dòng)菜單位置。

在系統(tǒng)管理里面有一個(gè)菜單管理，我們找到用戶管理，然后點(diǎn)擊修改。

我們可以把上級(jí)菜單改為主類目，然后給用戶管理設(shè)置一個(gè)圖標(biāo)

提交以后，記得重新刷新下當(dāng)前頁(yè)面

這樣就可以看到用戶管理出現(xiàn)在了一級(jí)菜單類目。然后點(diǎn)擊就可以對(duì)用戶進(jìn)行管理了。

五，主子表自動(dòng)生成商品多表的前后端代碼

我們前面章節(jié)給大家簡(jiǎn)單的展示了單表前后端代碼的快速生成，接下來(lái)我們來(lái)實(shí)現(xiàn)商品管理功能 包含：商品分類表，商品表。 我們知道一個(gè)分類下面可以對(duì)應(yīng)多個(gè)商品。所以我們這兩個(gè)表是主子表關(guān)系。分類表是主表，商品表是子表。

5-1，創(chuàng)建分類和商品表的sql語(yǔ)句

我們創(chuàng)建數(shù)據(jù)表可以直接使用idea自帶的mysql可視化管理工具，也可以直接用sql語(yǔ)句來(lái)創(chuàng)建。由于我們直接導(dǎo)入sql語(yǔ)句更方便，也可以統(tǒng)一標(biāo)準(zhǔn)，所以這里推薦大家使用sql語(yǔ)句來(lái)創(chuàng)建數(shù)據(jù)表。

對(duì)應(yīng)的sql語(yǔ)句貼出來(lái)給到大家，為了方便大家學(xué)習(xí)，我這里盡量使用簡(jiǎn)單的字段。

根據(jù)需求，我們需要?jiǎng)?chuàng)建兩個(gè)表：一個(gè)是good_type（商品分類表），另一個(gè)是good（商品表）。在good表中，我們將包含商品名、價(jià)格和圖片字段，并且設(shè)置一個(gè)外鍵與good_type表關(guān)聯(lián)，以體現(xiàn)一對(duì)多的關(guān)系。下面是相應(yīng)的SQL語(yǔ)句示例：

創(chuàng)建商品分類表good_type和商品表 good

sql-- 商品類型表CREATE TABLE `good_type` ( `type_id` INT AUTO_INCREMENT COMMENT '自增ID', `type_name` VARCHAR(255) NOT NULL COMMENT '類型名稱', PRIMARY KEY (`type_id`) -- 主鍵) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品類型';-- 商品表CREATE TABLE `good` ( `good_id` INT AUTO_INCREMENT COMMENT '自增ID', `good_name` VARCHAR(255) NOT NULL COMMENT '商品名稱', `price` DECIMAL(10, 2) NOT NULL COMMENT '價(jià)格', `image_url` VARCHAR(255) COMMENT '圖片鏈接', `type_id` INT COMMENT '類型ID', FOREIGN KEY (`type_id`) REFERENCES `good_type`(`type_id`) ON DELETE CASCADE ON UPDATE CASCADE, -- 級(jí)聯(lián)操作 PRIMARY KEY (`good_id`) -- 主鍵) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品信息';

在這段SQL中：

• good_type表有兩個(gè)字段：type_id作為主鍵，用于唯一標(biāo)識(shí)每個(gè)分類；type_name存儲(chǔ)分類的名稱。
• good表包括：good_id為主鍵，標(biāo)識(shí)每個(gè)商品；good_name存儲(chǔ)商品名稱；price存儲(chǔ)商品價(jià)格，這里使用DECIMAL類型以精確表示貨幣值；image_url存儲(chǔ)商品圖片的URL；type_id作為外鍵，關(guān)聯(lián)到good_type表的type_id，以確保數(shù)據(jù)完整性。同時(shí)，通過(guò)ON DELETE CASCADE ON UPDATE CASCADE規(guī)則，當(dāng)刪除或更新一個(gè)分類時(shí)，與其關(guān)聯(lián)的商品記錄也會(huì)相應(yīng)地被級(jí)聯(lián)處理。

大家不用記這些sql語(yǔ)句，這些sql語(yǔ)句都是使用ai來(lái)自動(dòng)生成的，后面也會(huì)教大家如何使用Ai來(lái)快速編程

5-2，導(dǎo)入sql語(yǔ)句

我們上門創(chuàng)建好sql語(yǔ)句以后，就可以去若依后臺(tái)進(jìn)行導(dǎo)入了。我們一個(gè)一個(gè)的導(dǎo)入。 當(dāng)然我們導(dǎo)入sql語(yǔ)句的方式有很多種，因?yàn)槲仪懊鎰?chuàng)建用戶表的時(shí)候給大家演示過(guò)若依后臺(tái)導(dǎo)入了。

這一節(jié)給大家演示idea自帶的mysql可視化管理工具來(lái)導(dǎo)入sql，技多不壓身嘛，讓大家多學(xué)點(diǎn)知識(shí)。

接下來(lái)教大家怎么打開mysql可視化工具。 1，點(diǎn)擊idea右側(cè)數(shù)據(jù)庫(kù)的圖標(biāo) 2，然后點(diǎn)擊自己的數(shù)據(jù) 3，點(diǎn)擊圖中3標(biāo)識(shí)的圖標(biāo)。

這個(gè)圖標(biāo)就是idea給我們提供的sql命令行

點(diǎn)開后，選這個(gè)默認(rèn)的console命令行即可。

然把下面的sql語(yǔ)句復(fù)制進(jìn)去。

sql-- 商品類型表CREATE TABLE `good_type` ( `type_id` INT AUTO_INCREMENT COMMENT '自增ID', `type_name` VARCHAR(255) NOT NULL COMMENT '類型名稱', PRIMARY KEY (`type_id`) -- 主鍵) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品類型';-- 商品表CREATE TABLE `good` ( `good_id` INT AUTO_INCREMENT COMMENT '自增ID', `good_name` VARCHAR(255) NOT NULL COMMENT '商品名稱', `price` DECIMAL(10, 2) NOT NULL COMMENT '價(jià)格', `image_url` VARCHAR(255) COMMENT '圖片鏈接', `type_id` INT COMMENT '類型ID', FOREIGN KEY (`type_id`) REFERENCES `good_type`(`type_id`) ON DELETE CASCADE ON UPDATE CASCADE, -- 級(jí)聯(lián)操作 PRIMARY KEY (`good_id`) -- 主鍵) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品信息';

我們把上面的sql復(fù)制到mysql可視化管理工具里，然后ctrl a全選，再點(diǎn)擊這個(gè)綠色箭頭。

可以看到sql語(yǔ)句執(zhí)行完畢

然后刷新 ![](https://img-blog.csdnimg.cn/direct/239d1c18eab04104baf77f32597e6a38.png

就可以看到我們添加的兩個(gè)表了

5-3，生成商品管理菜單

我們利用若依的菜單管理來(lái)創(chuàng)建一個(gè)商品管理的菜單

配置信息如下

點(diǎn)擊確定后記得刷新網(wǎng)頁(yè)，可以看到多了商品管理的一級(jí)菜單

5-4，利用若依生成前后端代碼

若依的強(qiáng)大之處就在于根據(jù)數(shù)據(jù)表去快速的生成前后端代碼。

然后我一個(gè)個(gè)編輯

但是要記住一點(diǎn) good_type是主表，good是子表。

5-4-1，先編輯good商品表

基本信息

字段信息如下。 必填只需要商品名和商品價(jià)格就可以了。

圖片這里要記得選用圖片上傳

生成信息

然后點(diǎn)擊提交

5-4-2，編輯good_type商品分類表

基本信息

字段信息

生成信息

然后點(diǎn)提交。

5-4-3,主子表生成信息的對(duì)比

我們對(duì)比主表good_type和子表good生成信息的區(qū)別如下

有幾點(diǎn)要注意 1，主子表的生成包路徑要一樣，生成模塊名也要一樣。 2，主子表的生成業(yè)務(wù)嗎和生成功能名不能一樣 3，主表的生成模板用 主子表 子表的生成模板用單表 4，主表的關(guān)聯(lián)信息關(guān)聯(lián)子表名good商品表，關(guān)聯(lián)外鍵就是我們sql語(yǔ)句里的外鍵type_id

5-5，下載前后端代碼并導(dǎo)入

我們前面提交后，就可以下載前后端代碼了。如下圖所示。

下載到桌面的壓縮包，記得解壓下。

5-5-1，先執(zhí)行sql文件。

我們解壓后的兩個(gè)sql文件都要執(zhí)行下，這是動(dòng)態(tài)的把我們的商品管理和分類管理添加到后臺(tái)的左側(cè)菜單欄里用的。 因?yàn)槲覀兊娜粢篮笈_(tái)菜單欄都是動(dòng)態(tài)注入的，所以這里要先執(zhí)行下sql。執(zhí)行sql用idea自帶的mysql管理工具即可。

然后執(zhí)行上面的sql文件，可以同時(shí)選中兩個(gè)一起執(zhí)行

執(zhí)行完有如下打印

5-5-2，復(fù)制vue3代碼到項(xiàng)目

為了快速的復(fù)所有的vue代碼，我們只需要把vue里的文件夾全部復(fù)制，然后粘貼到vscode的src目錄就行。右鍵src可以查看src的文件夾。

然后把解壓的vue下的api和views復(fù)制到前端源碼的src下。

5-5-3，復(fù)制Java代碼到項(xiàng)目

Java代碼粘貼相對(duì)簡(jiǎn)單，只需要復(fù)制解壓后的main文件夾

然后粘貼到項(xiàng)目的admin模塊下的src下

然后可以看到對(duì)應(yīng)的代碼已經(jīng)復(fù)制到項(xiàng)目了

記得要重啟下Java項(xiàng)目，才會(huì)生效奧。vue項(xiàng)目不用重啟就可以生效了。

5-6，添加數(shù)據(jù)

我們上面Java項(xiàng)目重啟后，記得刷新下網(wǎng)頁(yè) 然后就可以看到我們添加的菜單了

5-6-1，添加商品分類

我們先添加商品分類試試 如添加一個(gè)水果和電子產(chǎn)品分類

添加商品分類的時(shí)候可以同步添加商品

點(diǎn)擊確定后，添加的這兩個(gè)商品也會(huì)到商品管理里面

只不過(guò)圖片要我們重新上傳下

同時(shí)我們?nèi)绻麆h除了水果分類，對(duì)應(yīng)的商品蘋果和香蕉也會(huì)自動(dòng)刪除。這在我們sql語(yǔ)句里有給大家解析這句話

5-6-2，添加商品

然后再去添加商品試試，可以看到我們添加商品的時(shí)候，有一個(gè)圖片上傳功能。是不是感覺若依很厲害啊。

然后添加數(shù)據(jù)，點(diǎn)擊提交時(shí)會(huì)有一個(gè)問(wèn)題。

如果分類里我們直接填水果，會(huì)報(bào)錯(cuò)。

是因?yàn)槲覀償?shù)據(jù)庫(kù)里存在的是分類的id而不是分類名，所以要先去分類表里找到水果分類的id，這里需要填入水果分類的id

細(xì)心的同學(xué)可能會(huì)說(shuō)了，這里填水果不比填7更好嗎，這是因?yàn)槿粢滥壳皩?duì)這類聯(lián)表查詢生成代碼有一定的局限性，后面我會(huì)教大家把分類這里改為下拉框，來(lái)實(shí)現(xiàn)分類的選擇功能。就是從我們分類表里選擇分類。

六，樹形表實(shí)現(xiàn)代碼生成

樹形表是一種數(shù)據(jù)庫(kù)表結(jié)構(gòu)，用于存儲(chǔ)具有層級(jí)關(guān)系的數(shù)據(jù)，比如組織結(jié)構(gòu)、分類目錄、菜單，省市等。 這里以公司部門層級(jí)結(jié)構(gòu)作為演示，實(shí)現(xiàn)對(duì)部門信息的增刪改查。

6-1，用sql語(yǔ)句創(chuàng)建數(shù)據(jù)表

首先通過(guò)sql代碼生成樹表（必須要有id,parent_id,name他們對(duì)應(yīng)樹結(jié)構(gòu)的子節(jié)點(diǎn)，父節(jié)點(diǎn)，和label文本）

新建數(shù)據(jù)庫(kù)表結(jié)構(gòu)的sql語(yǔ)句如下

sqlCREATE TABLE department ( department_id INT AUTO_INCREMENT PRIMARY KEY COMMENT '部門ID', department_name VARCHAR(100) NOT NULL COMMENT '部門名稱', parent_id INT COMMENT '上級(jí)部門ID，用于表示部門層級(jí)關(guān)系', chairman VARCHAR(100) COMMENT '部門負(fù)責(zé)人') COMMENT='部門信息表';

簡(jiǎn)單解釋下這段sql

這段SQL語(yǔ)句用于創(chuàng)建一個(gè)名為department的表，用于存儲(chǔ)部門信息。表中包含以下字段： department_id：部門ID，自增長(zhǎng)主鍵。 department_name：部門名稱，不允許為空。 parent_id：上級(jí)部門ID，用于表示部門層級(jí)關(guān)系。 chairman：部門負(fù)責(zé)人。 表的注釋為“部門信息表”。

注意：若依建表的字段需要加注釋，注釋就是生成頁(yè)面的顯示內(nèi)容

我們?cè)趇dea自帶的mysql可視化工具里執(zhí)行上面的sql，然后就看到成功的添加了部門表

6-2，生成代碼

先導(dǎo)入department 表

然后去修改里面的信息。

1，基本信息 只需要改下作者就行。

2，字段信息 保持默認(rèn)即可

3，生成信息

然后點(diǎn)提交，就可以生成對(duì)應(yīng)的Java和vue代碼了 然后點(diǎn)下載即可

6-3，導(dǎo)入代碼

解壓后，還是下面的樣子，

1，我們還是先執(zhí)行sql語(yǔ)句。這里不再截圖了。視頻里也會(huì)講到，前面也講過(guò)的。

2，復(fù)制Java代碼到Java源碼里

3，復(fù)制vue代碼到vue源碼里

6-4，添加數(shù)據(jù)

然后重啟Java項(xiàng)目，刷新網(wǎng)頁(yè)?？梢钥吹讲块T信息菜單就生成了

添加數(shù)據(jù)我可以添加三個(gè)節(jié)點(diǎn)的數(shù)據(jù) 一級(jí)：公司 二級(jí)：部門 三級(jí)：項(xiàng)目組

七，改造商品列表

我們商品列表里的類型顯示的是類型id，但是對(duì)于用戶來(lái)說(shuō)，還是顯示類型名稱更友好一些。

雖然類型id和類型名是對(duì)應(yīng)的，但是我們前端顯示給用戶類型id總覺得怪怪的，所以我們需要給用戶顯示類型名。所以我們這里也是要用到關(guān)聯(lián)查詢的。

7-1，聯(lián)表查詢的sql語(yǔ)句

我們通過(guò)抓包可以看到之前的商品列表返回?cái)?shù)據(jù)如下

就是返回了商品good表里的所有字段，但是我們要顯示類型名稱，就需要再多返回一個(gè)商品分類good_type表里的type_name字段。

那么我們先來(lái)編寫對(duì)應(yīng)的聯(lián)表查詢語(yǔ)句

sqlselect good.*,good_type.type_name from good ,good_type where good.type_id = good_type.type_id;

我們執(zhí)行上面的sql語(yǔ)句，就可以看到查詢的結(jié)果里多了類型名。

所以我們就要借助這個(gè)sql語(yǔ)句來(lái)改造代碼了。

7-2，新建vo類和mapper方法

我們?cè)赼dmin的good里的domain目錄下新建vo文件夾然后再新建GoodVo類，并且要繼承g(shù)ood表

然后在GoodVo里定義typeName用來(lái)承接類型名稱

然后在GoodMapper里新建一個(gè)聯(lián)表查詢的方法

我們可以借助MyBatisX插件來(lái)自動(dòng)生成對(duì)應(yīng)的xml查詢標(biāo)簽。接下來(lái)先教大家安裝MyBatisX插件，進(jìn)而提升我們的開發(fā)效率。

7-3，安裝mybatis插件

可以根據(jù)自己的Mapper接口里的方法，快速的生成mybatis查表的xml文件 點(diǎn)擊setting，然后去Plugins里搜索mybatis，安裝MyBatisX

安裝成功后回到我們的Mapper接口里，可以看到方法前面都會(huì)多一個(gè)小鳥的圖標(biāo)

有圖標(biāo)的就代碼mapper的xml里有對(duì)應(yīng)的sql語(yǔ)句。沒有圖標(biāo)的甚至方法名報(bào)紅色波浪線的，代碼xml里還沒生成對(duì)應(yīng)的sql。 其實(shí)生成也很簡(jiǎn)單，選中爆紅的方法名，然后按 Alt Enter快捷鍵，選則下圖所示的Generate statement 就可以快速生成了

可以看到對(duì)應(yīng)的xml里生成了selectGoodListVo相關(guān)的xml代碼

并且之前報(bào)錯(cuò)的方法前也有了小鳥的圖標(biāo)

7-4，把sql寫入到mybatis的xml里

我們上面自動(dòng)生成了xml標(biāo)簽，接下來(lái)就是把一開始的聯(lián)表查詢sql語(yǔ)句插入到xml里

sqlselect good.*,good_type.type_name from good ,good_type where good.type_id = good_type.type_id;

把上面的sql插入如下位置

注意事項(xiàng)：記得把sql語(yǔ)句最后的 ： 刪除了

我們寫好聯(lián)表查詢的sql以后，還有一個(gè)問(wèn)題，就是我們返回的vo類里使用的是駝峰式命名，但是sql里的使用的是下劃線命名，為了保持一致，我們需要把mybatis配置文件做下修改。

修改也很簡(jiǎn)單，打開admin里的mybatis配置文件，把下面的代碼注釋解開就行了。

解開后如下

這里只要解開，就會(huì)自動(dòng)把下劃線命名改為駝峰式命名，保持字段名一樣。

7-5，編寫業(yè)務(wù)層代碼

我們業(yè)務(wù)層主要就是對(duì)外提供的查詢接口。對(duì)應(yīng)代碼如下圖

我們也需要在這里編寫和上面mapper類里一樣的方法，所以把mapper層里的這個(gè)方法粘貼過(guò)來(lái)即可

選中方法名，然后按 Alt Enter快捷鍵，選則下圖所示的Implement method 就可以快速生成了

然后我們的GoodServiceImpl類里自動(dòng)生成了如下代碼

可以看到上面代碼有個(gè)報(bào)錯(cuò)，這是我們還沒有實(shí)現(xiàn)里面的查詢代碼的緣故。接下來(lái)實(shí)現(xiàn)代碼如下

到這里我們業(yè)務(wù)層的接口和實(shí)現(xiàn)類就定義好了，最后我們還需要去改造GoodController

7-6，改造Controller

因?yàn)槲覀冎安樵兩唐妨斜頉]有做聯(lián)表查詢，所以需要把商品的查詢語(yǔ)句改造下，就是把下面的代碼改造下。

我們不再用上面的單表查詢，而是調(diào)用我們前面定義的聯(lián)表查詢。 我們把之前的注釋掉，重寫如下代碼

到這里就全部改造好了，然后重啟下Java項(xiàng)目。

7-7，測(cè)試驗(yàn)證

我們重啟Java項(xiàng)目以后，去瀏覽器里刷新頁(yè)面進(jìn)入商品管理，然后點(diǎn)擊下刷新

然后進(jìn)行數(shù)抓包，就可以看到返回的數(shù)據(jù)里多了一個(gè)goodCount字段。

7-8，改造vue前端代碼

我們查詢到了商品分類id對(duì)應(yīng)的分類名稱了，前面Java代碼實(shí)現(xiàn)完，我們vue前端代碼只需要把之前顯示的分類id改為分類名稱就行了。

我們找到對(duì)應(yīng)代碼，只需要修改一行代碼，然后保存即可

改這下面這樣。

<el-table-column label="類型" align="center" prop="typeName" />

給大家解釋下這行代碼:

這段代碼是在Vue.js項(xiàng)目中，特別是使用Element庫(kù)時(shí)，這段代碼是一個(gè)定義表格列el-table-column的模板語(yǔ)法，具體功能如下：

• 標(biāo)簽定義：el-table-column 是Element 庫(kù)中用于構(gòu)建表格結(jié)構(gòu)的一個(gè)組件，它代表表格中的一個(gè)列。
• label屬性："類型" 是該列的標(biāo)題文本，展示在列的頂部，用以標(biāo)注該列數(shù)據(jù)的含義。
• align屬性："center" 指定該列內(nèi)容的水平對(duì)齊方式為居中對(duì)齊?？蛇x值還包括 "left"（左對(duì)齊）和 "right"（右對(duì)齊）。
• prop屬性："typeName" 表示該列的數(shù)據(jù)將從對(duì)應(yīng)數(shù)據(jù)對(duì)象的 typeName 屬性中獲取。這意味著每一行數(shù)據(jù)將會(huì)顯示其 typeName 屬性的值。這是Vue的動(dòng)態(tài)綁定特性，使得數(shù)據(jù)變化時(shí)，表格內(nèi)容能自動(dòng)更新。

綜上所述，此代碼段在Element UI的表格中創(chuàng)建了一個(gè)列，用于展示數(shù)據(jù)列表中每個(gè)項(xiàng)目typeName字段的值，且該列標(biāo)題為“類型”，內(nèi)容居中顯示。當(dāng)綁定的數(shù)據(jù)發(fā)生變化時(shí)，這一列的內(nèi)容也會(huì)相應(yīng)更新，提供給用戶一個(gè)實(shí)時(shí)反映數(shù)據(jù)狀態(tài)的視圖。

7-9，修復(fù)搜索查詢的bug

細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn)，做完上面的改造后，我們的搜索功能出錯(cuò)了。沒法做搜索了。比如我們輸入小，然后點(diǎn)擊搜索沒有反應(yīng)。

是因?yàn)槲覀冊(cè)趍apper的xml里沒有寫搜索對(duì)應(yīng)的模糊查詢語(yǔ)句。

我們把對(duì)應(yīng)的代碼修改成下這樣，然后重啟項(xiàng)目即可。

<select id="selectGoodListVo" resultType="com.ruoyi.good.domain.vo.GoodVo"> SELECT good.*, good_type.type_name FROM good INNER JOIN good_type ON good.type_id = good_type.type_id <where> <if test="goodName != null"> AND good_name LIKE CONCAT('%', #{goodName}, '%') </if> <if test="price != null"> AND price = #{price} </if> <if test="imageUrl != null"> AND image_url = #{imageUrl} </if> <if test="typeId != null"> AND good.type_id = #{typeId} </if> </where> </select>

如，我們只搜索一個(gè)手，就可以查到包含手的商品

八，改造商品分類列表

我們上面顯示商品分類列表。

假設(shè)我們有個(gè)需要，需要顯示每個(gè)分類對(duì)應(yīng)的商品個(gè)數(shù)，那么我們?cè)撛趺磳?shí)現(xiàn)呢。今天就來(lái)帶大家實(shí)現(xiàn)這個(gè)功能，隨便教大家如何二開若依框架，添加自己的功能。

我們就是要在商品分類列表返回的數(shù)據(jù)里加一個(gè)goodCount字段

之前的返回是沒有這個(gè)字段的。所以就要開始我們的代碼改造之旅了

8-1，新建vo類和mapper方法

我這里的qcl-admin，就是你項(xiàng)目里的ruoyi-admin，然后再domain里先創(chuàng)建一個(gè)vo文件夾，然后創(chuàng)建GoodTypeVo類

GoodTypeVo類代碼很簡(jiǎn)單，就是定義一個(gè)我們要返回的goodCount字段，然后生成get和set方法。 然后在GoodTypeMapper接口里添加新的聯(lián)表查詢方法，如下

我們可以借助MyBatisX插件自動(dòng)生成對(duì)應(yīng)的查詢標(biāo)簽。

上圖可以看到，有圖標(biāo)的就是xml里有對(duì)應(yīng)的sql語(yǔ)句。沒有圖標(biāo)的甚至方法名報(bào)紅色波浪線的，代碼xml里還沒生成對(duì)應(yīng)的sql。 其實(shí)生成也很簡(jiǎn)單，選中爆紅的方法名，然后按 Alt Enter快捷鍵，選則下圖所示的Generate statement 就可以快速生成了

可以看到對(duì)應(yīng)的xml里生成了selectGoodTypeListVo相關(guān)的xml代碼

并且之前報(bào)錯(cuò)的方法前也有了小鳥的圖標(biāo)

8-2，編寫mybatis的xml文件

我們前面自動(dòng)生成了xml的查詢標(biāo)簽

然后我們需要把對(duì)應(yīng)的sql語(yǔ)句粘貼進(jìn)來(lái)的

sqlselect good_type.type_name, count(good.good_id) as good_countfrom good_type left join good on good_type.type_id = good.type_idgroup by good_type.type_name;

把上面的聯(lián)表查詢sql語(yǔ)句粘貼到xml里

有一點(diǎn)需要注意的：xml里的sql語(yǔ)句，要把最后的 ; 給刪除的

刪除后如下

我們寫好聯(lián)表查詢的sql以后，還有一個(gè)問(wèn)題，就是我們返回的vo類里使用的是goodCount 駝峰式命名，但是sql里的good_count 下劃線命名，為了保持一致，我們需要把mybatis配置文件做下修改。

修改也很簡(jiǎn)單，打開admin里的mybatis配置文件，把下面的代碼注釋解開就行了。

解開后如下

這里只要解開，就會(huì)自動(dòng)把下劃線命名改為駝峰式命名，保持字段名一樣。

8-3，編寫業(yè)務(wù)層

我們業(yè)務(wù)層主要就是對(duì)外提供的查詢接口。對(duì)應(yīng)代碼如下圖

我們也需要在這里編寫和上面mapper層一樣的方法，所以把mapper層里的這個(gè)方法粘貼過(guò)來(lái)即可

選中方法名，然后按 Alt Enter快捷鍵，選則下圖所示的Implement method 就可以快速生成了

然后我們的GoodTypeServiceImpl類里自動(dòng)生成了如下代碼

可以看到上面代碼有個(gè)報(bào)錯(cuò)，這是我們還沒有實(shí)現(xiàn)里面的查詢代碼的緣故。接下來(lái)實(shí)現(xiàn)代碼如下

到這里我們業(yè)務(wù)層的接口和實(shí)現(xiàn)類就定義好了，最后我們還需要去改造GoodTypeController

8-4，改造Controller

因?yàn)槲覀冎安樵兩唐奉愋土斜頉]有做聯(lián)表查詢，所以需要把商品類型的查詢語(yǔ)句改造下，就是把下面的代碼改造下。我這里的qcl-admin，就是你若依里的ruoyi-admin，因?yàn)槲腋牧讼马?xiàng)目名。

我們不再用上面的單表查詢，而是調(diào)用我們前面定義的聯(lián)表查詢。 我們把之前的注釋掉，重寫如下代碼

到這里就全部改造好了，然后重啟下Java項(xiàng)目。

我們重啟Java項(xiàng)目以后，去瀏覽器里刷新頁(yè)面進(jìn)入商品分類管理

然后進(jìn)行數(shù)抓包，就可以看到返回的數(shù)據(jù)里多了一個(gè)goodCount字段。

8-5，改造前端代碼

我們查詢到了分類下的商品個(gè)數(shù)，前面Java代碼實(shí)現(xiàn)完，我們vue前端代碼也要加一列，來(lái)顯示商品個(gè)數(shù)。

我們找到對(duì)應(yīng)代碼，只需要加一行代碼，然后保存即可

<el-table-column label="商品個(gè)數(shù)" align="center" prop="goodCount" />

給大家解釋下這行代碼:

這段代碼是Vue.js中Element UI框架的模板語(yǔ)法，用于定義一個(gè)表格列（）的配置。具體說(shuō)明如下： label="商品個(gè)數(shù)"：設(shè)置該列的標(biāo)題為“商品個(gè)數(shù)”。 align="center"：指定該列內(nèi)容的水平對(duì)齊方式為居中對(duì)齊。 prop="goodCount"：指定了該列數(shù)據(jù)的綁定屬性名為goodCount，意味著這一列會(huì)顯示表格數(shù)據(jù)中每個(gè)對(duì)象的goodCount屬性值。 綜上，此代碼片段定義了一個(gè)表格列，用于展示每行數(shù)據(jù)中商品的數(shù)量，且文本居中對(duì)齊。

到這里我們就可以在分類列表里查詢對(duì)應(yīng)的商品個(gè)數(shù)了

8-6，修復(fù)搜索查詢的bug

細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn)，做完上面的改造后，我們的搜索功能出錯(cuò)了。沒法做搜索了 是因?yàn)槲覀冊(cè)趍apper的xml里沒有寫搜索對(duì)應(yīng)的模糊查詢語(yǔ)句。

我們添加如下代碼，然后重啟項(xiàng)目即可。

如，我們只搜索一個(gè)圖，就可以查到圖書

九，添加商品時(shí)分類改為下拉框

還記得之前給大家說(shuō)的一個(gè)問(wèn)題嗎，我們添加商品時(shí)，添加商品分類的地方，雖然可以填入類型ID來(lái)區(qū)分商品屬于那個(gè)分類，但是這樣對(duì)用戶來(lái)說(shuō)不是很友好。

所以我們要改造下商品添加頁(yè)面，讓用戶添加商品時(shí)可以通過(guò)下拉框選擇商品分類。如下圖：

需求分析 接下來(lái)我們就來(lái)分析需求了，我們?cè)谔砑由唐窌r(shí)想通過(guò)下拉框來(lái)實(shí)現(xiàn)選擇分類。那么我們就要進(jìn)行以下幾步操作

1，請(qǐng)求分類數(shù)據(jù)填充到下拉框里 2，把之前的輸入框改為下拉框

所以我們接下來(lái)就要來(lái)改造代碼了。

9-1，請(qǐng)求所有的分類數(shù)據(jù)

我們的添加商品彈窗是屬于前端vue項(xiàng)目的代碼，所以我們先找到添加商品彈窗對(duì)應(yīng)的代碼。如下圖

那么我們改造的地方就是進(jìn)入商品頁(yè)的時(shí)候，就去請(qǐng)求所有的分類數(shù)據(jù)，以便在彈起添加商品的彈窗時(shí)，把分類數(shù)據(jù)填充到選擇分類的選項(xiàng)中供用戶選擇。所以我們接下來(lái)要做的就是在good的index.vue的js代碼部分請(qǐng)求分類列表數(shù)據(jù)

我們要請(qǐng)求分類數(shù)據(jù)，就要先去api目錄下的type.js里找到查詢分類列表的方法。如下圖所示。

然后引入到views里的good下的index.vue的js部分。 如下圖：

第一步：引入api下good里的type.js里的listType方法

import { listType } from "@/api/good/type";

第二步：定義請(qǐng)求商品分類列表的方法

然后刷新當(dāng)前頁(yè)面，通過(guò)抓包可以看到我們請(qǐng)求鏈接里拼接上了我們的請(qǐng)求參數(shù)

并且成功的返回了數(shù)據(jù)

這個(gè)數(shù)據(jù)正是我們想要的分類列表。 而我們請(qǐng)求到的數(shù)據(jù)賦值給了typeList

那么我們接下來(lái)在要用到分類數(shù)據(jù)的地方，使用typeList即可。

9-2，將分類輸入框改為下拉框

接下來(lái)我們就來(lái)改造頁(yè)面布局了 找到添加商品時(shí)的分類輸入框如下

這部分代碼我們先注釋了，然后再寫下拉框的代碼

代碼其實(shí)很簡(jiǎn)單，如下。

<el-form-item label="類型" prop="typeId"><el-select v-model="form.typeId" placeholder="請(qǐng)選擇類型"> <el-option v-for="item in typeList" :key="item.typeId" :label="item.typeName" :value="item.typeId" /></el-select></el-form-item>

這段Vue代碼是一個(gè)表單組件，用于選擇類型。具體功能如下： 使用el-form-item定義了一個(gè)表單項(xiàng)，用于顯示類型信息。 使用label屬性設(shè)置了表單項(xiàng)的標(biāo)簽為"類型"。 使用prop屬性設(shè)置了表單項(xiàng)的屬性名為"typeId"，用于表單驗(yàn)證和數(shù)據(jù)綁定。 使用el-select定義了一個(gè)下拉選擇框，用于選擇類型。 使用v-model指令實(shí)現(xiàn)了下拉選擇框的雙向數(shù)據(jù)綁定，綁定的值為form.typeId。 使用placeholder屬性設(shè)置了下拉選擇框的占位符為"請(qǐng)選擇類型"。 使用el-option定義了下拉選項(xiàng)，通過(guò)v-for指令遍歷了typeList數(shù)組，生成多個(gè)選項(xiàng)。 使用key屬性為每個(gè)選項(xiàng)設(shè)置了唯一的鍵值，鍵值為item.typeId。 使用label屬性設(shè)置了選項(xiàng)的顯示文本，文本為item.typeName。 使用value屬性設(shè)置了選項(xiàng)的值，值為item.typeId。 這段代碼的作用是通過(guò)下拉選擇框選擇類型，并將選擇的值綁定到form.typeId上。

效果圖下

添加成功后如下

9-3，搜索的輸入框改為下拉框

既然改了，那我們一步改到位 把搜索部分的類型id的輸入框也改為分類名的下拉框，提升用戶體驗(yàn)。

先找到對(duì)應(yīng)的代碼

把這代碼注釋了改為下面這樣

<el-form-item label="類型名稱" prop="typeId" > <el-select v-model="queryParams.typeId" placeholder="請(qǐng)選擇類型" clearable @keyup.enter="handleQuery" style="width: 150px;"> <el-option v-for="item in typeList" :key="item.typeId" :label="item.typeName" :value="item.typeId"> </el-option> </el-select> </el-form-item>

這段Vue代碼是一個(gè)表單組件，用于選擇類型名稱。具體功能如下：

使用el-form-item定義表單元素，標(biāo)簽為"類型名稱"，綁定prop="typeId"用于表單驗(yàn)證。 使用el-select定義下拉選擇框，綁定v-model="queryParams.typeId"實(shí)現(xiàn)選擇值與數(shù)據(jù)對(duì)象的雙向綁定，設(shè)置placeholder="請(qǐng)選擇類型"作為占位符，clearable屬性允許清空選項(xiàng)，@keyup.enter="handleQuery"監(jiān)聽回車鍵事件觸發(fā)查詢操作，style="width: 150px;"設(shè)置下拉框?qū)挾葹?50像素。 使用el-option定義下拉選項(xiàng)，使用v-for="item in typeList"循環(huán)遍歷typeList數(shù)組中的每個(gè)元素，將item.typeId作為選項(xiàng)的唯一標(biāo)識(shí)符，item.typeName作為選項(xiàng)的顯示文本，item.typeId作為選項(xiàng)的綁定值。 當(dāng)用戶選擇一個(gè)類型或按下回車鍵時(shí)，會(huì)觸發(fā)handleQuery方法進(jìn)行查詢操作。

修改后效果圖如下：

可以看到搜索水果，只顯示水果分類下的商品