文章將自動保存至草稿箱

今天我們來借助若依來快速的搭建一個springboot vue3的前后端分離的的Java管理后臺，后臺網頁使用vue3和 Element Plus來快速搭建。

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

一，技術點和準備工作

后端技術點

• Java17
• 數據庫：mysql8
• mybatis：作為持久層框架，實現了數據庫的CRUD操作，簡化了與數據庫的交互
• redis5：作為緩存中間件，提高了系統性能和響應速度
• Spring Boot ：作為核心框架，提供了一系列開箱即用的功能，如數據訪問、消息傳遞、任務調度等
• Spring Security：提供了強大的安全認證和授權功能
• Jwt，權限認證使用Jwt，支持多終端認證系統

前端技術點

• vue3
• Element Plus
• vite

軟件和開發環境

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

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

建議大家盡量和課程版本保持一致，避免一些版本不對應導致一些不必要的錯誤。

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

這里安裝redis和node的時候有些注意事項給大家簡單說說。

安裝軟件注意事項

我們安裝redis和node的時候都需要配置環境變量，其實我們在安裝的過程中，就可以直接勾選上，這樣就可以免去自己再單獨配置環境變量的麻煩了。 所以不管安裝redis和node時，只要看到PATH的地方，一定要記得都勾選上。

redis記得勾選PATH

安裝node也記得點中PATH

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

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

二，啟動若依的Springboot項目和vue3項目

2-1-1，去官方下載前后端項目

我們使用idea開發者工具來去若依官網下載官方提供的springboot項目

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

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

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

然后等待源碼下載

下載成功后會自動打開項目。

正常第一次打開項目需要導入一些安裝包和依賴。

2-1-2，mysql數據庫的配置和導入

在項目的sql目錄下，有我們數據庫配置需要的一些東西。

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

創建好ry-vue數據庫,這里數據庫名最好也是用ry-vue,因為后續運行項目時官方代碼里就是取得這個數據庫名。創建好數據庫以后，就可以執行sql下的文件了。我們先執行quartz.sql文件

我們在當前頁執行sql的時候，記得ctrl a全選當前的sql，然后點擊綠色箭頭執行sql

執行完以后如下

然后同樣的方式執行另外一個sql文件

兩個sql都執行完以后，點擊刷新就可以看到我們成功的導入了以下數據表

創建好數據庫和數據表以后，我們需要在下圖所示的地方修改myslq數據庫的賬號和密碼，記得改成我們自己的。

2-1-3，配置redis

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

2-1-4，啟動項目

如下圖所示我們找到RuoYiApplication然后就可以點擊綠色箭頭運行項目了。

啟動成功我們可以看到如下標識

啟動成功后通過http://localhost:8080 看到如下所示，就代表若依版的springboot項目已經成功運行了。

Java后端啟動成功了，接下來我們就要啟動前端vue3項目進行網站端的部署運行了。

2-2-1，下載vue3項目源碼

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

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

我們點進去可以看到是gitbhub上的一個倉庫

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

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

解壓后的目錄如下

可以看出來這是一個標準的vue3項目。

2-2-2，運行vue項目

我們這里用到的node，所以要確保你node安裝成功，并且配置好環境變量。 我們運行項目使用專業的前端開發工具vscode 其實導入項目到vscode很簡單，只需要在vscode里打開項目文件夾即可。

我們打開項目后要去安裝依賴，安裝依賴之前要記得安裝node，我們這里使用npm i 來自動安裝依賴。

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

依賴安裝完，就可以用npm run dev來運行項目了。運行成功后可以看到管理后端網站的訪問地址。

然后就可以看到管理后臺的登錄界面

到這里我們整個前后端項目就運行成功了。 使用默認賬號先登錄進去看看效果

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

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

項目中要到的圖標，圖片，背景圖我給大家放到評論區了

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

在后臺的右上角，有一個入口。

點擊布局設置，就可以設置主題和顏色了 如我們把深色側邊欄改為淺色側邊欄

改變后如下

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

可以看出，我們按鈕就從藍色改為了橘黃色，當然你也可以改為別的顏色。

其他幾個選項可以自己根據需求配置。當然也可以恢復默認

3-2，修改圖標

可以看到我們后臺網站的圖標是這樣的，當然這里的圖標也可以換成自己的。

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

我們只需要自己找一個圖標，名字改成favicon并且圖片的后綴也改為 .ico就行。如我這里用自己的頭像來替換這個默認圖標。

替換后記得刷新下網頁。可以看到我們只在網站頂部替換了，但是左側邊欄的還沒有替換掉。

去查看源碼

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

如我們這里替換為自己的

再刷新下網頁，可以看到成功了

3-3，vscode里修改文案

可以看到我們項目里到處都是若依的字樣，那么我們就使用vscode自帶的全局替換，來替換下。最左邊有一個搜索框，點擊下。

可以搜索到整個項目里的若依字段

下面的替換里輸入自己替換的文字就行。然后記得點擊下這個圖標。

然后刷新網頁，就可以看到我們文案全部替換成功了

3-4.idea里修改Java文案

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

這樣整個Java項目里若依的文案也就全部替換了。

3-5，刪除數據里的文案

細心的同學可能發現，前端網頁左側邊欄里還有若依文案

因為側邊欄我們是從數據庫里動態加載的，所以要去數據庫里刪除對應的數據。我們去idea里借助mysql管理工具，找到sys_menu數據表，然乎雙擊打開。

打開后如下

可以看到這里存的是我們左側邊欄的文案，把若依官網的這行刪除即可。 選中這行，然乎點擊減號

點完減號，記得點擊整個綠色向上的箭頭。同步下數據庫。

這樣就刪除成功了，然后刷新下后臺網頁。

可以看到沒有若依的文字了。

3-6，刪除若依的鏈接

在我們的后臺網頁右上角有這兩個圖標。點擊后會跳轉到若依，我們這里也可以做下刪除。當然整個刪除需要要vue3代碼里。

我們到vscode里找到對應的源碼刪除即可。然后就可以看到左上角沒有了之前的兩個圖標

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

3-7，修改登錄頁背景圖和文案

我們登錄頁的背景圖也可以替換的

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

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

替換完去網頁里刷新下。可以看到就替換成功了。

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

然后刷新下網頁，就替換成功了。

四，單表生成Java和vue3代碼

自動生成Java和vue代碼正式若依的強大之處，接下來我就來帶大家快速的實現一個對用戶信息進行增刪改查的小案例。我們先講單表和主子表生成代碼，然后再講樹形表生成代碼。

4-1，創建用戶表

我們這里以一個用戶表為例，首先就是去若依后臺，創建一個數據表。這也是若依的強大之處，可以快速的創建數據表。 建表語句先給到大家。

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

我們借助若依提供的功能來實現數據表的創建，這里qcl_user是我們的表名，大家最好和石頭哥保持一致。點擊系統工具，然后點擊代碼生成，點擊新建，把上面的sql語句復制到這里即可。

注意事項：我們的sql語句里必須設置主鍵也就是主鍵一定要有。

創建好以后如下，可以看到數據庫里也多了qcl_user這個表

然后我們點擊編輯來生成對應的增刪改查的代碼

4-2，生成Java和vue3代碼

我們進入編輯后如下

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

修改后如下，記得上級菜單不做選擇。這里一定要和石頭哥一樣用 qcluser 不能直接使用user因為uesr在若依自帶的用戶管理里面已經被使用過了。

然后點擊提交。這樣就可以生成對應的Java和vue代碼了，可以點擊預覽查看代碼

當然我們最重要的還是要下載代碼，然后把對應的代碼粘貼到我們的項目里。

4-3，把自動生成的代碼插入項目

我們前面點擊下載把下載好的代碼解壓好。解壓好以后隊醫的代碼如下。

4-3-1，執行sql文件

我們先執行slq語句，因為我們的若依后臺菜單欄都是動態注入的，所以這里要先執行下sql。執行sql用idea自帶的mysql管理工具即可。

然后執行上面的sql文件

執行成功，有如下打印

4-3-2，復制Java代碼到idea

然后就是復制Java代碼到idea，我們在main目錄里一層層的進入，復制qcluser文件夾。

然后粘貼到ruoyi-admin項目的com.ruoyi目錄下即可。

然后就可以看到我們對應的Java代碼就弄好了

4-3-3，復制mapper文件到idea

然后就回到main然后進入resources目錄，復制mapper文件夾。

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

可以看到我們對應的mybatis的配置文件就弄好了

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

接下來我們就是進入vue文件里粘貼vue3代碼了

這里有個api和views，我們要每個都進入，然后粘貼里面對應的代碼到vue3項目對應的目錄里。 首先進入api復制qcluser文件夾

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

可以看到就是我們前端對應的接口請求的代碼

然后就是進入vue的views文件夾，復制qcluser

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

可以看到就是我們對應頁面的vue3代碼

4-4，重新運行idea的Java項目

由于vue3項目是動態的，所以vue3代碼粘貼到vscode里就可以實時更新，但是Java項目粘貼完代碼，要重新運行下項目。

重新啟動成功后如下

然后刷新我們的若依后臺

刷新后就可以看到我們的系統工具里多了一個用戶管理的菜單。

然后我們點擊新增就可以添加數據到數據庫了

可以看到我們新增數據成功

當然也可以修改數據。比如點擊修改，我們做如下修改

可以看到數據修改成功

當然也可以點擊刪除，刪除對應的數據。

到這里我們自動生成的代碼就可以運行起來，并且對數據進行增刪改查了。

4-5，修改菜單位置

細心的同學可能會說了，用戶管理不應該單獨做一個模塊嗎，放在系統工具里不太好吧。接下來就教大家怎么移動菜單位置。

在系統管理里面有一個菜單管理，我們找到用戶管理，然后點擊修改。

我們可以把上級菜單改為主類目，然后給用戶管理設置一個圖標

提交以后，記得重新刷新下當前頁面

這樣就可以看到用戶管理出現在了一級菜單類目。然后點擊就可以對用戶進行管理了。

五，主子表自動生成商品多表的前后端代碼

我們前面章節給大家簡單的展示了單表前后端代碼的快速生成，接下來我們來實現商品管理功能 包含：商品分類表，商品表。 我們知道一個分類下面可以對應多個商品。所以我們這兩個表是主子表關系。分類表是主表，商品表是子表。

5-1，創建分類和商品表的sql語句

我們創建數據表可以直接使用idea自帶的mysql可視化管理工具，也可以直接用sql語句來創建。由于我們直接導入sql語句更方便，也可以統一標準，所以這里推薦大家使用sql語句來創建數據表。

對應的sql語句貼出來給到大家，為了方便大家學習，我這里盡量使用簡單的字段。

根據需求，我們需要創建兩個表：一個是good_type（商品分類表），另一個是good（商品表）。在good表中，我們將包含商品名、價格和圖片字段，并且設置一個外鍵與good_type表關聯，以體現一對多的關系。下面是相應的SQL語句示例：

創建商品分類表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 '價格', `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, -- 級聯操作 PRIMARY KEY (`good_id`) -- 主鍵) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品信息';

在這段SQL中：

• good_type表有兩個字段：type_id作為主鍵，用于唯一標識每個分類；type_name存儲分類的名稱。
• good表包括：good_id為主鍵，標識每個商品；good_name存儲商品名稱；price存儲商品價格，這里使用DECIMAL類型以精確表示貨幣值；image_url存儲商品圖片的URL；type_id作為外鍵，關聯到good_type表的type_id，以確保數據完整性。同時，通過ON DELETE CASCADE ON UPDATE CASCADE規則，當刪除或更新一個分類時，與其關聯的商品記錄也會相應地被級聯處理。

大家不用記這些sql語句，這些sql語句都是使用ai來自動生成的，后面也會教大家如何使用Ai來快速編程

5-2，導入sql語句

我們上門創建好sql語句以后，就可以去若依后臺進行導入了。我們一個一個的導入。 當然我們導入sql語句的方式有很多種，因為我前面創建用戶表的時候給大家演示過若依后臺導入了。

這一節給大家演示idea自帶的mysql可視化管理工具來導入sql，技多不壓身嘛，讓大家多學點知識。

接下來教大家怎么打開mysql可視化工具。 1，點擊idea右側數據庫的圖標 2，然后點擊自己的數據 3，點擊圖中3標識的圖標。

這個圖標就是idea給我們提供的sql命令行

點開后，選這個默認的console命令行即可。

然把下面的sql語句復制進去。

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 '價格', `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, -- 級聯操作 PRIMARY KEY (`good_id`) -- 主鍵) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品信息';

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

可以看到sql語句執行完畢

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

就可以看到我們添加的兩個表了

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

我們利用若依的菜單管理來創建一個商品管理的菜單

配置信息如下

點擊確定后記得刷新網頁，可以看到多了商品管理的一級菜單

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

若依的強大之處就在于根據數據表去快速的生成前后端代碼。

然后我一個個編輯

但是要記住一點 good_type是主表，good是子表。

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

基本信息

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

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

生成信息

然后點擊提交

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

基本信息

字段信息

生成信息

然后點提交。

5-4-3,主子表生成信息的對比

我們對比主表good_type和子表good生成信息的區別如下

有幾點要注意 1，主子表的生成包路徑要一樣，生成模塊名也要一樣。 2，主子表的生成業務嗎和生成功能名不能一樣 3，主表的生成模板用 主子表 子表的生成模板用單表 4，主表的關聯信息關聯子表名good商品表，關聯外鍵就是我們sql語句里的外鍵type_id

5-5，下載前后端代碼并導入

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

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

5-5-1，先執行sql文件。

我們解壓后的兩個sql文件都要執行下，這是動態的把我們的商品管理和分類管理添加到后臺的左側菜單欄里用的。 因為我們的若依后臺菜單欄都是動態注入的，所以這里要先執行下sql。執行sql用idea自帶的mysql管理工具即可。

然后執行上面的sql文件，可以同時選中兩個一起執行

執行完有如下打印

5-5-2，復制vue3代碼到項目

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

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

5-5-3，復制Java代碼到項目

Java代碼粘貼相對簡單，只需要復制解壓后的main文件夾

然后粘貼到項目的admin模塊下的src下

然后可以看到對應的代碼已經復制到項目了

記得要重啟下Java項目，才會生效奧。vue項目不用重啟就可以生效了。

5-6，添加數據

我們上面Java項目重啟后，記得刷新下網頁 然后就可以看到我們添加的菜單了

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

我們先添加商品分類試試 如添加一個水果和電子產品分類

添加商品分類的時候可以同步添加商品

點擊確定后，添加的這兩個商品也會到商品管理里面

只不過圖片要我們重新上傳下

同時我們如果刪除了水果分類，對應的商品蘋果和香蕉也會自動刪除。這在我們sql語句里有給大家解析這句話

5-6-2，添加商品

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

然后添加數據，點擊提交時會有一個問題。

如果分類里我們直接填水果，會報錯。

是因為我們數據庫里存在的是分類的id而不是分類名，所以要先去分類表里找到水果分類的id，這里需要填入水果分類的id

細心的同學可能會說了，這里填水果不比填7更好嗎，這是因為若依目前對這類聯表查詢生成代碼有一定的局限性，后面我會教大家把分類這里改為下拉框，來實現分類的選擇功能。就是從我們分類表里選擇分類。

六，樹形表實現代碼生成

樹形表是一種數據庫表結構，用于存儲具有層級關系的數據，比如組織結構、分類目錄、菜單，省市等。 這里以公司部門層級結構作為演示，實現對部門信息的增刪改查。

6-1，用sql語句創建數據表

首先通過sql代碼生成樹表（必須要有id,parent_id,name他們對應樹結構的子節點，父節點，和label文本）

新建數據庫表結構的sql語句如下

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

簡單解釋下這段sql

這段SQL語句用于創建一個名為department的表，用于存儲部門信息。表中包含以下字段： department_id：部門ID，自增長主鍵。 department_name：部門名稱，不允許為空。 parent_id：上級部門ID，用于表示部門層級關系。 chairman：部門負責人。 表的注釋為“部門信息表”。

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

我們在idea自帶的mysql可視化工具里執行上面的sql，然后就看到成功的添加了部門表

6-2，生成代碼

先導入department 表

然后去修改里面的信息。

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

2，字段信息 保持默認即可

3，生成信息

然后點提交，就可以生成對應的Java和vue代碼了 然后點下載即可

6-3，導入代碼

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

1，我們還是先執行sql語句。這里不再截圖了。視頻里也會講到，前面也講過的。

2，復制Java代碼到Java源碼里

3，復制vue代碼到vue源碼里

6-4，添加數據

然后重啟Java項目，刷新網頁。可以看到部門信息菜單就生成了

添加數據我可以添加三個節點的數據 一級：公司 二級：部門 三級：項目組

七，改造商品列表

我們商品列表里的類型顯示的是類型id，但是對于用戶來說，還是顯示類型名稱更友好一些。

雖然類型id和類型名是對應的，但是我們前端顯示給用戶類型id總覺得怪怪的，所以我們需要給用戶顯示類型名。所以我們這里也是要用到關聯查詢的。

7-1，聯表查詢的sql語句

我們通過抓包可以看到之前的商品列表返回數據如下

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

那么我們先來編寫對應的聯表查詢語句

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

我們執行上面的sql語句，就可以看到查詢的結果里多了類型名。

所以我們就要借助這個sql語句來改造代碼了。

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

我們在admin的good里的domain目錄下新建vo文件夾然后再新建GoodVo類，并且要繼承good表

然后在GoodVo里定義typeName用來承接類型名稱

然后在GoodMapper里新建一個聯表查詢的方法

我們可以借助MyBatisX插件來自動生成對應的xml查詢標簽。接下來先教大家安裝MyBatisX插件，進而提升我們的開發效率。

7-3，安裝mybatis插件

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

安裝成功后回到我們的Mapper接口里，可以看到方法前面都會多一個小鳥的圖標

有圖標的就代碼mapper的xml里有對應的sql語句。沒有圖標的甚至方法名報紅色波浪線的，代碼xml里還沒生成對應的sql。 其實生成也很簡單，選中爆紅的方法名，然后按 Alt Enter快捷鍵，選則下圖所示的Generate statement 就可以快速生成了

可以看到對應的xml里生成了selectGoodListVo相關的xml代碼

并且之前報錯的方法前也有了小鳥的圖標

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

我們上面自動生成了xml標簽，接下來就是把一開始的聯表查詢sql語句插入到xml里

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

把上面的sql插入如下位置

注意事項：記得把sql語句最后的 ： 刪除了

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

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

解開后如下

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

7-5，編寫業務層代碼

我們業務層主要就是對外提供的查詢接口。對應代碼如下圖

我們也需要在這里編寫和上面mapper類里一樣的方法，所以把mapper層里的這個方法粘貼過來即可

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

然后我們的GoodServiceImpl類里自動生成了如下代碼

可以看到上面代碼有個報錯，這是我們還沒有實現里面的查詢代碼的緣故。接下來實現代碼如下

到這里我們業務層的接口和實現類就定義好了，最后我們還需要去改造GoodController

7-6，改造Controller

因為我們之前查詢商品列表沒有做聯表查詢，所以需要把商品的查詢語句改造下，就是把下面的代碼改造下。

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

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

7-7，測試驗證

我們重啟Java項目以后，去瀏覽器里刷新頁面進入商品管理，然后點擊下刷新

然后進行數抓包，就可以看到返回的數據里多了一個goodCount字段。

7-8，改造vue前端代碼

我們查詢到了商品分類id對應的分類名稱了，前面Java代碼實現完，我們vue前端代碼只需要把之前顯示的分類id改為分類名稱就行了。

我們找到對應代碼，只需要修改一行代碼，然后保存即可

改這下面這樣。

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

給大家解釋下這行代碼:

這段代碼是在Vue.js項目中，特別是使用Element庫時，這段代碼是一個定義表格列el-table-column的模板語法，具體功能如下：

• 標簽定義：el-table-column 是Element 庫中用于構建表格結構的一個組件，它代表表格中的一個列。
• label屬性："類型" 是該列的標題文本，展示在列的頂部，用以標注該列數據的含義。
• align屬性："center" 指定該列內容的水平對齊方式為居中對齊。可選值還包括 "left"（左對齊）和 "right"（右對齊）。
• prop屬性："typeName" 表示該列的數據將從對應數據對象的 typeName 屬性中獲取。這意味著每一行數據將會顯示其 typeName 屬性的值。這是Vue的動態綁定特性，使得數據變化時，表格內容能自動更新。

綜上所述，此代碼段在Element UI的表格中創建了一個列，用于展示數據列表中每個項目typeName字段的值，且該列標題為“類型”，內容居中顯示。當綁定的數據發生變化時，這一列的內容也會相應更新，提供給用戶一個實時反映數據狀態的視圖。

7-9，修復搜索查詢的bug

細心的同學可能會發現，做完上面的改造后，我們的搜索功能出錯了。沒法做搜索了。比如我們輸入小，然后點擊搜索沒有反應。

是因為我們在mapper的xml里沒有寫搜索對應的模糊查詢語句。

我們把對應的代碼修改成下這樣，然后重啟項目即可。

<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>

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

八，改造商品分類列表

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

假設我們有個需要，需要顯示每個分類對應的商品個數，那么我們該怎么實現呢。今天就來帶大家實現這個功能，隨便教大家如何二開若依框架，添加自己的功能。

我們就是要在商品分類列表返回的數據里加一個goodCount字段

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

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

我這里的qcl-admin，就是你項目里的ruoyi-admin，然后再domain里先創建一個vo文件夾，然后創建GoodTypeVo類

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

我們可以借助MyBatisX插件自動生成對應的查詢標簽。

上圖可以看到，有圖標的就是xml里有對應的sql語句。沒有圖標的甚至方法名報紅色波浪線的，代碼xml里還沒生成對應的sql。 其實生成也很簡單，選中爆紅的方法名，然后按 Alt Enter快捷鍵，選則下圖所示的Generate statement 就可以快速生成了

可以看到對應的xml里生成了selectGoodTypeListVo相關的xml代碼

并且之前報錯的方法前也有了小鳥的圖標

8-2，編寫mybatis的xml文件

我們前面自動生成了xml的查詢標簽

然后我們需要把對應的sql語句粘貼進來的

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;

把上面的聯表查詢sql語句粘貼到xml里

有一點需要注意的：xml里的sql語句，要把最后的 ; 給刪除的

刪除后如下

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

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

解開后如下

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

8-3，編寫業務層

我們業務層主要就是對外提供的查詢接口。對應代碼如下圖

我們也需要在這里編寫和上面mapper層一樣的方法，所以把mapper層里的這個方法粘貼過來即可

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

然后我們的GoodTypeServiceImpl類里自動生成了如下代碼

可以看到上面代碼有個報錯，這是我們還沒有實現里面的查詢代碼的緣故。接下來實現代碼如下

到這里我們業務層的接口和實現類就定義好了，最后我們還需要去改造GoodTypeController

8-4，改造Controller

因為我們之前查詢商品類型列表沒有做聯表查詢，所以需要把商品類型的查詢語句改造下，就是把下面的代碼改造下。我這里的qcl-admin，就是你若依里的ruoyi-admin，因為我改了下項目名。

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

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

我們重啟Java項目以后，去瀏覽器里刷新頁面進入商品分類管理

然后進行數抓包，就可以看到返回的數據里多了一個goodCount字段。

8-5，改造前端代碼

我們查詢到了分類下的商品個數，前面Java代碼實現完，我們vue前端代碼也要加一列，來顯示商品個數。

我們找到對應代碼，只需要加一行代碼，然后保存即可

<el-table-column label="商品個數" align="center" prop="goodCount" />

給大家解釋下這行代碼:

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

到這里我們就可以在分類列表里查詢對應的商品個數了

8-6，修復搜索查詢的bug

細心的同學可能會發現，做完上面的改造后，我們的搜索功能出錯了。沒法做搜索了 是因為我們在mapper的xml里沒有寫搜索對應的模糊查詢語句。

我們添加如下代碼，然后重啟項目即可。

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

九，添加商品時分類改為下拉框

還記得之前給大家說的一個問題嗎，我們添加商品時，添加商品分類的地方，雖然可以填入類型ID來區分商品屬于那個分類，但是這樣對用戶來說不是很友好。

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

需求分析 接下來我們就來分析需求了，我們在添加商品時想通過下拉框來實現選擇分類。那么我們就要進行以下幾步操作

1，請求分類數據填充到下拉框里 2，把之前的輸入框改為下拉框

所以我們接下來就要來改造代碼了。

9-1，請求所有的分類數據

我們的添加商品彈窗是屬于前端vue項目的代碼，所以我們先找到添加商品彈窗對應的代碼。如下圖

那么我們改造的地方就是進入商品頁的時候，就去請求所有的分類數據，以便在彈起添加商品的彈窗時，把分類數據填充到選擇分類的選項中供用戶選擇。所以我們接下來要做的就是在good的index.vue的js代碼部分請求分類列表數據

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

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

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

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

第二步：定義請求商品分類列表的方法

然后刷新當前頁面，通過抓包可以看到我們請求鏈接里拼接上了我們的請求參數

并且成功的返回了數據

這個數據正是我們想要的分類列表。 而我們請求到的數據賦值給了typeList

那么我們接下來在要用到分類數據的地方，使用typeList即可。

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

接下來我們就來改造頁面布局了 找到添加商品時的分類輸入框如下

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

代碼其實很簡單，如下。

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

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

效果圖下

添加成功后如下

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

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

先找到對應的代碼

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

<el-form-item label="類型名稱" prop="typeId" > <el-select v-model="queryParams.typeId" placeholder="請選擇類型" 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代碼是一個表單組件，用于選擇類型名稱。具體功能如下：

使用el-form-item定義表單元素，標簽為"類型名稱"，綁定prop="typeId"用于表單驗證。 使用el-select定義下拉選擇框，綁定v-model="queryParams.typeId"實現選擇值與數據對象的雙向綁定，設置placeholder="請選擇類型"作為占位符，clearable屬性允許清空選項，@keyup.enter="handleQuery"監聽回車鍵事件觸發查詢操作，style="width: 150px;"設置下拉框寬度為150像素。 使用el-option定義下拉選項，使用v-for="item in typeList"循環遍歷typeList數組中的每個元素，將item.typeId作為選項的唯一標識符，item.typeName作為選項的顯示文本，item.typeId作為選項的綁定值。 當用戶選擇一個類型或按下回車鍵時，會觸發handleQuery方法進行查詢操作。

修改后效果圖如下：

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