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

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

上一节我们用代码生成器生了一个CRUD界面，用的数据表my_job是模仿原eladmin数据库中的表格sys_job，如下

注意我们用的主键是job_id(上图标红)，我们用eladmin代码生成器生成的代码都是基于这个表，于是我们在后端的MyJob.java中与my_job关联是这样的：

别问我类与数据表是如何直接关系的，这涉及到Spring Data JPA的知识，不知道的小伙伴可以学习一下该方面的知识!!!
而回看eladmin中原生Job.java与sys_job是这样关联的:

再回看eladmin中domain的其他类，比如Dept.java等

全部也都是转换成id，这是为什么呢？后面有什么影响，我们接下来看

2. 删除操作时出现bug

首先回到第二节学习完成后，生成的界面，如下：

首先新增一个岗位，填写如上图，按1，2，3步骤点击确定后

可以看到，已经生成了一个test岗位，如上图所示，我们点击删除，会出现以下提示

这段提示的意思是我们提交删除的id为null，为什么会这样？这就是因为我们在domain中定义MyJob.java与表格my_job主键用的是jobId，见第1节

为什么会这样，我们回到前面代码寻求答案，

组件crudOperation中放置了修改与删除按钮，这个组件是在src->components->Crud->UD.operation.vue中定义的

打开UD.operation，可以看到主要的删除操作在函数crud.doDelete(data)中，而crud在src->components->Crud->crud.js中

我们继续来看crud.js，利用vscode的分屏功能，我们可以看到doDelete(data)操作依赖于getDataId()操作，而getDataId(data)函数取的值实际上是data中的isField

我们接下去继续看，isField是个什么属性，我们在crud中查找isField，可以发现：

由上图可以看出，传进crud中的option其实就是defaultOptions，经过了几次转换而以，而我们关注的idField其实对应的是“id"，这说明eladmin对于任何表的处理都需要把主键名称转换为"id"，不然就会出现删除错误，因为crud是公用的模块。那我们现在已经用代码生成器生成了代码，怎么办呢？

3.修改代码以适应eladmin

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

首先修改MyJob,将eladmin中job.java中id的定义粘过来就好。

后端重启eladmin，IDEA马上就会报错，如下：

这时MyJobServiceImpl会报错找不到getJobId()，相应的位置会标红，将报错标红对应的地方都改成getId()。

接下去修改dto->MyJobDto中的ID(原来为jobId)

修改MyJobService中的findById(Long id)，好像不用改也行，也顺便改一下吧！看起来顺一点！

接下去修改MyJobServiceImpl中的findById

同时，别忘了修改前端代码src->views->gen->index.vue

重启后端，记得删除target（防止加载之前编译生成的class)

这时我们再来删除test,可以看到终于可以删除了！真是很费力气啊！

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

好了，不用这么麻烦，大家只需把数据库中表myjob主键字段job_id改为id，再利用我们第（2）节的方法重新生成代码就好了 ！

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