开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理

时间:2024-03-20 18:47:56

1.注意domain中定义主键的区别

上一节我们用代码生成器生了一个CRUD界面,用的数据表my_job是模仿原eladmin数据库中的表格sys_job,如下
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
注意我们用的主键是job_id(上图标红),我们用eladmin代码生成器生成的代码都是基于这个表,于是我们在后端的MyJob.java中与my_job关联是这样的:
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
别问我类与数据表是如何直接关系的,这涉及到Spring Data JPA的知识,不知道的小伙伴可以学习一下该方面的知识!!!
而回看eladmin中原生Job.java与sys_job是这样关联的:
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
再回看eladmin中domain的其他类,比如Dept.java等
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
全部也都是转换成id,这是为什么呢?后面有什么影响,我们接下来看

2. 删除操作时出现bug

首先回到第二节学习完成后,生成的界面,如下:
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
首先新增一个岗位,填写如上图,按1,2,3步骤点击确定后
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
可以看到,已经生成了一个test岗位,如上图所示,我们点击删除,会出现以下提示
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
这段提示的意思是我们提交删除的id为null,为什么会这样?这就是因为我们在domain中定义MyJob.java与表格my_job主键用的是jobId,见第1节
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
为什么会这样,我们回到前面代码寻求答案,
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
组件crudOperation中放置了修改与删除按钮,这个组件是在src->components->Crud->UD.operation.vue中定义的
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
打开UD.operation,可以看到主要的删除操作在函数crud.doDelete(data)中,而crud在src->components->Crud->crud.js中
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
我们继续来看crud.js,利用vscode的分屏功能,我们可以看到doDelete(data)操作依赖于getDataId()操作,而getDataId(data)函数取的值实际上是data中的isField
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
我们接下去继续看,isField是个什么属性,我们在crud中查找isField,可以发现:
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
由上图可以看出,传进crud中的option其实就是defaultOptions,经过了几次转换而以,而我们关注的idField其实对应的是“id",这说明eladmin对于任何表的处理都需要把主键名称转换为"id",不然就会出现删除错误,因为crud是公用的模块。那我们现在已经用代码生成器生成了代码,怎么办呢?

3.修改代码以适应eladmin

3.1 直接修改后端与前端代码

首先修改MyJob,将eladmin中job.java中id的定义粘过来就好。
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
后端重启eladmin,IDEA马上就会报错,如下:
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
这时MyJobServiceImpl会报错找不到getJobId(),相应的位置会标红,将报错标红对应的地方都改成getId()。
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
接下去修改dto->MyJobDto中的ID(原来为jobId)
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
修改MyJobService中的findById(Long id),好像不用改也行,也顺便改一下吧!看起来顺一点!
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
接下去修改MyJobServiceImpl中的findById
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理

同时,别忘了修改前端代码src->views->gen->index.vue
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
重启后端,记得删除target(防止加载之前编译生成的class)
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理
这时我们再来删除test,可以看到终于可以删除了!真是很费力气啊!
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理

3.2 重新修改数据库表,重新利用代码生成器

好了,不用这么麻烦,大家只需把数据库中表myjob主键字段job_id改为id,再利用我们第(2)次课的方法重新生成代码就好了 !
开源框架EL-ADMIN开发自己的 web应用(3)-代码生器生成的CRUD界面中的一个坑处理

但是为什么要踩一次坑?也算是深入理解eldmin吧!只有踩坑,学习源码,才能真正进步!
填完坑,下一次课,我们继续前进,如果帮到你,记得给我点赞,你们的支持是我前进的动力!