今天我们来借助若依来快速的搭建一个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
软件和开发环境官方只是给我们提供一个推荐，建议大家尽量和右边的课程版本保持一致。
官方推荐 课程版本建议大家尽量和课程版本保持一致，避免一些版本不对应导致一些不必要的错误。
我们Java后端使用idea开发
vue3前端网站使用vscode软件开发。
大家自行下载这两款软件即可。
这里安装redis和node的时候有些注意事项给大家简单说说。
安装软件注意事项我们安装redis和node的时候都需要配置环境变量，其实我们在安装的过程中，就可以直接勾选上，这样就可以免去自己再单独配置环境变量的麻烦了。
所以不管安装redis和node时，只要看到PATH的地方，一定要记得都勾选上。
redis记得勾选PATH
如果你找不到安装包，我也给大家提供了安装包，去评论区看置顶评论就可以拿到
二，启动若依的Springboot项目和vue3项目 2-1-1，去官方下载前后端项目我们使用idea开发者工具来去若依官网下载官方提供的springboot项目
在项目的sql目录下，有我们数据库配置需要的一些东西。
创建好ry-vue数据库,这里数据库名最好也是用ry-vue,因为后续运行项目时官方代码里就是取得这个数据库名。创建好数据库以后，就可以执行sql下的文件了。我们先执行quartz.sql文件
创建好数据库和数据表以后，我们需要在下图所示的地方修改myslq数据库的账号和密码，记得改成我们自己的。
其实配置reids很简单，只要你电脑上已经成功安装并启动redis，一切都保持默认即可。由于我的电脑本地redis没有设置密码，所以不用配置reids即可，当然如果你设置了redis访问密码，记得去下图所示的地方将修改密码。如果和石头哥一样没有设置reids密码，password后面空着即可。
如下图所示我们找到RuoYiApplication然后就可以点击绿色箭头运行项目了。
由于上门Java项目里的ruoyi-ui使用的是vue2开发的前端网站，所以我们想用vue3，就得使用官方提供的另外一套代码，所以这里的ruoyi-ui可以直接删除了。
我们这里用到的node，所以要确保你node安装成功，并且配置好环境变量。
我们运行项目使用专业的前端开发工具vscode
其实导入项目到vscode很简单，只需要在vscode里打开项目文件夹即可。
我们有时候用别人的框架，肯定想自定义一些样式，颜色，图案。接下来石头哥就带大家自定义下。
项目中要到的图标，图片，背景图我给大家放到评论区了
在后台的右上角，有一个入口。
可以看到我们后台网站的图标是这样的，当然这里的图标也可以换成自己的。
可以看到我们项目里到处都是若依的字样，那么我们就使用vscode自带的全局替换，来替换下。最左边有一个搜索框，点击下。
我们前面一步只是修改了前端文案。还有Java后端文案需要修改下。
进入idea然后按快捷键
ctrl+shift+R 就可以弹出下面的弹窗，然后搜索若依，替换为编程小石头。再点击下全部替换。
细心的同学可能发现，前端网页左侧边栏里还有若依文案
我们登录页的背景图也可以替换的
自动生成Java和vue代码正式若依的强大之处，接下来我就来带大家快速的实现一个对用户信息进行增删改查的小案例。我们先讲单表和主子表生成代码，然后再讲树形表生成代码。
4-1，创建用户表我们这里以一个用户表为例，首先就是去若依后台，创建一个数据表。这也是若依的强大之处，可以快速的创建数据表。
建表语句先给到大家。
我们借助若依提供的功能来实现数据表的创建，这里qcl_user是我们的表名，大家最好和石头哥保持一致。点击系统工具，然后点击代码生成，点击新建，把上面的sql语句复制到这里即可。
注意事项：我们的sql语句里必须设置主键也就是主键一定要有。
创建好以后如下，可以看到数据库里也多了qcl_user这个表
我们进入编辑后如下
然后点击提交。这样就可以生成对应的Java和vue代码了，可以点击预览查看代码
我们前面点击下载把下载好的代码解压好。解压好以后队医的代码如下。
我们先执行slq语句，因为我们的若依后台菜单栏都是动态注入的，所以这里要先执行下sql。执行sql用idea自带的mysql管理工具即可。
然后就是复制Java代码到idea，我们在main目录里一层层的进入，复制qcluser文件夹。
然后粘贴到ruoyi-admin项目的com.ruoyi目录下即可。
然后就回到main然后进入resources目录，复制mapper文件夹。
接下来我们就是进入vue文件里粘贴vue3代码了
然后粘贴到src下面的api目录里
然后就是进入vue的views文件夹，复制qcluser
然后粘贴到vue3代码里的src下的views里
由于vue3项目是动态的，所以vue3代码粘贴到vscode里就可以实时更新，但是Java项目粘贴完代码，要重新运行下项目。
到这里我们自动生成的代码就可以运行起来，并且对数据进行增删改查了。
4-5，修改菜单位置细心的同学可能会说了，用户管理不应该单独做一个模块吗，放在系统工具里不太好吧。接下来就教大家怎么移动菜单位置。
我们前面章节给大家简单的展示了单表前后端代码的快速生成，接下来我们来实现商品管理功能
包含：商品分类表，商品表。
我们知道一个分类下面可以对应多个商品。所以我们这两个表是主子表关系。分类表是主表，商品表是子表。
我们创建数据表可以直接使用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语句的方式有很多种，因为我前面创建用户表的时候给大家演示过若依后台导入了。
接下来教大家怎么打开mysql可视化工具。
1，点击idea右侧数据库的图标
2，然后点击自己的数据
3，点击图中3标识的图标。
我们把上面的sql复制到mysql可视化管理工具里，然后ctrl+a全选，再点击这个绿色箭头。
就可以看到我们添加的两个表了
我们利用若依的菜单管理来创建一个商品管理的菜单
若依的强大之处就在于根据数据表去快速的生成前后端代码。
基本信息
生成信息
基本信息
我们对比主表good_type和子表good生成信息的区别如下
我们前面提交后，就可以下载前后端代码了。如下图所示。
我们解压后的两个sql文件都要执行下，这是动态的把我们的商品管理和分类管理添加到后台的左侧菜单栏里用的。
因为我们的若依后台菜单栏都是动态注入的，所以这里要先执行下sql。执行sql用idea自带的mysql管理工具即可。
为了快速的复所有的vue代码，我们只需要把vue里的文件夹全部复制，然后粘贴到vscode的src目录就行。右键src可以查看src的文件夹。
Java代码粘贴相对简单，只需要复制解压后的main文件夹
我们上面Java项目重启后，记得刷新下网页
然后就可以看到我们添加的菜单了
我们先添加商品分类试试
如添加一个水果和电子产品分类
同时我们如果删除了水果分类，对应的商品苹果和香蕉也会自动删除。这在我们sql语句里有给大家解析这句话
然后再去添加商品试试，可以看到我们添加商品的时候，有一个图片上传功能。是不是感觉若依很厉害啊。
树形表是一种数据库表结构，用于存储具有层级关系的数据，比如组织结构、分类目录、菜单，省市等。
这里以公司部门层级结构作为演示，实现对部门信息的增删改查。
首先通过sql代码生成树表（必须要有id,parent_id,name他们对应树结构的子节点，父节点，和label文本）
新建数据库表结构的sql语句如下
CREATE 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，然后就看到成功的添加了部门表
先导入department 表
然后去修改里面的信息。
1，基本信息
只需要改下作者就行。
2，字段信息
保持默认即可
3，生成信息
然后点提交，就可以生成对应的Java和vue代码了
然后点下载即可
解压后，还是下面的样子，
2，复制Java代码到Java源码里
3，复制vue代码到vue源码里
然后重启Java项目，刷新网页。可以看到部门信息菜单就生成了
我们商品列表里的类型显示的是类型id，但是对于用户来说，还是显示类型名称更友好一些。
我们通过抓包可以看到之前的商品列表返回数据如下
那么我们先来编写对应的联表查询语句
select good.*,good_type.type_name from good ,good_type where good.type_id = good_type.type_id;我们执行上面的sql语句，就可以看到查询的结果里多了类型名。
我们在admin的good里的domain目录下新建vo文件夹然后再新建GoodVo类，并且要继承good表
可以根据自己的Mapper接口里的方法，快速的生成mybatis查表的xml文件
点击setting，然后去Plugins里搜索mybatis，安装MyBatisX
有图标的就代码mapper的xml里有对应的sql语句。没有图标的甚至方法名报红色波浪线的，代码xml里还没生成对应的sql。
其实生成也很简单，选中爆红的方法名，然后按 Alt+Enter快捷键，选则下图所示的Generate statement 就可以快速生成了
可以看到对应的xml里生成了selectGoodListVo相关的xml代码
并且之前报错的方法前也有了小鸟的图标
我们上面自动生成了xml标签，接下来就是把一开始的联表查询sql语句插入到xml里
select good.*,good_type.type_name from good ,good_type where good.type_id = good_type.type_id;把上面的sql插入如下位置
修改也很简单，打开admin里的mybatis配置文件，把下面的代码注释解开就行了。
我们业务层主要就是对外提供的查询接口。对应代码如下图
我们也需要在这里编写和上面mapper类里一样的方法，所以把mapper层里的这个方法粘贴过来即可
选中方法名，然后按 Alt+Enter快捷键，选则下图所示的Implement method 就可以快速生成了
然后我们的GoodServiceImpl类里自动生成了如下代码
可以看到上面代码有个报错，这是我们还没有实现里面的查询代码的缘故。接下来实现代码如下
因为我们之前查询商品列表没有做联表查询，所以需要把商品的查询语句改造下，就是把下面的代码改造下。
我们不再用上面的单表查询，而是调用我们前面定义的联表查询。
我们把之前的注释掉，重写如下代码
我们重启Java项目以后，去浏览器里刷新页面进入商品管理，然后点击下刷新
然后进行数抓包，就可以看到返回的数据里多了一个goodCount字段。
我们查询到了商品分类id对应的分类名称了，前面Java代码实现完，我们vue前端代码只需要把之前显示的分类id改为分类名称就行了。
我们找到对应代码，只需要修改一行代码，然后保存即可
给大家解释下这行代码:
这段代码是在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 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>如，我们只搜索一个手，就可以查到包含手的商品
我们上面显示商品分类列表。
我这里的qcl-admin，就是你项目里的ruoyi-admin，然后再domain里先创建一个vo文件夹，然后创建GoodTypeVo类
上图可以看到，有图标的就是xml里有对应的sql语句。没有图标的甚至方法名报红色波浪线的，代码xml里还没生成对应的sql。
其实生成也很简单，选中爆红的方法名，然后按 Alt+Enter快捷键，选则下图所示的Generate statement 就可以快速生成了
我们前面自动生成了xml的查询标签
把上面的联表查询sql语句粘贴到xml里
删除后如下
我们写好联表查询的sql以后，还有一个问题，就是我们返回的vo类里使用的是goodCount 驼峰式命名，但是sql里的good_count 下划线命名，为了保持一致，我们需要把mybatis配置文件做下修改。
我们业务层主要就是对外提供的查询接口。对应代码如下图
因为我们之前查询商品类型列表没有做联表查询，所以需要把商品类型的查询语句改造下，就是把下面的代码改造下。我这里的qcl-admin，就是你若依里的ruoyi-admin，因为我改了下项目名。
到这里就全部改造好了，然后重启下Java项目。
我们重启Java项目以后，去浏览器里刷新页面进入商品分类管理
我们查询到了分类下的商品个数，前面Java代码实现完，我们vue前端代码也要加一列，来显示商品个数。
给大家解释下这行代码:
这段代码是Vue.js中Element UI框架的模板语法，用于定义一个表格列（）的配置。具体说明如下：
label="商品个数"：设置该列的标题为“商品个数”。
align="center"：指定该列内容的水平对齐方式为居中对齐。
prop="goodCount"：指定了该列数据的绑定属性名为goodCount，意味着这一列会显示表格数据中每个对象的goodCount属性值。
综上，此代码片段定义了一个表格列，用于展示每行数据中商品的数量，且文本居中对齐。
到这里我们就可以在分类列表里查询对应的商品个数了
8-6，修复搜索查询的bug细心的同学可能会发现，做完上面的改造后，我们的搜索功能出错了。没法做搜索了
是因为我们在mapper的xml里没有写搜索对应的模糊查询语句。
还记得之前给大家说的一个问题吗，我们添加商品时，添加商品分类的地方，虽然可以填入类型ID来区分商品属于那个分类，但是这样对用户来说不是很友好。
需求分析
接下来我们就来分析需求了，我们在添加商品时想通过下拉框来实现选择分类。那么我们就要进行以下几步操作
1，请求分类数据填充到下拉框里
2，把之前的输入框改为下拉框
所以我们接下来就要来改造代码了。
9-1，请求所有的分类数据我们的添加商品弹窗是属于前端vue项目的代码，所以我们先找到添加商品弹窗对应的代码。如下图
我们要请求分类数据，就要先去api目录下的type.js里找到查询分类列表的方法。如下图所示。
第二步：定义请求商品分类列表的方法
接下来我们就来改造页面布局了
找到添加商品时的分类输入框如下
代码其实很简单，如下。
<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上。
效果图下
既然改了，那我们一步改到位
把搜索部分的类型id的输入框也改为分类名的下拉框，提升用户体验。
这段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方法进行查询操作。
修改后效果图如下：
