对AgileBpm低代码平台的整体逻辑梳理

本文章基于AgileBpm低代码平台开发文档，代码及个人理解

AgileBpm整体项目逻辑划分比较清楚，能按照开发文档对各个部分进行基本的了解。

Agilebpm模块分析

1. 基础模块 Base
2. 平台模块 Platform
3. 业务对象+表单模块 Bus+Form
4. 前端模块 Bpm-explorer较详细分析
5. 模块间依赖关系

 

1. 基础模块BASE

 

2. 平台模块Platform

2.1鉴权项目模块

2.2 org 组织架构管理模块

2.3 sys 系统功能模块

 

3. 业务对象+表单模块

3.1 业务对象模块

业务对象支持一对多、多对多、一对一、多层关联关系（学校-班级-学生…），业务对象多表来自不同数据源，并支持多数据源分布式事务

 

3.2 表单模块

表单是业务对象的展示层，依赖业务对象模块

      在前端平台进行0代码开发时，一般都是先进行业务实体和业务对象的创建（此时也会在后台数据库进行对应table的同步），然后按照之前建的业务对象进行表单的生成，可以选择几个固定模板（单列，二列，三列，四列），生成完后还可以再自己进行类似于Word方式的调整。

模板生成表单

表单的调整

 

4. 前端较详细分析

目前调研的结果：AgileBpm低代码平台是重前端，轻后端的状态。

 

前端部分代码包括了：assets、bpm、bpmplugin、build、bus、demo、flow-editor、form、org、sys。assets包括了前端所需要的资源，bpm里包括了项目的一些页面的定义，bpm plugin为bpm相关插件，包含用户代理等，build包括一些grid.js、vue.js、ngEdit.js文件，bus是业务实体的相关页面，flow-editor是流程构建逻辑，form是表单编辑逻辑、org是组织结构、sys是系统逻辑。

AgileBpm使用的Web框架主要是：Bootstrap

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它是由动态CSS语言less写成。

Bootstrap 包的内容

AgileBpm使用的Javascript框架有：

（1）jQuery 1.11.3

在多处使用，主要有jQuery.Toast，jQuery.extend等，提供提示框等功能。

（2）Vue JS

整个项目引入了vue的BaseService、Tools、App、FormService。BaseService主要提供post和get请求、FormService在表单管理中使用，可以用来进行表单的构建。

Vue实现表单的简单逻辑如下：

红色线条为后端数据传递，蓝色为外部扩展，schema和context是后端的数据对象。Schema是配置内容，它通过 Vue 的根容器传递给对应的表单控件；而 context 则用于处理其他需要后端读取的数据，例如一些代码中可能会根据不同的用户角色进行处理，则我们可以把这部分信息也传递给 JS 便于控制。

（3）Angular JS

html是代表静态页面的，所以如果要做动态页面，就得用jsp、php、asp、.net这类语言。AngularJS可以让html也可以具有动态页面的特点了。Angular JS的作用简单说就是把后台的json值直接用html进行渲染，然后html的操作又直接形成json传回后台。Angular JS在AgileBpm中广泛使用。

主要的命令有ng-controller、ng-model、ng-click/ng-show等，例如ng-controller起到了过滤器的作用，可以对角色鉴权后判断是否有权限访问。

AgileBpm使用的工作流引擎是Activiti

Activiti5是由Alfresco软件在2010年5月17日发布的业务流程管理（BPM）框架，它是覆盖了业务流程管理、工作流、服务协作等领域的一个开源的、灵活的、易扩展的可执行流程语言框架。Activiti基于Apache许可的开源BPM平台，创始人Tom Baeyens是JBoss jBPM的项目架构师，它特色是提供插件，开发人员可以通过插件直接绘画出业务流程图。 

 

Activiti主要就是实现表单对应流程图的拖拉创建及配置，建好后可以进行流程的流转。

5. 模块间依赖关系

 

（在开发文档中作者描述WF为流程模块，但实际并未找到单独的WF，应该是随着更新嵌入到前端bpm-explorer中）