开源框架EL-ADMIN开发自己的 web应用（2）-利用代码生成器生第一个CRUD界面

小伙伴们，第（1）节的内容之后，我们可以成功启动eladmin了，现在需要进一步利用eladmin来创建自己的增删改查界面了，话不多说，直接来操作

0 界面效果

这里为了方便理解，我们直接选取eladmin自带的一个模块进行讲解，启动eladmin后，点击系统管理->岗位管理可以看到基本的界面结构如下，有增删改查的各项操作

点击新增按钮可以看到弹出的对话框如下

现在我们就来模拟创建一个相同的界面，通过eladmin自带的代码生成器可以很快实现这个效果。

1 创建数据表

我们模拟eladmin已经创建好的表格，自己来创建一个新的表格，首先用SQLyog打开第（1）节创建的数据库eladmin123，选择一个模拟的表格sys_job(也可以模拟别的表格，这里只是举个例子，学习其他开源框架都可以这样做）

为了方便我们模仿创建，我们可以利用SQLyog数据表导出SQL的功能，选中表sys_job按右键如下操作


按照上图选择保存置“C:\Users\Administrator\Desktop\1.sql”，点击导出即可生成1.sql，然后用记事本或其他代码编辑器，推荐用Notepad++(本人用得还蛮爽），然后将其中的内容粘贴到SQLyog主界面，并做如下修改：

看到了吧!三个标红的位置换成我们自己的表名"my_job"，全部选中运行，就可以模拟sys_job生成自己的表格了，对于想自定义表的，建议可以参考这种方式学习一下eladmin中的其他表字段的定义方式，导出的sql中都写得非常清楚，不用自己重头敲代码。
生成的表格数据长这样，与sys_job一样：

2 代码生成器配置

准备好表格后，我们进入eladmin的主页面就可以看到已经生成的my_job表格了。

进入代码生成器的具体的路径为系统工具->代码生成，可以看到my_job已经显示在界面上，点击配置
表中的job_id,name,enable,job_sort字段按下图进行设置

这里的关联字典job_status指的是eladmin字典管理->job_stauts对应的两种状态一个是true,一个是false，如下：

另外表的其他四个参数create_by,update_by,create_time,update_time,设置如下

这里说明一下：
列表：如果勾选会显示在前端的table中
表单：如果勾选会显示在新增和编辑的form表单中
日期注解：可以配置自动创建时间
数据字段：一般用于单选、多选、下拉列表

参考官方说明，我们来配置其他选项

注意这里前端路径，我填的是“D:\vuejs_dev\project\eladmin_learn\eladmin-web\src\views\gen”，小伙伴们要根据自己的前端项目所在目录进行填写，之后按如下顺序进行点击

就会弹出提示框生成成功
我们可以在后端项目中发现生成了一个gen模块

同时在前端项目中也自动生成了新模块，用vscode打开可以看到src->api下生成了myJob.js

同时组件自动生成在src->views->gen下

完成后记得IDEA重启后端，这样新生成的后端代码才能生效。

3 配置菜单

接下来配置自己的菜单

注意上面标红的的权限标识是对应后台权限设置的（关于权限设置，后面会有专题来讲）

路由地址对应前端项目src->api->myJob.js,
组件名称对应前端项目src->view->gen->index.vue中的name，如下图

按钮部分是自动生成的，不用改，接下来填好后，直接点确定

哈哈，按照上面的步骤认真走下来，就可以看到已经生成我们自己的菜单了

虽然菜单项是有了，但是要显示，还需要配置角色，如下图操作

注意在已登录的超级管理员下选中我的岗位管理，注意把前面的勾点上。接下来刷新页面，很快菜单栏中就有了我们自己的“我的岗位管理”，点进去，终于生成我们想要的界面，它长这样

点击新增看一下

似乎与eladmin原生的岗位管理有所区别，对此官方有说明，代码生成器只能完成80%的工作，其他的工作需要小伙伴们自己完成。那么如何修改为与eladmin原生岗位管理同样的界面呢！注意关注我的下一节内容，前端与后端的修改技巧一次性用最通俗易懂的方式教给你们。觉得好记得点个赞，你们的支持是我更新动力！下一节再见！