JeecgBoot(四)| Online表单开发
JeecgBoot提供了一系列低代码模块,Online表单开发就是其中之一。
前端导入表
在MySQL中创建测试数据:
CREATE TABLE `test` (
`id` int NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`name` varchar(30) DEFAULT NULL COMMENT '姓名',
`sex` varchar(2) DEFAULT NULL COMMENT '性别 {男:1,女:2}',
`age` int DEFAULT NULL COMMENT '年龄',
PRIMARY KEY (`id`) USING BTREE
) ;
INSERT INTO `jeecg-boot`.`test` (`name`, `sex`, `age`) VALUES ('赵', '男', '16');
INSERT INTO `jeecg-boot`.`test` (`name`, `sex`, `age`) VALUES ('钱', '女', '17');
INSERT INTO `jeecg-boot`.`test` (`name`, `sex`, `age`) VALUES ('孙', '女', '15');
INSERT INTO `jeecg-boot`.`test` (`name`, `sex`, `age`) VALUES ('李', '男', '18');
INSERT INTO `jeecg-boot`.`test` (`name`, `sex`, `age`) VALUES ('周', '男', '19');
INSERT INTO `jeecg-boot`.`test` (`name`, `sex`, `age`) VALUES ('吴', '女', '20');
INSERT INTO `jeecg-boot`.`test` (`name`, `sex`, `age`) VALUES ('郑', '男', '17');
INSERT INTO `jeecg-boot`.`test` (`name`, `sex`, `age`) VALUES ('王', '女', '18');
创建好测试数据之后,在页面上点击:在线开发–Online表单开发–导入数据库表:
在弹出框中选中新增的表test,点击生成表单。
代码生成器
JeecgBoot通过代码生成器直接生成前台端代码,非常方便。
选中新生成的表单,在页面上点击代码生成
代码生成目录:默认的文件夹目录就是jeecg_config.properties中project_path配置的文件夹目录。
表名:数据库中的表名。
实体类名:java代码中的类名。
包名:java代码中的包名,会加上jeecg_config.properties中的bussi_package做为前缀。
生成成功之后,可以在目录/home/twyc/code/org/jeecg/modules/test
下找到对应的代码:
├─
controller├─
entity├─
mapper├─
service├─
vue│
TestList.vue└─
│ ├─
modules│
└─
TestForm.vue│
└─
TestModal__Style#Drawer.vue│
└─
TestModal.vue
前面4个文件夹就是后端代码,在目录jeecg-boot-module-system/src/main/java/org/jeecg/modules
下创建test文件夹,把这4个放到test目录下面。
后面的vue就是前端代码,其中TestForm.vue和TestModal__Style#Drawer.vue分别表示Test页面是以弹出框形式还是侧边抽屉形式展现,二者任选其一即可。
在目录src/views下面创建test文件夹,把vue下的内容放到test目录下面。
然后重启前后端。
页面编辑
有了代码之后,需要新增一个页面,在页面中点击:系统管理–菜单管理–新增
把新增的页面放在异常页下面。
菜单路径:就是浏览器的访问相对路径。
前端组件:就是views到TestList.vue的路径,比如这里的TestList.vue路径是src/views/test/TestList.vue
,写成test/TestList即可。
页面授权
有了页面之后,还需要授权,在页面中点击:系统管理–角色管理-对应角色-授权
现在的登录用户是admin,就给admin授权。
授权之后,刷新就可以在异常页面下看到测试页面。
问题
目前这里有2个问题。
第1个问题就是前端请求的时候,会默认发送createTime做为sql语句排序,所以修改一下前端代码src/mixins/JeecgListMixin.js
:
/* 排序参数 */
isorter:{
// column: 'createTime',
// order: 'desc',
},
第2个问题就是在新增数据的时候,jeecg-boot-module-system/src/main/java/org/jeecg/modules/test/entity/Test.java代码主键ID类型是ASSIGN_ID,改成AUTO就可以了:
/**主键ID*/
@TableId(type = IdType.AUTO)
@ApiModelProperty(value = "主键ID")
private java.lang.Integer id;