极简低代码开发指南

本小节以项目分解和项目进度为例, 详细说明如何在本项目中进行低代码实现模块开发. 最终效果如下图所示:

第一步创建表

首先, 设计两张表,分别是项目分解表和项目进度表, 如下图所示.

project_work_item 项目分解表

sql

CREATE TABLE `project_work_item` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) DEFAULT NULL COMMENT '工作项名称',
  `memo` varchar(255) DEFAULT NULL COMMENT '工作项说明',
  `status` varchar(20) DEFAULT NULL COMMENT '状态',
  `stage_id` bigint(20) DEFAULT NULL COMMENT '所属阶段',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

project_work_progress 项目进度表

sql

CREATE TABLE `project_work_progress` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) DEFAULT NULL COMMENT '进度项名称',
  `memo` varchar(255) DEFAULT NULL COMMENT '进度项说明',
  `progress` int(20) DEFAULT NULL COMMENT '进度值',
  `stage_id` bigint(20) DEFAULT NULL COMMENT '所属阶段',
  `work_item_id` bigint(20) DEFAULT NULL COMMENT '所属工作项',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

第二步模型定义

进入低代码设计器, 添加项目分解菜单数据, 如下图所示:

点击项目分解行的设计按钮,进入模型设计界面填写字段信息,如下图所示

TIP

注意: 表名要与数据库中定义的表名完全一致

从上图可见, 这里定义的字段与数据库表是一一对应的, 而每一个字段需要绑定一个输入控件. 由于输入框和多行文本较为简单, 这里主要演示一下单项选择框. 如下图所示:

上图中的字段定义被标记的说明如下:

组件类型: 单项选择框, 即有备选数据且只可以选择其中一个值的控件
校验规则: 是一组预定义的校验规则, 包括必填, IP校验, 端口校验, 时间格式校验等
选项列表: 这里是提供备选项数据的备选数据源, 如何生成备选项的备选数据源在第三步详细说明
其他未说明的属性, 要么易于理解,比如提交,只读,隐藏等; 要么在后续章节中详细说明, 比如级联相关的影响字段与依赖字段等

点击预览按钮, 可以看到运行效果, 如下图所示:

第三步实现后端备选数据源

在上一步中, 有一个备选数据源不知从何而来, 奥秘就在后端的注解上. 如下图所示:

新建一个类, 然后添加普通的空方法, 在其上添加上@OptionsFilter这个注解即可被低代码引擎所扫描到. 其中的字段填写说明如下:

name: 页面显示的名称
tableName: 表名的前缀. 用于界面实现分组显示, 如果它是跨模块的, 此处应填写common
location: 即数据源, 可以是枚举类型, 也可以是数据库字典对应的服务类的bean

这与前面通用接口的Options是一致的, 只不过低代码需要用注解进行包装, 以便前端能够感应到它

第四步挂载菜单

进入权限->菜单管理, 在左侧树节点项目管理,点击+按钮, 如下图所示:

在弹出的模态窗口中, 填写菜单数据, 如下图所示:

TIP

输入参数中, 菜单别名,路径以及权限码是vue中规定的路由必填内容, 就以数据库表的主名填写即可. 后续定义菜单参考这里的约束说明.
图标有很多备选项, 找一个接近表意的即可
菜单类型选择低代码菜单, 路由的备选项中会自动显示设计时定义的菜单,选中即可
菜单的顺序可调, 在左侧树节点进行拖放操作就能进行菜单显示顺序的调整
定义完菜单, 刷新一下浏览器即可使菜单生效

第五步扩展事件

在涉及到多表关联的业务模型时, 因为业务逻辑的不确定性是无法避免编程的, 但可以尽量封装通用逻辑以减少代码编写量. 低代码的编程思想是将核心单表的增删改查封装起来, 通过暴露扩展事件进行关联业务的实现. 实际是AOP的思想. 扩展事件包括: 保存前,保存后,编辑前,编辑后,删除前,删除后,查询前,查询后. 接口定义如下图所示:

如果不实现扩展事件, 低代码引擎只能将原生的数据库数据呈现到界面, 比如枚举值不会显示描述信息, 数据库字典只会显示id数字,不会显示名称信息等. 下面就以项目阶段服务的查询后与编辑前事件实现页面显示的转换. (这本质就是好比面向Spring MVC全量代码编程时vo与po数据属性的转换机制)

5.1 创建WorkItem服务类

创建一个WorkItemService服务类, 如下图所示:

5.2 实现扩展方法

使用扩展方法实现拦截, 在返回页面前进行数据转换处理. 如下图所示:

由此可见, 低代码引擎封装了增删改查的业务逻辑, 只需要关注核心业务逻辑即可. 大大减少了工作量.

TIP

当前的低代码引擎对于应对页面不太复杂的功能模块还是绰绰有余的:

它不局限于单表增删改查, 也满足多表关联的处理, 非常的灵活
免除了程序员编写增删改查的样板代码, 只关注业务逻辑的实现, 真正诠释了低代码的定义
在下一个版本(Matrix - Shine)中将会集成一个完全开源的带有可拖拽定义控件设计器的低代码引擎, 除了补充矩阵星云的能力,更将体现矩阵星云面向模块的强大构建与组装能力