最近在啃若依,看到代码生成这块想着先把最基础的练手跑一遍,顺便把过程截了图。表、导入、配置、生成、挪代码、执行 SQL、测试,一圈下来其实不复杂,但中间有几个地方要是不注意,生成的页面点开是空的。

先建张表

表随便什么工具建都行,我用的是平时连数据库那个,库是 cx-study,表叫 my_student。

三个字段:id 整型主键自增,注释写”编号”;name varchar(30),注释”姓名”;sex char(1),注释”性别(0男、1女、2未知)”。没别的了,就是最普通的一张表。

建表

保存前把注释填上,这个很关键。若依读不到注释的话,字段在页面上就直接显示成英文,name 就真的是 name,看着特别怪。填完看一眼表结构,确认自增和字符集都对,再往下走。

表结构

导进来

启动前后端,登录进去,左边 系统工具 → 代码生成,点”导入”。

弹窗里会把库里能用的表都列出来,我这里一共 19 条,排第一的就是刚建的 my_student,创建时间对得上,说明是实时从库里读的。勾上,确定。

导入表

如果表没出现在这个列表里,八成是没写表注释——这是后来才反应过来的,一开始还以为是权限问题。

字段信息

导入完列表里多一条记录,点”修改”进去,有三个标签页。先看字段信息。

这里每行一个字段,能改的东西不少:描述、Java 类型、属性名、插入编辑列表查询四个勾、查询方式、必填、显示类型、字典类型。我第一次点进来有点懵,其实大部分保持默认就行,只有两处要动。

name 的查询方式改成 LIKE,不然搜索框必须输全名才能查到;sex 的显示类型换成下拉框,字典类型选”用户性别”。字典这个挺省事,表里存的 0、1、2 直接对应男、女、未知,不用自己写转换。

至于 id,主键没什么可配的,插入编辑都勾着也不影响,页面不会让你填。

字段信息

生成信息

切到第二个标签。这页决定了代码生成到哪个包、目录长什么样,填错了后面很麻烦。

我填的是:模板选”单表(增删改查)”,毕竟就一张表;包路径 com.ruoyi.system;模块名 system;业务名 student;功能名”学生信息”;上级菜单挑”系统管理”;前端类型选 Vue3 Element Plus 模版;生成方式用 zip 压缩包。

前端类型别选错,项目是 RuoYi-Vue3 就选 Vue3 那个,选成 Vue2 生成的语法根本对不上。

包路径、模块名、业务名这三样是拼在一起的,最后前端页面会是 views/system/student/index.vue,接口文件是 api/system/student.js。心里有数就好,反正生成的压缩包里目录已经排好了。

生成信息

下载下来

点”生成代码”,浏览器直接下 my_student.zip。

列表里”实体”那列显示 MyStudent,类名是表名转的驼峰。名字要是不满意,这时候改还来得及,生成之后再改就得每个文件挨个动了。

生成记录

解压开三块东西:main 是后端,Controller、Service、实现类、Mapper 接口、实体、XML 都在里面;vue 是前端的两个文件;剩下一个 studentMenu.sql,是菜单和按钮权限的 SQL。第一次看到这个 SQL 还挺意外,原来菜单不是自动加的,得自己执行。

解压

挪进项目

前端没什么好说的,对着目录拷:api/system/student.js 放进 RuoYi-Vue3/src/api/system/,views/system/student/index.vue 放进 RuoYi-Vue3/src/views/system/。

前端目录

后端按包名来,com.ruoyi.system 对应 src/main/java/com/ruoyi/system/,XML 丢 resources/mapper/system/。我图省事直接把整个 main 目录合并进了 ruoyi-admin,包名一致所以能扫到,编译启动都没报错。不过按若依本来的分层,业务代码搁 ruoyi-system 模块更规矩些,这点算是偷懒了。

后端的文件

菜单 SQL 得自己跑

代码放进去了,页面上还是找不到入口,原因就在那个 SQL 上——菜单存在 sys_menu 表里。

翻了一下内容,先插一条父菜单,parent_id 是 6,也就是挂在”系统管理”底下,然后是查询、新增、修改、删除、导出五个按钮权限,perms 分别是 system:student:list、add、edit、remove、export。这几个值要和 Controller 上的 @PreAuthorize 对上,不然按钮会被 v-hasPermi 藏起来,你还以为是没生成对。

执行 SQL

执行完刷新页面。要是菜单还是不出来,退出重新登录一次,让前端重新拉一遍路由。

跑一遍

刷新后”系统管理”下面就有”学生信息”了,地址 /system/student。

页面该有的都有:上面姓名输入框加性别下拉做搜索,中间一排按钮,下面表格,操作列是修改和删除。刚进来是”暂无数据”。

列表页

点新增,姓名 WYS-2,性别选”男”。性别那几个选项来自刚才配的字典,0 男 1 女 2 未知,跟表注释对得上。顺手开了下 Network,提交走的是 /student 的 POST。

新增

确定之后右上角提示”新增成功”,列表里也出来了。删的时候会先弹确认框,”是否确认删除学生信息编号为’2’的数据项?”——这句里的”学生信息”就是配置里填的功能名,所以说填的时候别随便写。

删除确认

再改一条,姓名 WYS-3,性别改成未知。确定,列表跟着变。

修改

最后试搜索,姓名里输 -3。因为查询方式设的是 LIKE,WYS-3 能被捞出来;要是当初没改,这里就得输全名。

模糊搜索

到这儿增删改查全通了,自己基本没写代码。

几个坑

注释一定要写,表和字段都要。这是最容易被忽略的,等生成出来发现页面上一堆英文再回头改表,就得重新导一遍。

重新生成会覆盖。改了字段配置再点一次生成,index.vue 里你手写的东西就没了,业务逻辑尽量往外挪,别直接改生成出来的页面。

菜单 SQL 只能跑一次。跑两遍 sys_menu 里就多一套重复的,想重来先把 parent_id = 6 那批删干净。

还有个感受:这东西省的是重复劳动,不是省思考。字段怎么校验、查询要不要特殊处理、页面要不要加别的交互,它替你想不了,最后还得自己回去改。不过对刚接触若依的人来说,先拿它生成一版能跑的东西,再顺着读代码,比自己从零写快太多了。


广告
广告正在加载中...
暂不开放评论,如对本文有任何疑问或建议,请联系apple@mr-wu.top
All Tags