一个简单的需求

为了学习 Spring Boot + VUE的基本操作增删查改（CRUD），让我们设计一个简单的用户需求。

我们需要设计一个学生信息登记表，内容包括学号，姓名，性别，出生年月，专业，爱好，个人简介。先这么多吧，当然实际的系统远比这些要复杂。

开始以前让我们分析一下这个需求如何来实现。当然你可以设计一张表，每个字段对应需要记录的需求的每一项，你觉得很简单是不是，但是这里面有一些坑。

一个是编码的问题，例如性别，如果你让每个学生自己填写，可能有些人填写的是“男”，有些人填写的是“男生”，这样统计所有的性别是“男”的时候，就会不准确。专业也存在这个问题，有些人填写“计算机科学与技术”，有些人填写“计科”，这样在统计专业人数或者查找的时候，也会造成不准确。

所以这个时候我们的【字典管理】就发挥作用了。我们可以在字典库中给每个专业编写一个代码，在系统中用代码表示每个专业，这样就不会出现一个专业出现两个名称的问题，而且后续不管这个专业如何修改名称（修改专业，单位名称是系统中经常遇到的应用需求），编码总是不变，所以可以方便修改编码对应的名称。

创建数据库中的学生信息表--student

打开navicat，新建表，不断点击【添加字段】，输入字段的名称等信息

 需要注意几个问题：

1、表的第一个字段添加id，设置成bigint，20位长度，下面设置成增加递增，另外设置成键值，保证足够长度，用于编辑和删除时标识每一条记录

2、表的字段要选择合适的数据类型，具体数据类型可以 MySQL 数据类型 | 菜鸟教程。

3、字段用小写，两个单词的话，用下划线分割，例如学号是student_id

4、后面注释一定要填写好，将来会对应到生成的页面中；

5、表的注释也要填写好。

 点击保存，会提示输入表的名称，表的名称也是用小写，单数的形式。

 然后就可以在表的列表中看到我们创建的表了，双击可以打开表，可以试着输入一些数据。

 下面是添加空记录，添加完确认保存。注意我们性别和专业都是设置的编码，因此只能输入数字。爱好也是输入编码，但是可以输入多个，用“,”分割。

至此，数据库中的表我们已经创建好了。

生成增删查改（CRUD create read update delete）页面

启动redis，RuoYi后端和前端。

用admin/admin123登陆系统

进入系统后，我们先维护一下我们的【字典管理】，可以看到，已经有用户性别了，我们可以直接使用，点击sys_user_sex,可以进去看看分别是男编码0，女编码1。

维护字典库 

然后我们分别添加爱好student_hobby和专业student_major。

点击上部的【新增】

 弹出新增字典数据的界面，字典名称中输入中文名称，字典类型中输入英文名称，点【确定】

 找到我们新添加的爱好（第一页没有到第二页查找）

然后点击字典类型下面我们输入的student_hobby， 打开维护字典student_hobby，再点击上部的【新增】，输入字典student_hobby中的每个爱好的编码，例如我们添加爱好的旅游编码是2，显示的排序是2，然后确定。

 就可以看到所有的爱好的信息列表。并可以对每个项进行修改，删除和添加新的项，以及调整显示的先后顺序。

 同样的方式，我们添加专业编码student_major

 

生成student表的增删查改（CRUD）界面

 打开菜单的系统工具，然后点击代码生成，我们看到代码生成的界面。

首先要把我们需要生成的增删查改的表student导入进来。点击【导入】

 选择我们的student表，然后确定。

 可以看到，student表已经导入进来了，可以编辑了，通过编辑相应的信息后才能生成代码和预览生成的代码。让我们点击student表后面对应的【编辑】

 编辑界面需要配置java和vue需要的相关信息，分为三个选项页面，默认是第二个打开。我们先从第一个选项页开始，第一个是基本信息，分别表示的表名称，表描述，实体类名称对应java后端的实体类，我们可以保持默认。

 第二个选项页面是字段信息，这里面的信息比较多，好在大部分默认的不用改变。我们从前面开始看：

字段列明和字段描述分别对应表中的字段名称和我们后面对应输入的注释，

后面的几列不用修改，

插入这一列是配置哪些页面需要显示在新增的界面中，默认所有的字段都在新增插入。

编辑这一列是那些数据需要放置到编辑界面中，一般保持默认就可以，ID不用编辑是因为是启动增加的。

列表这一列是将来显示界面在每一行列表显示的字段，因为页面宽度有限，我们选择重要的，字段中的信息不是太长的在这一列中显示，否则这个数据列表的每一行会很长，不方便查看，所以我们不显示个人简介。

查询这一列是生成的页面查询部分的条件包含的内容，我们设置允许按照姓名、专业和出出生日期，为条件查询，其他不包括了，其中姓名选择支持模糊查询，在查询方式中选择“LIKE”。出生日期我们希望选择一个范围，所以查询方式我们选择BETWEEN。

显示类型这一列设置将来新增和编辑页面每个字段的显示类型，默认是文本框，期中，有字典编码的，例如性别，设置成下拉框，不能是文本框让用户选择，后面对应的字典类型选择字典库中的性别，同样的将专业设置成下拉框，对应字典类型设置成刚才我们维护的字典库中的专业名称，爱好设置复选框，支持用户多选，可以在爱好字典库中选择多个爱好，出生日期选择日期控件，以达到输入的日期格式是规范的。

字段这个选项页面配置的信息比较多，要仔细检查和核对。

 生成信息配置页面我们生成模板选择默认的单表（增删改查）在将默认的生成包的com.ruoyi.system修改成com.ruoyi.student，生成模块名由默认的system修改成student，上级菜单我们先随便选择一个，将来添加新的菜单后再修改。

设置好以后，点击【提交】

然后，我们就可以点击student对应行后面的【生成代码】

系统提示下载生成的 ruoyi.zip

打开下载目录，将ruoyi.zip解压缩，可以看到包括三个部分，一个是后端java的部分main，一个是前端的vue，一个是添加菜单的sql文件。

 后端添加student模块

我们添加一个我们自己的模块student。

首先，我们在RuoYi_Vue_master目录下创建一个student目录，然后在student目录下创建一个src目录，然后再把其他模块，例如ruoyi-system目录下的pom.xml拷贝过来，节省我们编写的麻烦。

 然后，把我们生成后下载的文件，解压后的main目录拷贝到这个src目录下，

 完成这些，进入Idea，应该成了这样

 双击pom.xml文件（注意是student目录下pom.xml，不是项目总的pom.xml，就是靠student最近的下面那个pom.xml文件），

配置文件的作用我们讲过一个概念，其中parent表示这个模块的父级信息，因为我们的student同ruoyi-system同一个级别，所以这里不用修改。

artifactId这个需要修改，将原来的ruoyi-system修改成我们的student，介绍这里将system系统模块修改成学生管理模块，修改完成后大概这样，保存。

注意此时看一下，student还是细字体，而ruoyi-system是粗字体，这是因为我们还没有把student添加到总项目的模块中。

打开项目总的配置文件pom.xml，就是把所有的模块收起，只看到一个，或者找项目最下面的那个pom.xml，双击打开

把系统模块部分拷贝一份到下面，然后把artifactId这里修改成student，就是添加我们的student依赖到各个模块使用，然后把下面的模块列表添加上student（把ruoyi-system这行拷贝下来修改成student），保存。这样项目的总的配置文件修改好了。

然后，还要把student添加到项目结构的模块中。

 在Idea打开 【项目结构】（Ctrl+Alt+Shift+S或者菜单的文件下面的项目结构）

 点这个加号，添加模块，然后导入模块

选择RuoYi-Vue-master我们刚才准备好的student目录

然后选择从外部模型导入，Maven，点完成

 此时，student已经变成了同ruoyi-system同样的粗体，点击右侧的Maven，也可以看到模块中已经包含了student。说明student已经融合到的后端项目中了。

 此时，还有一个问题要处理，因为web的入口，就是controller，整个项目都是集中在ruoyi-admin模块的src/main/java/com/ruoyi/web/controller目录下，集中管理，但是我们看一下，生成的模块中，controller是在student目录下的，所以还要把那里的controller迁移过来。

具体方法如下：

在student目录下，选中controller目录，右键，剪切。

 然后到ruoyi-admin目录下，选中congtroller，右键，粘贴，选择将软件包移动到此处

 粘贴完成后，congtroller下面还有剪切过来的student下的controller，我们把这个controller修改一下名称，方法如下。选中controller，右键，重构，重命名，

 修改成student，如下

此时，可能会报错，找不到import的部分，

 我们点击ruoyi-admin模块的配置文件pom.xml文件，

 然后打开，找到依赖这里，把代码生成拷贝下来，然后修改ruoyi-generator成为student，下面这样。

 然后点击右侧的Maven，选中ruoyi-admin模块，在选择左上角的重新加载模块，让我们刚才添加的配置生效。

 此时报错的红色部分应该是消失了。一切显得正常了。

此时重新启动RuoYi后端项目，让我们所有的修改生效

 看到下面的状态显示ruoyi正常启动，那就OK了。

后端添加页面只所以这么麻烦，一个是我们重新添加了一个模块，后续如果这个模块再添加新的页面，就没有这么复杂了，另外一个随着你对这些操作逐步熟悉，就会非常简单了。

 前端添加student

前端添加student相对简单，就是把生成的vue目录下的api和views目录拷贝到ruoyi-ui目录下的src目录下，你可以看到这个目录下，应该也有一个api和views，提示是否覆盖，覆盖就可以。

 期中，api是操作数据的目录，views是页面的目录。我们打开这两个目录，应该能看到，里面都增加了一个student目录。

添加菜单

我们进入数据库管理工具navicat，选择查询-新建查询，注意数据库必须是在ry-vue下，然后把生成的studentMenu.sql文件的内容拷贝到这里，Ctrl+A全部选中，点击运行已选择的，把文件内容全部执行。

 然后进入系统，到系统管理下的菜单管理，

 点击新增，然后添加一个一级目录学生管理

上级菜单选主目录，菜单名称输入学生管理，路由输入student，然后点击【确定】

 这时，都系统管理中找到我们的学生管理菜单项，我们当时临时放到系统管理中了，这时，修改学生管理，把上级菜单设置成我们刚建立的学生管理。点击【确定】

刷新页面，就可以看到学生管理下面有个学生信息了。

 这里我们在数据库输入的编码，性别，专业，爱好，已经根据字典库翻译过来了。查询和现实字段也按照我们设置的成为了对应的字段。

 你可以新增，修改和删除对应的记录，在页面操作后，可以去数据库查看一下。