工作流引擎-16-开源审批流项目之 整合Flowable官方的Rest包

工作流引擎系列

工作流引擎-00-流程引擎概览

工作流引擎-01-Activiti 是领先的轻量级、以 Java 为中心的开源 BPMN 引擎，支持现实世界的流程自动化需求

工作流引擎-02-BPM OA ERP 区别和联系

工作流引擎-03-聊一聊流程引擎

工作流引擎-04-流程引擎 activiti 优秀开源项目

工作流引擎-05-流程引擎 Camunda 8 协调跨人、系统和设备的复杂业务流程

工作流引擎-06-流程引擎 Flowable、Activiti 与 Camunda 全维度对比分析

工作流引擎-07-流程引擎 flowable-engine 入门介绍

工作流引擎-08-流程引擎 flowable-engine 优秀开源项目

工作流引擎-09-XState 是一个 JavaScript 和 TypeScript 的状态管理库，它使用状态机和状态图来建模逻辑

工作流引擎-10-什么是 BPM?

工作流引擎-11-开源 BPM 项目 jbpm

工作流引擎-12-开源 BPM 项目 foxbpm

工作流引擎-13-开源 BPM 项目 UFLO2

工作流引擎-14-开源审批流项目之 RuoYi-vue + flowable 6.7.2 的工作流管理

工作流引擎-15-开源审批流项目之 RuoYi-Vue-Plus 进行二次开发扩展Flowable工作流功能

工作流引擎-16-开源审批流项目之 整合Flowable官方的Rest包

工作流引擎-17-开源审批流项目之 flowable workflow designer based on vue and bpmn.io

工作流引擎-18-开源审批流项目之 plumdo-work 工作流，表单，报表结合的多模块系统

flowable-ui

经过两周左右时间的学习，Flowable基础知识自认为学习完毕，简单构思设计之后，开始上手实践了。

由于Flowable官方已经提供了丰富的REST包（和Activiti差不多），基本功能已经满足我们的要求了，个别接口不适用的可自行重写稍作调整即可。

Flowable官方提供的五个war包

starter	描述	在线体验
flowable-modeler	让具有建模权限的用户可以创建流程模型、表单、选择表与应用定义。	https://t.cn/A6cjNwAj
flowable-idm	身份管理应用。为所有Flowable UI应用提供单点登录认证功能，并且为拥有IDM管理员权限的用户提供了管理用户、组与权限的功能。	https://t.cn/A6cjCFHc
flowable-task	运行时任务应用。提供了启动流程实例、编辑任务表单、完成任务，以及查询流程实例与任务的功能。	https://t.cn/A6cjNLWv
flowable-admin	管理应用。让具有管理员权限的用户可以查询BPMN、DMN、Form及Content引擎，并提供了许多选项用于修改流程实例、任务、作业等。管理应用通过REST API连接至引擎，并与Flowable Task应用及Flowable REST应用一同部署。	https://t.cn/A6cjN4uq
flowable-rest	Flowable页面包含的常用REST API

在线体验账号：admin/123 (个人服务器，配置较低，仅供体验，请勿对应用进行压测)

先访问idm，使用体验账号登录后，再去访问modeler，task，admin其他模块

以官方提供的war包为基准，集成以上四个默认页面对应的REST接口。

开始集成

后端集成

• maven

<dependency><groupId>org.flowable</groupId><artifactId>flowable-spring-boot-starter-rest</artifactId><version>${flowable.version}</version>
</dependency>
<!-- flowable UI集成 -->
<dependency><groupId>org.flowable</groupId><artifactId>flowable-ui-modeler-conf</artifactId><version>${flowable.version}</version>
</dependency>
<dependency><groupId>org.flowable</groupId><artifactId>flowable-ui-task-conf</artifactId><version>${flowable.version}</version>
</dependency>
<dependency><groupId>org.flowable</groupId><artifactId>flowable-ui-admin-conf</artifactId><version>${flowable.version}</version>
</dependency>
<dependency><groupId>org.flowable</groupId><artifactId>flowable-ui-idm-conf</artifactId><version>${flowable.version}</version>
</dependency>

• gradle

compile group: 'org.flowable', name: 'flowable-spring-boot-starter-rest', version:'6.4.1'
compile group: 'org.flowable', name: 'flowable-ui-modeler-conf', version:'6.4.1'
compile group: 'org.flowable', name: 'flowable-ui-task-conf', version:'6.4.1'
compile group: 'org.flowable', name: 'flowable-ui-admin-conf', version:'6.4.1'
compile group: 'org.flowable', name: 'flowable-ui-idm-conf', version:'6.4.1'

注：

flowable-ui-xxx-conf: UI独立于业务外的配置
flowable-ui-xxx-logic: UI的业务逻辑
flowable-ui-xxx-rest: 提供常用的操作REST API

以上就是集成Flowable UI的基础包了。

由于flowable-ui-xxx-conf中包中，每个中都有对应自己的如ApplicationConfiguration等配置类，所以如果用默认配置会出现

conflicts with existing, non-compatible bean definition of same name and class

类似的错误信息，提示在Spring容器中存在两个相同名称的Bean。

所以不能使用默认的配置类，只能自己去编写配置类，完成flowable-ui-xxx-conf的配置。

• AppDispatcherServletConfiguration

@Configuration
@ComponentScan(value = {"org.flowable.ui.admin.rest","org.flowable.ui.task.rest.runtime","org.flowable.ui.idm.rest.app","org.flowable.ui.common.rest.exception","org.flowable.ui.modeler.rest.app","org.flowable.ui.common.rest"},excludeFilters = {@ComponentScan.Filter(type = FilterType.ASSIGNABLE_TYPE, value = RemoteAccountResource.class),@ComponentScan.Filter(type = FilterType.ASSIGNABLE_TYPE, value = StencilSetResource.class),@ComponentScan.Filter(type = FilterType.ASSIGNABLE_TYPE, value = EditorUsersResource.class),@ComponentScan.Filter(type = FilterType.ASSIGNABLE_TYPE, value = EditorGroupsResource.class)})
@EnableAsync
public class AppDispatcherServletConfiguration implements WebMvcRegistrations
// 下面类内容省略，可参考org.flowable.ui.xxx.servlet.AppDispatcherServletConfiguration类

注: 通过StencilSetResource类汉化流程设计器(其实没必要重写类，只需要将stencilset_bpmn.json文件内容汉化即可，重写的目的是以后可以通过此处兼容国际化)

• ApplicationConfiguration

@Configuration
@EnableConfigurationProperties({FlowableIdmAppProperties.class, FlowableModelerAppProperties.class, FlowableAdminAppProperties.class})
@ComponentScan(basePackages = {"org.flowable.ui.admin.repository","org.flowable.ui.admin.service","org.flowable.ui.task.model.component","org.flowable.ui.task.service.runtime","org.flowable.ui.task.service.debugger","org.flowable.ui.idm.conf","org.flowable.ui.idm.security","org.flowable.ui.idm.service","org.flowable.ui.modeler.repository","org.flowable.ui.modeler.service","org.flowable.ui.common.filter","org.flowable.ui.common.service","org.flowable.ui.common.repository","org.flowable.ui.common.security","org.flowable.ui.common.tenant"},excludeFilters = {@ComponentScan.Filter(type = FilterType.ASSIGNABLE_TYPE, value = org.flowable.ui.idm.conf.ApplicationConfiguration.class)}
)

注: 通过@ComponentScan注解，扫描需要的包及其接口。

• DatabaseConfiguration

/*** 重写flowable-ui-xxx-conf 中的 DatabaseConfiguration 类,* 包括:flowable-ui-modeler-conf和flowable-ui-admin-conf 的DatabaseConfiguration*/
@Configuration
@EnableTransactionManagement
public class DatabaseConfiguration {private static final Logger LOGGER = LoggerFactory.getLogger(DatabaseConfiguration.class);@Beanpublic Liquibase modelerLiquibase(DataSource dataSource) {Liquibase liquibase = null;try {DatabaseConnection connection = new JdbcConnection(dataSource.getConnection());Database database = DatabaseFactory.getInstance().findCorrectDatabaseImplementation(connection);database.setDatabaseChangeLogTableName("ACT_DE_" + database.getDatabaseChangeLogTableName());database.setDatabaseChangeLogLockTableName("ACT_DE_" + database.getDatabaseChangeLogLockTableName());liquibase = new Liquibase("META-INF/liquibase/flowable-modeler-app-db-changelog.xml", new ClassLoaderResourceAccessor(), database);liquibase.update("flowable");return liquibase;} catch (Exception e) {throw new InternalServerErrorException("Error creating liquibase database", e);} finally {closeDatabase(liquibase);}}@Beanpublic Liquibase adminLiquibase(DataSource dataSource) {LOGGER.debug("Configuring Liquibase");Liquibase liquibase = null;try {DatabaseConnection connection = new JdbcConnection(dataSource.getConnection());Database database = DatabaseFactory.getInstance().findCorrectDatabaseImplementation(connection);database.setDatabaseChangeLogTableName("ACT_ADM_" + database.getDatabaseChangeLogTableName());database.setDatabaseChangeLogLockTableName("ACT_ADM_" + database.getDatabaseChangeLogLockTableName());liquibase = new Liquibase("META-INF/liquibase/flowable-admin-app-db-changelog.xml", new ClassLoaderResourceAccessor(), database);liquibase.update("flowable");return liquibase;} catch (Exception e) {throw new InternalServerErrorException("Error creating liquibase database");} finally {closeDatabase(liquibase);}}private void closeDatabase(Liquibase liquibase) {if (liquibase != null) {Database database = liquibase.getDatabase();if (database != null) {try {database.close();} catch (DatabaseException e) {LOGGER.warn("Error closing database", e);}}}}
}

注: 创建Modeler的模型存储表和Admin首页的服务配置表。

• TaskUserCacheImpl

/*** 重写 {@link org.flowable.ui.task.service.idm.UserCacheImpl} 类,避免启动时和 {@link org.flowable.ui.idm.service.UserCacheImpl} 命名冲突* Cache containing User objects to prevent too much DB-traffic (users exist separately from the Flowable tables, they need to be fetched afterward one by one to join with those entities).* <p>** @author Frederik Heremans* @author Joram Barrez* @author Filip Hrisafov*/
@Service
public class TaskUserCacheImpl implements UserCache 

注: 重写 {@link org.flowable.ui.task.service.idm.UserCacheImpl} 类,避免启动时和 {@link org.flowable.ui.idm.service.UserCacheImpl} 命名冲突

• org.flowable.ui.admin.service.engine.CmmnTaskService

package org.flowable.ui.admin.service.engine;
/*** 覆盖jar包中的CmmnTaskService的定义，修改Bean的定义名称,避免和org.flowable.cmmn.api.CmmnTaskService命名冲突* Service for invoking Flowable REST services.*/
@Service("adminCmmnTaskService")
public class CmmnTaskService 

由于flowable官方提供的jar包导致的冲突问题解决完毕之后，以下是application.yml中需要对Flowable做的配置，其他如数据源相关配置省略，此处不再累述。

flowable:labelFontName: 宋体activityFontName: 宋体annotationFontName: 宋体rest:app:authentication-mode: verify-privilegeprocess:definition-cache-limit: 1idm:app:admin:password: testuser-id: adminfirst-name: adminlast-name: admincommon:app:role-prefix:idm-url: http://localhost:${server.port}/${spring.application.name}/idmxml:encoding: UTF-8modeler:app:rest-enabled: trueadmin:app:security:encryption:credentials-secret-spec: 9FGl73ngxcOoJvmLcredentials-i-v-spec: j8kdO2hejA9lKmm6server-config:app:context-root: ${spring.application.name}password: testserver-address: http://localhostuser-name: adminport: ${server.port}rest-root: app-apiname: Flowable App appdescription: Flowable App REST configprocess:context-root: ${spring.application.name}server-address: http://localhostpassword: testuser-name: adminrest-root: process-apiport: ${server.port}name: Flowable Process appdescription: Flowable Process REST configform:context-root: ${spring.application.name}server-address: http://localhostpassword: testuser-name: adminport: ${server.port}rest-root: form-apiname: Flowable Form appdescription: Flowable Form REST configdmn:context-root: ${spring.application.name}server-address: http://localhostpassword: testuser-name: adminport: ${server.port}rest-root: dmn-apiname: Flowable DMN appdescription: Flowable DMN REST configcmmn:context-root: ${spring.application.name}password: testserver-address: http://localhostuser-name: adminport: ${server.port}rest-root: cmmn-apiname: Flowable CMMN appdescription: Flowable CMMN REST configcontent:context-root: ${spring.application.name}server-address: http://localhostpassword: testuser-name: adminrest-root: content-apiport: ${server.port}name: Flowable Content appdescription: Flowable Content REST configdatabase-schema-update: true
management:endpoint:health:roles: access-adminshow-details: when_authorizedendpoints:jmx:unique-names: true
# MyBatis配置比较重要，手动去扫描Flowable默认的Mapper.xml，以及设置字段类型
mybatis:mapper-locations:- classpath:/META-INF/admin-mybatis-mappings/*.xml- classpath:/META-INF/modeler-mybatis-mappings/*.xmlconfiguration-properties:prefix:boolValue: TRUEblobType: BLOB

至此后端集成完毕。

集成思路出现偏差

一开始准备将官方提供的页面集成到后端工程来，但是由于modeler页面我是直接放到static目录下的，而其他三个页面只能自己建目录存放（idm, admin, task），导致访问modeler时是以后端项目请求路径为根访问路径的，在modeler请求后端接口时，请求路径没有问题；可访问idm、admin、task时，则必须加上idm/路径，导致请求后端接口时，不管将前端请求后端的路径改为相对路径还是绝对路径，最终请求路径都存在问题。此处花费时间较多。下面会讲讲新的页面集成方式。

Flowable与SpringBoot版本坑

flowable-ui-modeler-conf中AppDispatcherServletConfiguration配置类，实现了WebMvcRegistrations接口，SpringBoot1.x中，WebMvcRegistrations在spring-boot-autoconfigure中的web包下，而在SpringBoot2.x中，WebMvcRegistrations被移到web.servlet下了，所以在使用默认类时，SpringBoot版本必须是2.x。

Flowable官方包冲突

由于是根据flowable-modeler、flowable-idm、flowable-task、flowable-admin来集成的，所以后端基础包也是需要这对应的四个，故直接集成了flowable-ui-modeler-conf、flowable-ui-idm-conf、flowable-ui-task-conf、flowable-ui-admin-conf，但是由于这四个包中存在各自的自动配置类，而且在modeler和admin中，自动配置类又和他自己的业务逻辑有关联，而且存在多个类命名相同的Spring Bean，导致Spring上下文由于出现相同名称的Bean而初始化失败，但是默认配置有些又不能不用，最终的解决办法就是去除原来所有的默认配置，将冲突的通过@ComponentScan的excludeFilters属性移除掉，然后自己去自定义配置。

登录权限问题

flowable-ui-modeler-conf、flowable-ui-idm-conf、flowable-ui-task-conf、flowable-ui-admin-conf这四个包中都存在SecurityConfiguration配置类，顾名思义是安全配置，但是在集成的过程中，modeler-conf其实我们希望的是以idm的登录为主，其他模块自己的安全校验配置不需要，但是实际上由于其他模块存在安全配置以及默认的拦截器，导致idm自己的安全验证不能通过。解决方式和上面一样，通过包扫描路径，只扫描自己需要的包路径，而有影响的包要么移除掉，要么自己去实现其中的配置。

页面集成

页面集成一开始采用的是集成到后端工程，以后开发自己的页面时，也可直接调用集成好的流程设计器，但是由于其他模块的页面存在问题，故暂时放弃掉这种集成方式，采用Nginx来部署前端，正好满足前后端分离架构。

• Nginx配置

server {listen 8081;server_name flowable_ui;location / {root /user/local/nginx/flowable-ui;index index.html index.htm;}location /flowable_idm {proxy_pass http://localhost:8080/flowable;proxy_cookie_path  /flowable  /flowable_idm;}location /flowable_task {proxy_pass http://localhost:8080/flowable;proxy_cookie_path  /flowable  /flowable_task;}location /flowable_admin {proxy_pass http://localhost:8080/flowable;proxy_cookie_path  /flowable  /flowable_admin;}location /flowable_modeler {proxy_pass http://localhost:8080/flowable;proxy_cookie_path  /flowable  /flowable_modeler;}
}

注: 其实可以通过Nginx将静态资源和动态资源分开解析处理即可，但是我这边尝试的过程中有问题，只能采用简单粗暴的方式了。

然后在flowable-ui目录下新建modeler、idm、task、admin目录，将flowable-modeler.war、flowable-idm.war、flowable-task.war、flowable-admin.war中的flowable-xxx/WEB-INF/classes/static下的内容分别复制到对应目录下，此时通过http://localhost:8086/modeler…可看到对应的页面，但是由于动静资源路径一致，导致请求不能转发到后端，所以需要对动态请求和静态资源请求做区分，则需要修改官方页面源码，增加统一的请求路径前缀。

统一请求路径修改：

在modeler/scripts/app-cfg.js文件中，修改contextRoot为flowable_modeler，与静态资源访问路径区分开。

'use strict';
var FLOWABLE = FLOWABLE || {};
var pathname = window.location.pathname.replace(/^(\/[^\/]*)(\/.*)?$/, '$1').replace(/\/$/, '');
FLOWABLE.CONFIG = {'onPremise' : true,'contextRoot' : "/flowable_modeler",'webContextRoot' : pathname,'datesLocalization' : false
};

在idm/scripts/app-cfg.js文件中，修改contextRoot为flowable_idm，与静态资源访问路径区分开。

'use strict';
var FLOWABLE = FLOWABLE || {};
var pathname = window.location.pathname.replace(/^(\/[^\/]*)(\/.*)?$/, '$1').replace(/\/$/, '');
FLOWABLE.CONFIG = {'onPremise' : true,'contextRoot' : "/flowable_idm",'webContextRoot' : pathname,'datesLocalization' : false
};

在task/scripts/app-cfg.js文件中，修改contextRoot为flowable_task，与静态资源访问路径区分开。

'use strict';
var FLOWABLE = FLOWABLE || {};
var pathname = window.location.pathname.replace(/^(\/[^\/]*)(\/.*)?$/, '$1').replace(/\/$/, '');
FLOWABLE.CONFIG = {'onPremise' : true,'contextRoot' : "/flowable_task",'webContextRoot' : pathname,'datesLocalization' : false
};

admin和其他的不一样，所以我作为一个后端人员修改前端，采取的方式是在admin/scripts/config.js文件中，增加上面类似配置。

FlowableAdmin.webContextRoot = '/flowable_admin';

然后通过开发工具，给所有的REST请求的增加FlowableAdmin.webContextRoot + 前缀。

如：

url: '/app/

替换为

url: FlowableAdmin.webContextRoot + '/app/

其他非这种格式的URL，可自行手动修改。

至此前后端基本集成完毕。

执行后端SpringBoot启动类，启动后端服务。

启动Nginx。

此时通过以下四个链接，即可访问Flowable官方提供的四个操作页面，不过在第一次访问时，由于没有登录，会跳转到登录页面，在后端工程初次启动时，会初始化两个账号，可通过ACT_ID_USER表查询用户名密码。

http://localhost:8081/idm/