【若依框架】代码天生详细教程，15分钟搭建Springboot+Vue3前后端分离项目
本日我们来借助若依来快速的搭建一个基于springboot的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.8JDK17Mysql>=5.7Mysql8Redis>=3Redis5Maven>=3Maven3Node>=12Node20.15 发起大家尽量和课程版本保持同等，避免一些版本不对应导致一些不须要的错误。
我们Java后端使用idea开发
vue3前端网站使用vscode软件开发。
大家自行下载这两款软件即可。
一，启动若依的Springboot项目
1-1，去官方下载前后端项目
我们使用idea开发者工具来去若依官网下载官方提供的springboot项目
https://img-blog.csdnimg.cn/direct/621ecc3d12f5462eadf26dca75eb1217.png
我们使用前后端分离的版本。
https://img-blog.csdnimg.cn/direct/ba92523e892f4111a3c8fca34cfb867d.png
如上图所示，我们拿到下载地址即可。
然后打开idea，如下图所示，使用get fromVCS
https://img-blog.csdnimg.cn/direct/e8e52193f76840e78c3fd1d2a73736d3.png
然后把复制的下载地址粘贴到如下图所示的地方，记得指定源码路径，安装下git。
https://img-blog.csdnimg.cn/direct/05ffdd01a6924237876ea2e83a51d81f.png
然后等待源码下载
https://img-blog.csdnimg.cn/direct/15f1c9136311442e9e3490ce69b7e3b2.png
下载乐成后会自动打开项目。
https://img-blog.csdnimg.cn/direct/36e5b14fe88b4c8490bc8d4fb2ab6292.png
正常第一次打开项目需要导入一些安装包和依靠。
1-2，mysql数据库的配置和导入
在项目的sql目次下，有我们数据库配置需要的一些东西。
https://img-blog.csdnimg.cn/direct/21cc3bfc519d4a498df7c8a8b0536b0b.png
所以我们先用idea自带的mysql管理工具，链接我们的mysql数据库，然后创建一个ruoyi的数据库。至于mysql的安装和使用idea链接mysql我这里不拆开讲了，可以去看下我Java底子入门的视频和博客条记。
https://img-blog.csdnimg.cn/direct/055b7528219a4cfe92e9e1bdf07d0cdb.png
创建好ry-vue数据库,这里数据库名最好也是用ry-vue,由于后续运行项目时官方代码里就是取得这个数据库名。创建好数据库以后，就可以实验sql下的文件了。我们先实验quartz.sql文件
https://img-blog.csdnimg.cn/direct/4e69d11ba08149d195271704cdce96df.png
我们在当前页实验sql的时候，记得ctrl+a全选当前的sql，然后点击绿色箭头实验sql
https://img-blog.csdnimg.cn/direct/ca4f8cb7949543fc81e2d79e614cdbca.png
实验完以后如下
https://img-blog.csdnimg.cn/direct/9d8aa618354d4a819bcf39a80d77f50f.png
然后同样的方式实验另外一个sql文件
https://img-blog.csdnimg.cn/direct/a88c9902fadf4cefa7897abb3c8d7f0a.png
两个sql都实验完以后，点击革新就可以看到我们乐成的导入了以下数据表
https://img-blog.csdnimg.cn/direct/678a14c4e0a24e40aec799f3b78de2a3.png
创建好数据库和数据表以后，我们需要在下图所示的地方修改myslq数据库的账号和暗码，记得改成我们自己的。
https://img-blog.csdnimg.cn/direct/418853e942814567bec0a6c6af375cb1.png
1-3，配置redis
其实配置reids很简朴，只要你电脑上已经乐成安装并启动redis，一切都保持默认即可。由于我的电脑本地redis没有设置暗码，所以不消配置reids即可，固然假如你设置了redis访问暗码，记得去下图所示的地方将修改暗码。假如和石头哥一样没有设置reids暗码，password后面空着即可。
https://img-blog.csdnimg.cn/direct/ea82963f21c140ea895f76535b218a2f.png
1-4，启动项目
如下图所示我们找到RuoYiApplication然后就可以点击绿色箭头运行项目了。
https://img-blog.csdnimg.cn/direct/5b3215af127042f8952aabbbf4ea4e47.png
启动乐成我们可以看到如下标识
https://img-blog.csdnimg.cn/direct/9523391a899d4217902aafe72b15d7c8.png
启动乐成后通过http://localhost:8080 看到如下所示，就代表若依版的springboot项目已经乐成运行了。
https://img-blog.csdnimg.cn/direct/ea1f1763cdb44f6da5ee3a2acb6f8937.png
Java后端启动乐成了，接下来我们就要启动前端vue3项目举行网站端的摆设运行了。
二，启动前端vue3项目
由于上门Java项目里的ruoyi-ui使用的是vue2开发的前端网站，所以我们想用vue3，就得使用官方提供的另外一套代码，所以这里的ruoyi-ui可以直接删除了。
https://img-blog.csdnimg.cn/direct/203d61b4a99648b8ab247fa8905280d9.png
2-1，源码下载
其着实官方的文档里提供的vue3版本的下载地址
https://img-blog.csdnimg.cn/direct/d22445d979524927b83f12efb644a5e2.png
我们点进去可以看到是gitbhub上的一个堆栈
https://img-blog.csdnimg.cn/direct/65cc4b79fe2e4411b90b0cca284f7343.png
也可以像上面Java项目一样借助idea的git下载，我们这里为了让大家学习不同的方式。就用另外一种方式教大家下载项目源码吧。
https://img-blog.csdnimg.cn/direct/1ff50d1cc2f947598ba05244e724b2ac.png
我们只需要下载zip压缩包就可以了。下载到桌面即可，然后解压。
https://img-blog.csdnimg.cn/direct/0218db1c5c574622a22dd094e42b951c.png
解压后的目次如下
https://img-blog.csdnimg.cn/direct/bdeeca66f94d4f52b4e733b92d9fbf35.png
可以看出来这是一个尺度的vue3项目。
2-2，运行项目
我们运行项目使用专业的前端开发工具vscode
其实导入项目到vscode很简朴，只需要在vscode里打开项目文件夹即可。
https://img-blog.csdnimg.cn/direct/488bea6a59604991af1579ce9267fa04.png
我们打开项目后要去安装依靠，安装依靠之前要记得安装node，我们这里使用npm i 来自动安装依靠。
https://img-blog.csdnimg.cn/direct/9f5ec8624c97479bb4ddb717791145cd.png
然后耐烦等待依靠安装完即可。安装完如下。https://img-blog.csdnimg.cn/direct/c60efc1b0e124f058ebeac339cdc125a.png
依靠安装完，就可以用npm run dev来运行项目了。运行乐成后可以看到管理后端网站的访问地址。https://img-blog.csdnimg.cn/direct/7774b916a4c7491f8380bfa15153dcd8.png
然后就可以看到管理后台的登录界面
https://img-blog.csdnimg.cn/direct/d2743ff5529d4c16a0550f4215b21995.png
到这里我们整个前后端项目就运行乐成了。
使用默认账号先登录进去看看效果
https://img-blog.csdnimg.cn/direct/9741f24add784a2a8f0a8139f6efcd62.png
三，自动天生Java和vue3代码
自动天生Java和vue代码正式若依的强大之处，接下来我就来带大家快速的实现一个对用户信息举行增编削查的Java和vue的小案例。
3-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语句里必须设置主键也就是主键一定要有。
https://img-blog.csdnimg.cn/direct/1f361f3089034787a2450d49f8c53470.png
创建好以后如下，可以看到数据库里也多了qcl_user这个表
https://img-blog.csdnimg.cn/direct/12386c79d118446a8831a236db755ebd.png
https://img-blog.csdnimg.cn/direct/f19e16e02c4e400ca8cce51af60893ee.png
然后我们点击编辑来天生对应的增编削查的代码
https://img-blog.csdnimg.cn/direct/e6bd503fbe4a4b9f8fbad4b6b0201328.png
3-2，天生Java和vue3代码
我们进入编辑后如下
https://img-blog.csdnimg.cn/direct/02ae99b1cf2748e7b5c88e07f238d4d9.png
这里全部保持默认即可。然后点击天生信息，天生信息这里我们需要做下修改
https://img-blog.csdnimg.cn/direct/f090a05178b44cba8d71fd448e6a7d90.png
修改后如下，记得上级菜单不做选择。这里一定要和石头哥一样用 qcluser 不能直接使用user由于uesr在若依自带的用户管理内里已经被使用过了。
https://img-blog.csdnimg.cn/direct/96774c8ddeb04cbcb33d0ab03cb4280e.png
然后点击提交。这样就可以天生对应的Java和vue代码了，可以点击预览查看代码
https://img-blog.csdnimg.cn/direct/c9a154eea61544d1b0ebe4c1c14a3134.png
https://img-blog.csdnimg.cn/direct/97bc6ea503a04dd9b19ba0ebd4aeaffe.png
固然我们最重要的还是要下载代码，然后把对应的代码粘贴到我们的项目里。
https://img-blog.csdnimg.cn/direct/82fc76b3e7e446fbad0b4fb0099b1981.png
3-3，把自动天生的代码插入项目
我们前面点击下载把下载好的代码解压好。解压好以后队医的代码如下。
https://img-blog.csdnimg.cn/direct/4a2100c22f3d47b1a892a1432f31ff36.png
3-3-1，实验sql文件
我们先实验slq语句，由于我们的若依后台菜单栏都是动态注入的，所以这里要先实验下sql。实验sql用idea自带的mysql管理工具即可。
https://img-blog.csdnimg.cn/direct/5e45a59843fe453d89cc31148b451ef7.png
然后实验上面的sql文件
https://img-blog.csdnimg.cn/direct/ee8d7c8302a14074806b420f04b1c513.png
实验乐成，有如下打印
https://img-blog.csdnimg.cn/direct/a084e90227934ae8b66d4144edde2353.png
3-3-2，复制Java代码到idea
然后就是复制Java代码到idea，我们在main目次里一层层的进入，复制qcluser文件夹。
https://img-blog.csdnimg.cn/direct/00c341c4bfba4610a408d6455412df90.png
然后粘贴到ruoyi-admin项目的com.ruoyi目次下即可。
https://img-blog.csdnimg.cn/direct/d1ad04bb45d348e28f4f0f3e47c89c34.png
然后就可以看到我们对应的Java代码就弄好了
https://img-blog.csdnimg.cn/direct/b1d4c1892e184b6491a968cfce8d70f3.png
3-3-3，复制mapper文件到idea
然后就回到main然后进入resources目次，复制mapper文件夹。
https://img-blog.csdnimg.cn/direct/e41e0cb9d172473787564cf92f874012.png
然后粘贴到ruoyi-admin的resources目次里。
https://img-blog.csdnimg.cn/direct/ebddd609b53b427f9a6166a87cf8ab4c.png
可以看到我们对应的mybatis的配置文件就弄好了
https://img-blog.csdnimg.cn/direct/d959ec6c13ab4451b35ddbc200e77ed8.png
3-3-4，粘贴vue3代码到vscode
接下来我们就是进入vue文件里粘贴vue3代码了
https://img-blog.csdnimg.cn/direct/3304ac1a61eb4cee80b630258fc9b313.png
这里有个api和views，我们要每个都进入，然后粘贴内里对应的代码到vue3项目对应的目次里。
首先进入api复制qcluser文件夹
https://img-blog.csdnimg.cn/direct/20fb9d844d9d41fbb2a37b8eaa64e5f6.png
然后粘贴到src下面的api目次里
https://img-blog.csdnimg.cn/direct/c16170e2075e4be9ae6b5394899711a2.png
可以看到就是我们前端对应的接口哀求的代码
https://img-blog.csdnimg.cn/direct/3ad4f640448143f08550962927691fc5.png
然后就是进入vue的views文件夹，复制qcluser
https://img-blog.csdnimg.cn/direct/78dbf95dc5504d87bf43f2c08c916a64.png
然后粘贴到vue3代码里的src下的views里
https://img-blog.csdnimg.cn/direct/01c5f1a5b21d4ff086c0f1f728981edc.png
可以看到就是我们对应页面的vue3代码
https://img-blog.csdnimg.cn/direct/7e6bc9899ab845b1901e13acdf82c5c6.png
3-4，重新运行idea的Java项目
由于vue3项目是动态的，所以vue3代码粘贴到vscode里就可以实时更新，但是Java项目粘贴完代码，要重新运行下项目。
https://img-blog.csdnimg.cn/direct/f6230d5cb2094e57bb32e258f777d0f7.png
重新启动乐成后如下
https://img-blog.csdnimg.cn/direct/51ffa20cfd6942868379e8fa5a43863a.png
然后革新我们的若依后台
https://img-blog.csdnimg.cn/direct/4f4a852c03f544e3a2c9c1c292ebf30f.png
革新后就可以看到我们的体系工具里多了一个用户管理的菜单。
https://img-blog.csdnimg.cn/direct/e3f581ca12384230b6f99ab794f5ae64.png
然后我们点击新增就可以添加数据到数据库了
https://img-blog.csdnimg.cn/direct/f99eebe69d1740e4838ef63a3fa40a31.png
可以看到我们新增数据乐成
https://img-blog.csdnimg.cn/direct/35374ebd72ce471ca943128da96381e0.png
固然也可以修改数据。比如点击修改，我们做如下修改
https://img-blog.csdnimg.cn/direct/3492a6a885a44a038cd0e05d44a4b6aa.png
可以看到数据修改乐成
https://img-blog.csdnimg.cn/direct/228572c7537248b69a06d3dda9df17cd.png
固然也可以点击删除，删除对应的数据。
到这里我们自动天生的代码就可以运行起来，并且对数据举行增编削查了。
3-5，修改菜单位置
细心的同砚可能会说了，用户管理不应该单独做一个模块吗，放在体系工具里不太好吧。接下来就教大家怎么移动菜单位置。
https://img-blog.csdnimg.cn/direct/7f82c98aa1a94796be0add9005aadc37.png
在体系管理内里有一个菜单管理，我们找到用户管理，然后点击修改。
https://img-blog.csdnimg.cn/direct/c3d1e6e748ba4ba5ab8e45f3011c7f02.png
我们可以把上级菜单改为主类目，然后给用户管理设置一个图标
https://img-blog.csdnimg.cn/direct/9f57eeb6ab19432685c3ce5947202b88.png
提交以后，记得重新革新下当前页面
https://img-blog.csdnimg.cn/direct/f490752856214db1abebb8b15fc5b4e0.png
这样就可以看到用户管理出现在了一级菜单类目。然后点击就可以对用户举行管理了。
https://img-blog.csdnimg.cn/direct/cabeaf9bbc514061bb3516a809f631eb.png
四，自界说主题样式和文案
我们偶尔候用别人的框架，肯定想自界说一些样式，颜色，图案。接下来石头哥就带大家自界说下。
4-1，自界说主题和样式
在后台的右上角，有一个入口。
https://img-blog.csdnimg.cn/img_convert/75e0cc474ee866690b686ca17a7c28e6.png
点击结构设置，就可以设置主题和颜色了
如我们把深色侧边栏改为淡色侧边栏
https://img-blog.csdnimg.cn/img_convert/d5a2d9be850ca1c64e8652f29e34596e.png
改变后如下
https://img-blog.csdnimg.cn/img_convert/3845d37be065fe5bc980c538cfc5487e.png
改变颜色，假如我们想改变按钮的颜色，就修改下主题颜色即可。
https://img-blog.csdnimg.cn/img_convert/23e13c54c570fbf6545bed7591339ddc.png
可以看出，我们按钮就从蓝色改为了橘黄色，固然你也可以改为别的颜色。
https://img-blog.csdnimg.cn/img_convert/7d088b61cab59e93d58d7b63f1a7a2bc.png
其他几个选项可以自己根据需求配置。固然也可以恢复默认
https://img-blog.csdnimg.cn/img_convert/3d4a087e402fda2b78444b8aa7ab4515.png
4-2，修改图标
可以看到我们后台网站的图标是这样的，固然这里的图标也可以换成自己的。
https://img-blog.csdnimg.cn/img_convert/fe71ce6a67c25a54ab75d31cad5608a4.png
去代码里查看，可以看到我们这里的图标用的是public目次里的图标
https://img-blog.csdnimg.cn/img_convert/ceb06a3c7cd7f0e1ecb435ce35254e07.png
我们只需要自己找一个图标，名字改成favicon并且图片的后缀也改为 .ico就行。如我这里用自己的头像来替换这个默认图标。
https://img-blog.csdnimg.cn/img_convert/e15830cb5dda3a95be371c5999ef044d.png
https://img-blog.csdnimg.cn/img_convert/08a34f7cba2dd51cd6176a91bea41024.png
替换后记得革新下网页。可以看到我们只在网站顶部替换了，但是左侧边栏的还没有替换掉。
https://img-blog.csdnimg.cn/img_convert/7f338ee43999ceb23e2265f9852d0cc2.png
去查看源码
https://img-blog.csdnimg.cn/img_convert/a0cd3757652acf2ca937c73a43a8b685.png
可以看到我们左侧边栏用的是src下的logo.png,所以这里也要替换下。
https://img-blog.csdnimg.cn/img_convert/f2e7aaddcb021d5ffe244881778aa774.png
如我们这里替换为自己的
https://img-blog.csdnimg.cn/img_convert/f43216286c14ed7fda544da8e4bb24ea.png
再革新下网页，可以看到乐成了
https://img-blog.csdnimg.cn/img_convert/b28313f898c472389bd980e4120193ee.png
4-3，vscode里修改文案
可以看到我们项目里到处都是若依的字样，那么我们就使用vscode自带的全局替换，来替换下。最左边有一个搜索框，点击下。
https://img-blog.csdnimg.cn/img_convert/600c261f0cd07a2fd51a11dcd43c66b2.png
可以搜索到整个项目里的若依字段
https://img-blog.csdnimg.cn/img_convert/587a639bf7504be380c50918af5ef5ed.png
下面的替换里输入自己替换的文字就行。然后记得点击下这个图标。
https://img-blog.csdnimg.cn/img_convert/b13b426db0d45cc1b097759e947bab4b.png
然后革新网页，就可以看到我们文案全部替换乐成了
https://img-blog.csdnimg.cn/img_convert/e3fdf99c78d7b93ce52bbf50405e68cd.png
4-4.idea里修改Java文案
我们前面一步只是修改了前端文案。还有Java后端文案需要修改下。
进入idea然后按快捷键
ctrl+shift+R 就可以弹出下面的弹窗，然后搜索若依，替换为编程小石头。再点击下全部替换。
https://img-blog.csdnimg.cn/img_convert/5cb0c83e95505ea4789e346fc2b48137.png
这样整个Java项目里若依的文案也就全部替换了。
4-5，删除数据里的文案
细心的同砚可能发现，前端网页左侧边栏里还有若依文案
https://img-blog.csdnimg.cn/img_convert/195400a41594ca3ee66c4f459e000471.png
由于侧边栏我们是从数据库里动态加载的，所以要去数据库里删除对应的数据。我们去idea里借助mysql管理工具，找到sys_menu数据表，然乎双击打开。
https://img-blog.csdnimg.cn/img_convert/2937d4abeefda77a032bfea5a6212f66.png
打开后如下
https://img-blog.csdnimg.cn/img_convert/021f9ba6582005aa0a53cf67685402ed.png
可以看到这里存的是我们左侧边栏的文案，把若依官网的这行删除即可。
选中这行，然乎点击减号
https://img-blog.csdnimg.cn/img_convert/ae1b7ace5034fe01fd0357ae1703dcdd.png
点完减号，记得点击整个绿色向上的箭头。同步下数据库。
https://img-blog.csdnimg.cn/img_convert/ae2ac2e2658ff6667caf692f666ebcbc.png
这样就删除乐成了，然后革新下后台网页。
https://img-blog.csdnimg.cn/img_convert/52809a02cb1320ac6de83628949bb7de.png
可以看到没有若依的文字了。
4-6，删除若依的链接
https://img-blog.csdnimg.cn/img_convert/aa13516530b8f102eee2e7f43c35e2e7.png
在我们的后台网页右上角有这两个图标。点击后会跳转到若依，我们这里也可以做下删除。固然整个删除需要要vue3代码里。
https://img-blog.csdnimg.cn/img_convert/75bf3448f5cd008fc9714a8d778b5a87.png
我们到vscode里找到对应的源码删除即可。然后就可以看到左上角没有了之前的两个图标
https://img-blog.csdnimg.cn/img_convert/3f372408faeb16c40a36e471cba67c9a.png
到这里我们就把若依框架改的和我们自己写的一模一样了，看不出使用框架的痕迹了
https://img-blog.csdnimg.cn/img_convert/a9413ca095bb02b0e526a9798fc246db.png
4-7，修改登录页背景图和文案
我们登录页的背景图也可以替换的
https://img-blog.csdnimg.cn/direct/75c6a7f069324df4b99ba9871fb92c8a.png
看代码可以找到我们背景图是在src目次下
https://img-blog.csdnimg.cn/direct/22a2443ff1b848a98e47d8d28b8cd22c.png
我们把自己的图片替换为和这个背景图名字一样就行了
https://img-blog.csdnimg.cn/direct/d0a9c24bc0634850b75bc3b1ba31f845.png
替换完去网页里革新下。可以看到就替换乐成了。
https://img-blog.csdnimg.cn/direct/8732120a2e3d4651987bde9e4bd083fa.png
修改底部文案。如ruoyi.vip我们可以改成biaochengxiaoshitou
https://img-blog.csdnimg.cn/direct/275b893c3c784ce191a194a146b76332.png
然后革新下网页，就替换乐成了。
https://img-blog.csdnimg.cn/direct/6e12613457a74f009200ae3fa923cba3.png
五，主子表自动天生商品多表的前后端代码
我们前面章节给大家简朴的展示了单表前后端代码的快速天生，接下来我们来实现商品管理功能
包罗：商品分类表，商品表。
我们知道一个分类下面可以对应多个商品。所以我们这两个表是主子表关系。分类表是主表，商品表是子表。
5-1，创建分类和商品表的sql语句
我们创建数据表可以直接使用idea自带的mysql可视化管理工具，也可以直接用sql语句来创建。由于我们直接导入sql语句更方便，也可以同一尺度，所以这里推荐大家使用sql语句来创建数据表。
对应的sql语句贴出来给到大家，为了方便大家学习，我这里尽量使用简朴的字段。
根据需求，我们需要创建两个表：一个是good_type（商品分类表），另一个是good（商品表）。在good表中，我们将包罗商品名、代价和图片字段，并且设置一个外键与good_type表关联，以体现一对多的关系。下面是相应的SQL语句示例：
创建商品分类表good_type和商品表 good
-- 商品类型表
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语句的方式有很多种，由于我前面创建用户表的时候给大家演示过若依后台导入了。
https://img-blog.csdnimg.cn/direct/1f361f3089034787a2450d49f8c53470.png
这一节给大家演示idea自带的mysql可视化管理工具来导入sql，技多不压身嘛，让大家多学点知识。
接下来教大家怎么打开mysql可视化工具。
1，点击idea右侧数据库的图标
2，然后点击自己的数据
3，点击图中3标识的图标。
https://img-blog.csdnimg.cn/direct/dbb97958045f45d4b6367358d029ccac.png
这个图标就是idea给我们提供的sql命令行
https://img-blog.csdnimg.cn/direct/c4dc6259fe2e4d9e9ebb13895ebc63a8.png
点开后，选这个默认的console命令行即可。
https://img-blog.csdnimg.cn/direct/fcec384c324245d48789b2e03a47e387.png
然把下面的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全选，再点击这个绿色箭头。
https://img-blog.csdnimg.cn/direct/f6ff467cb2344ee9bc1980c87531adc0.png
可以看到sql语句实验完毕
https://img-blog.csdnimg.cn/direct/7634850da1b941e7aa38800f5016e5a4.png
然后革新
![](https://img-blog.csdnimg.cn/direct/239d1c18eab04104baf77f32597e6a38.png
就可以看到我们添加的两个表了
https://img-blog.csdnimg.cn/direct/8ee0919a22e7423a86f66201f09555cd.png
5-3，天生商品管理菜单
我们使用若依的菜单管理来创建一个商品管理的菜单
https://img-blog.csdnimg.cn/direct/002f33dbb89f4388b015327e5cc53831.png
配置信息如下
https://img-blog.csdnimg.cn/direct/67c567ee5b3449048f75936facd3208f.png
点击确定后记得革新网页，可以看到多了商品管理的一级菜单
https://img-blog.csdnimg.cn/direct/d4e79bfc01bc4b95996981f7099b2b7b.png
5-4，使用若依天生前后端代码
若依的强大之处就在于根据数据表去快速的天生前后端代码。
https://img-blog.csdnimg.cn/direct/e699fa2e181044f782ebfce2188facc8.png
然后我一个个编辑
https://img-blog.csdnimg.cn/direct/ea316658f04847af8bcfa5de1b87307a.png
但是要记取一点 good_type是主表，good是子表。
5-4-1，先编辑good商品表
基本信息
https://img-blog.csdnimg.cn/direct/48ac5d36e9dd405abf371512ff6eb96f.png
字段信息如下。
必填只需要商品名和商品代价就可以了。
https://img-blog.csdnimg.cn/direct/64189e47d36249318f66390f42df984e.png
图片这里要记得选用图片上传
https://img-blog.csdnimg.cn/direct/5980fc17565b4a75b81248afbe057f70.png
天生信息
https://img-blog.csdnimg.cn/direct/2e076bbe68b8419788f814dace5c4329.png
然后点击提交
5-4-2，编辑good_type商品分类表
基本信息
https://img-blog.csdnimg.cn/direct/f51f246765a74f53ad3d764c03fe108c.png
字段信息
https://img-blog.csdnimg.cn/direct/2ad2cbdfc761440491230d5c3299e363.png
天生信息
https://img-blog.csdnimg.cn/direct/1c1cc4a8e48648c3b744bd169a4cd685.png
然后点提交。
5-4-3,主子表天生信息的对比
我们对比主表good_type和子表good天生信息的区别如下
https://img-blog.csdnimg.cn/direct/f52f2cbb13624071bfadc12838fef6b8.png
有几点要留意
1，主子表的天生包路径要一样，天生模块名也要一样。
2，主子表的天生业务吗和生乐成能名不能一样
3，主表的天生模板用 主子表 子表的天生模板用单表
4，主表的关联信息关联子表名good商品表，关联外键就是我们sql语句里的外键type_id
5-5，下载前后端代码并导入
我们前面提交后，就可以下载前后端代码了。如下图所示。
https://img-blog.csdnimg.cn/direct/9ac6a041b04e469c9177f3378b2dac68.png
下载到桌面的压缩包，记得解压下。
https://img-blog.csdnimg.cn/direct/cf0116b1f6634b48a98be0414f917185.png
5-5-1，先实验sql文件。
我们解压后的两个sql文件都要实验下，这是动态的把我们的商品管理和分类管理添加到后台的左侧菜单栏里用的。
由于我们的若依后台菜单栏都是动态注入的，所以这里要先实验下sql。实验sql用idea自带的mysql管理工具即可。
https://img-blog.csdnimg.cn/direct/5e45a59843fe453d89cc31148b451ef7.png
然后实验上面的sql文件，可以同时选中两个一起实验
https://img-blog.csdnimg.cn/direct/63b085408bff4d279541d6ca5e60e801.png
实验完有如下打印
https://img-blog.csdnimg.cn/direct/7273840249b842cd8c83caf950b5b396.png
5-5-2，复制vue3代码到项目
为了快速的复全部的vue代码，我们只需要把vue里的文件夹全部复制，然后粘贴到vscode的src目次就行。右键src可以查看src的文件夹。
https://img-blog.csdnimg.cn/direct/497bc38b41ce46eebfc7ae6c697dd6e9.png
然后把解压的vue下的api和views复制到前端源码的src下。
https://img-blog.csdnimg.cn/direct/a0c2b93c17864991a3650528ff704e1f.png
5-5-3，复制Java代码到项目
Java代码粘贴相对简朴，只需要复制解压后的main文件夹
https://img-blog.csdnimg.cn/direct/712613c84a3a476ea39bb9ce0c2a26a0.png
然后粘贴到项目的admin模块下的src下
https://img-blog.csdnimg.cn/direct/8a41bc81987c499791ab72e0f06677fa.png
然后可以看到对应的代码已经复制到项目了
https://img-blog.csdnimg.cn/direct/750e09dec34d448d86efbf5fd94aa0dc.png
记得要重启下Java项目，才会见效奥。vue项目不消重启就可以见效了。
5-6，添加数据
我们上面Java项目重启后，记得革新下网页
然后就可以看到我们添加的菜单了
https://img-blog.csdnimg.cn/direct/2712186262624066b88eeb3764082b26.png
5-6-1，添加商品分类
我们先添加商品分类试试
如添加一个水果和电子产物分类
https://img-blog.csdnimg.cn/direct/f4c72856432f4d34bb344bf9471387ad.png
https://img-blog.csdnimg.cn/direct/8dccb6ace9fb4e918a051cc1465768a1.png
添加商品分类的时候可以同步添加商品
https://img-blog.csdnimg.cn/direct/f8d12dc13b8746d5b9e7a5f51535f1a7.png
点击确定后，添加的这两个商品也会到商品管理内里
https://img-blog.csdnimg.cn/direct/3f64dae0c275444ba7baa784fadaba62.png
只不过图片要我们重新上传下
同时我们假如删除了水果分类，对应的商品苹果和香蕉也会自动删除。这在我们sql语句里有给大家剖析这句话
https://img-blog.csdnimg.cn/direct/9217c777266e4150ac996315bcc2e6b5.png
5-6-2，添加商品
然后再去添加商品试试，可以看到我们添加商品的时候，有一个图片上传功能。是不是感觉若依很厉害啊。
https://img-blog.csdnimg.cn/direct/042281df5baf4c61b06963924eba2173.png
然后添加数据，点击提交时会有一个问题。
https://img-blog.csdnimg.cn/direct/3914d0f76507499aa9939a5fcbbd1bc2.png
假如分类里我们直接填水果，会报错。
https://img-blog.csdnimg.cn/direct/f5df7c88efef44dc9a8f9688e5271f9e.png
是由于我们数据库里存在的是分类的id而不是分类名，所以要先去分类表里找到水果分类的id，这里需要填入水果分类的id
https://img-blog.csdnimg.cn/direct/39a9ea3308ee45049beac8507aa041d9.png
细心的同砚可能会说了，这里填水果不比填7更好吗，这是由于若依目前对这类联表查询天生代码有一定的局限性，后面我会教大家把分类这里改为下拉框，来实现分类的选择功能。就是从我们分类表里选择分类。
六，改造商品列表
我们商品列表里的类型显示的是类型id，但是对于用户来说，还是显示类型名称更友好一些。
https://img-blog.csdnimg.cn/direct/e2327db6f8df4248bb3013c419c9fcb4.png
https://img-blog.csdnimg.cn/direct/bdad334937af40a9aae255d4edb96d8a.png
虽然类型id和类型名是对应的，但是我们前端显示给用户类型id总觉得怪怪的，所以我们需要给用户显示类型名。所以我们这里也是要用到关联查询的。
6-1，联表查询的sql语句
我们通过抓包可以看到之前的商品列表返回数据如下
https://img-blog.csdnimg.cn/direct/f6abc8e8701e4a0c8d5469ae94540472.png
就是返回了商品good表里的全部字段，但是我们要显示类型名称，就需要再多返回一个商品分类good_type表里的type_name字段。
那么我们先来编写对应的联表查询语句
select good.*,good_type.type_name from
good ,good_type where good.type_id = good_type.type_id;
我们实验上面的sql语句，就可以看到查询的效果里多了类型名。
https://img-blog.csdnimg.cn/direct/080b8f731664442cb1cdeb00dabccd4e.png
所以我们就要借助这个sql语句来改造代码了。
6-2，新建vo类和mapper方法
我们在admin的good里的domain目次下新建vo文件夹然后再新建GoodVo类，并且要继承good表
https://img-blog.csdnimg.cn/direct/099849fbd6274b028bfb3f6d9cd745f7.png
然后在GoodVo里界说typeName用来承接类型名称
https://img-blog.csdnimg.cn/direct/1d456730906840e7b5af0ccfaec8d5fb.png
然后在GoodMapper里新建一个联表查询的方法
https://img-blog.csdnimg.cn/direct/3c26e6fcddef4556ad09bfd9c007acb1.png
我们可以借助MyBatisX插件来自动天生对应的xml查询标签。接下来先教大家安装MyBatisX插件，进而提升我们的开发效率。
6-3，安装mybatis插件
可以根据自己的Mapper接口里的方法，快速的天生mybatis查表的xml文件
点击setting，然后去Plugins里搜索mybatis，安装MyBatisX
https://img-blog.csdnimg.cn/direct/0064cc83fbac44259fc302214bfc474d.png
安装乐成后回到我们的Mapper接口里，可以看到方法前面都会多一个小鸟的图标
https://img-blog.csdnimg.cn/direct/34f6783c3d60494cb9597fdafbc149ab.png
有图标的就代码mapper的xml里有对应的sql语句。没有图标的乃至方法名报红色波浪线的，代码xml里还没天生对应的sql。
其实天生也很简朴，选中爆红的方法名，然后按 Alt+Enter快捷键，选则下图所示的Generate statement 就可以快速天生了
https://img-blog.csdnimg.cn/direct/80d93c6f33c548d28fdf8ce5d2d0593e.png
可以看到对应的xml里天生了selectGoodListVo相关的xml代码
https://img-blog.csdnimg.cn/direct/0027e6922fc54bd591e570756f3ecea5.png
并且之前报错的方法前也有了小鸟的图标
https://img-blog.csdnimg.cn/direct/9d57ca74538043c58e1846c9aaa46752.png
6-4，把sql写入到mybatis的xml里
我们上面自动天生了xml标签，接下来就是把一开始的联表查询sql语句插入到xml里
select good.*,good_type.type_name from
good ,good_type where good.type_id = good_type.type_id;
把上面的sql插入如下位置
https://img-blog.csdnimg.cn/direct/c5695de7fa0d407d86ce8597c92c7b62.png
留意事项：记得把sql语句最后的 ： 删除了
https://img-blog.csdnimg.cn/direct/ecb0b1b62a59464c88ace01e1cffac38.png
我们写好联表查询的sql以后，还有一个问题，就是我们返回的vo类里使用的是驼峰式命名，但是sql里的使用的是下划线命名，为了保持同等，我们需要把mybatis配置文件做下修改。
https://img-blog.csdnimg.cn/direct/b7db5284ec8a4a988baf822863aa38d0.png
修改也很简朴，打开admin里的mybatis配置文件，把下面的代码解释解开就行了。
https://img-blog.csdnimg.cn/direct/4f3bbddb46f14735a31180920bd56776.png
解开后如下
https://img-blog.csdnimg.cn/direct/ca0dd2ec920e497b86b3641c2fc2d299.png
这里只要解开，就会自动把下划线命名改为驼峰式命名，保持字段名一样。
6-5，编写业务层代码
我们业务层重要就是对外提供的查询接口。对应代码如下图
https://img-blog.csdnimg.cn/direct/e39eca97a0ba4e6581b11e44b623dcec.png
我们也需要在这里编写和上面mapper类里一样的方法，所以把mapper层里的这个方法粘贴过来即可
https://img-blog.csdnimg.cn/direct/6bdc956815a344a1b4be990f6ad9e42a.png
选中方法名，然后按 Alt+Enter快捷键，选则下图所示的Implement method 就可以快速天生了
https://img-blog.csdnimg.cn/direct/ab272b61abf44e2198bb53c85e90414c.png
然后我们的GoodServiceImpl类里自动天生了如下代码
https://img-blog.csdnimg.cn/direct/43d42a5ef06b4eb7a87460e27047d855.png
可以看到上面代码有个报错，这是我们还没有实现内里的查询代码的缘故。接下来实现代码如下
https://img-blog.csdnimg.cn/direct/d5aba62b23f84f82aee13b76317cbe4d.png
到这里我们业务层的接口和实现类就界说好了，最后我们还需要去改造GoodController
6-6，改造Controller
由于我们之前查询商品列表没有做联表查询，所以需要把商品的查询语句改造下，就是把下面的代码改造下。
https://img-blog.csdnimg.cn/direct/6f57dd4513f54236bced733dce75b458.png
我们不再用上面的单表查询，而是调用我们前面界说的联表查询。
我们把之前的解释掉，重写如下代码
https://img-blog.csdnimg.cn/direct/2e28fa3e3d2743b688eed72fdc596ac7.png
到这里就全部改造好了，然后重启下Java项目。
6-7，测试验证
我们重启Java项目以后，去欣赏器里革新页面进入商品管理，然后点击下革新
https://img-blog.csdnimg.cn/direct/54d66f7f014a41ecb7ecb647174fceeb.png
然后举行数抓包，就可以看到返回的数据里多了一个goodCount字段。
https://img-blog.csdnimg.cn/direct/e796c3b9f55c45d98b59eee8a5b261fc.png
6-8，改造vue前端代码
我们查询到了商品分类id对应的分类名称了，前面Java代码实现完，我们vue前端代码只需要把之前显示的分类id改为分类名称就行了。
https://img-blog.csdnimg.cn/direct/174d38be59164c5083ec98d7861aafd3.png
我们找到对应代码，只需要修改一行代码，然后生存即可
https://img-blog.csdnimg.cn/direct/db4706118f75431ebc0af6e67ad46ae6.png
改这下面这样。
<el-table-column label="类型" align="center" prop="typeName" />
https://img-blog.csdnimg.cn/direct/6e01a890b8c24c7ca093b11fbf0c69e2.png
给大家表明下这行代码:
这段代码是在Vue.js项目中，特别是使用Element库时，这段代码是一个界说表格列el-table-column的模板语法，详细功能如下：
[*] 标签署义：el-table-column 是Element 库中用于构建表格结构的一个组件，它代表表格中的一个列。
[*] label属性：“类型” 是该列的标题文本，展示在列的顶部，用以标注该列数据的寄义。
[*] align属性：“center” 指定该列内容的程度对齐方式为居中对齐。可选值还包括 “left”（左对齐）和 “right”（右对齐）。
[*] prop属性：“typeName” 表示该列的数据将从对应数据对象的 typeName 属性中获取。这意味着每一行数据将会显示其 typeName 属性的值。这是Vue的动态绑定特性，使得数据变化时，表格内容能自动更新。
综上所述，此代码段在Element UI的表格中创建了一个列，用于展示数据列表中每个项目typeName字段的值，且该列标题为“类型”，内容居中显示。当绑定的数据发生变化时，这一列的内容也会相应更新，提供给用户一个实时反映数据状态的视图。
6-9，修复搜索查询的bug
细心的同砚可能会发现，做完上面的改造后，我们的搜索功能出错了。没法做搜索了。比如我们输入小，然后点击搜索没有反应。
https://img-blog.csdnimg.cn/direct/4abc5017481a451c8d5c64ab6ce67600.png
是由于我们在mapper的xml里没有写搜索对应的含糊查询语句。
https://img-blog.csdnimg.cn/direct/661037eacf434560bad801a2c026f624.png
我们把对应的代码修改成下这样，然后重启项目即可。
<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>
如，我们只搜索一个手，就可以查到包罗手的商品
https://img-blog.csdnimg.cn/direct/c069e4b01e194f49bc43498e00e324d7.png
七，改造商品分类列表
我们上面显示商品分类列表。
https://img-blog.csdnimg.cn/direct/0cc12f74f2bc42fa80b4701f13cd67f8.png
假设我们有个需要，需要显示每个分类对应的商品个数，那么我们该怎么实现呢。本日就来带大家实现这个功能，恣意教大家如何二开若依框架，添加自己的功能。
https://img-blog.csdnimg.cn/direct/8983bdac37b24c9aba779af81dfe472a.png
7-1，确定需求
我们就是要在商品分类列表返回的数据里加一个goodCount字段
https://img-blog.csdnimg.cn/direct/6f8bdc20cf5a4fff998d98ddaec62289.png
之前的返回是没有这个字段的。所以就要开始我们的代码改造之旅了
7-2，新建vo类和mapper方法
我这里的qcl-admin，就是你项目里的ruoyi-admin，然后再domain里先创建一个vo文件夹，然后创建GoodTypeVo类
https://img-blog.csdnimg.cn/direct/c20d6e01bfe04d898dfc2ca712fe7e5e.png
GoodTypeVo类代码很简朴，就是界说一个我们要返回的goodCount字段，然后天生get和set方法。
然后在GoodTypeMapper接口里添加新的联表查询方法，如下
https://img-blog.csdnimg.cn/direct/2b0c97bf5cee4566b02f6cc2a87f84a3.png
我们可以借助MyBatisX插件自动天生对应的查询标签。
上图可以看到，有图标的就是xml里有对应的sql语句。没有图标的乃至方法名报红色波浪线的，代码xml里还没天生对应的sql。
其实天生也很简朴，选中爆红的方法名，然后按 Alt+Enter快捷键，选则下图所示的Generate statement 就可以快速天生了
https://img-blog.csdnimg.cn/direct/3817274e12214592b1243f053518cc0b.png
可以看到对应的xml里天生了selectGoodTypeListVo相关的xml代码
https://img-blog.csdnimg.cn/direct/bee6fa04d6c94cd382d681926117fa2b.png
并且之前报错的方法前也有了小鸟的图标
https://img-blog.csdnimg.cn/direct/520676a01c22437eb328414316dd2361.png
7-3，编写mybatis的xml文件
我们前面自动天生了xml的查询标签
https://img-blog.csdnimg.cn/direct/bee6fa04d6c94cd382d681926117fa2b.png
然后我们需要把对应的sql语句粘贴进来的
select good_type.type_name, count(good.good_id) as good_count
from good_type left join good on good_type.type_id = good.type_id
group by good_type.type_name;
把上面的联表查询sql语句粘贴到xml里
https://img-blog.csdnimg.cn/direct/32c3f2cad3de48ba938f3fdb4ca2355d.png
有一点需要留意的：xml里的sql语句，要把最后的 ; 给删除的
删除后如下
https://img-blog.csdnimg.cn/direct/485d5af6837a4f989bf9e61194d4f495.png
7-4，打开mybatis解释
我们写好联表查询的sql以后，还有一个问题，就是我们返回的vo类里使用的是goodCount 驼峰式命名，但是sql里的good_count 下划线命名，为了保持同等，我们需要把mybatis配置文件做下修改。
https://img-blog.csdnimg.cn/direct/25277cc277dd47aa93a5ecd74914eece.png
修改也很简朴，打开admin里的mybatis配置文件，把下面的代码解释解开就行了。
https://img-blog.csdnimg.cn/direct/4f3bbddb46f14735a31180920bd56776.png
解开后如下
https://img-blog.csdnimg.cn/direct/ca0dd2ec920e497b86b3641c2fc2d299.png
这里只要解开，就会自动把下划线命名改为驼峰式命名，保持字段名一样。
7-5，编写业务层
我们业务层重要就是对外提供的查询接口。对应代码如下图
https://img-blog.csdnimg.cn/direct/063e59ae27b04b04ae9d492964592903.png
我们也需要在这里编写和上面mapper层一样的方法，所以把mapper层里的这个方法粘贴过来即可
https://img-blog.csdnimg.cn/direct/bc82052581cd4a0aa916582bdbc1468f.png
选中方法名，然后按 Alt+Enter快捷键，选则下图所示的Implement method 就可以快速天生了
https://img-blog.csdnimg.cn/direct/3f096ba60f194b6ea7ddd68b8edadb47.png
然后我们的GoodTypeServiceImpl类里自动天生了如下代码
https://img-blog.csdnimg.cn/direct/7a4ada966b6e410cb0f2b3a8fa78174b.png
可以看到上面代码有个报错，这是我们还没有实现内里的查询代码的缘故。接下来实现代码如下
https://img-blog.csdnimg.cn/direct/d5aba62b23f84f82aee13b76317cbe4d.png
到这里我们业务层的接口和实现类就界说好了，最后我们还需要去改造GoodTypeController
7-6，改造Controller
由于我们之前查询商品类型列表没有做联表查询，所以需要把商品类型的查询语句改造下，就是把下面的代码改造下。我这里的qcl-admin，就是你若依里的ruoyi-admin，由于我改了下项目名。
https://img-blog.csdnimg.cn/direct/dd29e8f7b1654916872bbe0d9f0960af.png
我们不再用上面的单表查询，而是调用我们前面界说的联表查询。
我们把之前的解释掉，重写如下代码
https://img-blog.csdnimg.cn/direct/9a5ccd89a8ca4de6aea93bd9ef23da9c.png
到这里就全部改造好了，然后重启下Java项目。
7-7，测试验证
我们重启Java项目以后，去欣赏器里革新页面进入商品分类管理
https://img-blog.csdnimg.cn/direct/c8dc58071a5245c9b168947c00638fd1.png
然后举行数抓包，就可以看到返回的数据里多了一个goodCount字段。
https://img-blog.csdnimg.cn/direct/15f421a8adf24e7b9ba719dee51123c7.png
7-8，改造前端代码
我们查询到了分类下的商品个数，前面Java代码实现完，我们vue前端代码也要加一列，来显示商品个数。
https://img-blog.csdnimg.cn/direct/98af7e0e17a64fb4a7ac20370c8a7b71.png
我们找到对应代码，只需要加一行代码，然后生存即可
https://img-blog.csdnimg.cn/direct/40b559685ac843939b16550fe0a3c236.png
<el-table-column label="商品个数" align="center" prop="goodCount" />
给大家表明下这行代码:
这段代码是Vue.js中Element UI框架的模板语法，用于界说一个表格列（）的配置。详细说明如下：
label=“商品个数”：设置该列的标题为“商品个数”。
align=“center”：指定该列内容的程度对齐方式为居中对齐。
prop=“goodCount”：指定了该列数据的绑定属性名为goodCount，意味着这一列会显示表格数据中每个对象的goodCount属性值。
综上，此代码片断界说了一个表格列，用于展示每行数据中商品的数目，且文本居中对齐。
到这里我们就可以在分类列表里查询对应的商品个数了
6-10，修复搜索查询的bug
细心的同砚可能会发现，做完上面的改造后，我们的搜索功能出错了。没法做搜索了
是由于我们在mapper的xml里没有写搜索对应的含糊查询语句。
https://img-blog.csdnimg.cn/direct/7bb292b832094798b8cb350704d7d39d.png
我们添加如下代码，然后重启项目即可。
https://img-blog.csdnimg.cn/direct/af80df6bb8f44d13b6320f79a3b44c4a.png
如，我们只搜索一个图，就可以查到图书
https://img-blog.csdnimg.cn/direct/3c0e231b0f5843fa902bd891b1dcc4b0.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]