小伙伴们,第(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原生岗位管理同样的界面呢!注意关注我的下一节内容,前端与后端的修改技巧一次性用最通俗易懂的方式教给你们。觉得好记得点个赞,你们的支持是我更新动力!下一节再见!