SpringBoot2.4.2+Vue集成Activiti6流程引擎

一、背景

最近因为项目需求，我们需要引入一个流程引擎框架。基于以前做办公系统的经验，我就选择了activiti流程引擎框架，不过版本已经更新了好几个了，前后端技术也更新了，集成方式也不同了。于是我开始找资料，发现大多都是后端集成的方式，包括前端代码也喜欢放在后端resources中，这是五年前的模式了，我感觉这种方式很不友好。况且，目前都采用前后端分离的架构模式，前端框架也比较成熟和流行，我们还把html放在后端，从前端、后端、部署三个层面都显的很鸡肋，后面零零散散找了一些资料，踩了很多坑，奋斗了几个晚上，终于集成完毕。因此写个博客记录一下，有描述不详细的地方，欢迎留言，我目前还留存一点记忆，可以解答，哈哈。

二、前端集成

2.1、搭建一个vue项目，将activiti6的前端代码放在public目录下（前端代码可以去官网下载）

2.2、集成模型设计。新建一个vue文件，内容如下

<template><div style="position:relative;height: 100%;"><iframeid="iframe":src="modelerUrl"frameborder="0"width="100%"height="720px"scrolling="auto"/><Spin v-if="modelerLoading" fix size="large" /></div>
</template><script>
import { getToken } from '@/utils/auth'
export default {name: 'ModelDefine',components: {},data() {return {modelerLoading: true,modelerUrl: '/static/modeler.html?modelId=' + this.$route.query.id + '&time=' + new Date().getTime()}},computed: {token() {return 'Bearer ' + getToken()}},created() {},mounted() {window.getMyVue = this},methods: {}
}
</script>
<style lang="scss" scoped>
.iframe {width: 100%;height: calc(100vh - 154px);
}
</style>

结果如图：

2.3、对接token。每个系统都有自己的登录逻辑，activiti前端支持对接项目的token。打开static/modeler.html添加一下代码

  <script>(function (open) {XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {open.call(this, method, url, async, user, pass);  //this指XMLHttpRequestthis.setRequestHeader("Authorization", window.parent.getMyVue.token); //mounted时传入的token};})(XMLHttpRequest.prototype.open);</script>

2.4、修改接口配置。activiti默认的api配置也是支持修改的，可以对应我们自己的业务系统的路由。打开static/editor-app/app-cfg.js

完成上述几步，前端集成基本告一段落了，需要我们重写后台接口，完成模型的新建和保存。

三、后端集成

3.1、搭建一个springboot工程，本次使用的springboot2.4.2

3.2、集成jar包

        <!-- activiti 流程引擎 --><dependency><groupId>org.activiti</groupId><artifactId>activiti-engine</artifactId><version>6.0.0</version><exclusions><exclusion><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.activiti</groupId><artifactId>activiti-json-converter</artifactId><version>6.0.0</version></dependency><dependency><groupId>org.activiti</groupId><artifactId>activiti-spring-boot-starter-basic</artifactId><version>6.0.0</version></dependency><dependency><groupId>org.apache.xmlgraphics</groupId><artifactId>batik-codec</artifactId><version>1.7</version></dependency><dependency><groupId>org.apache.xmlgraphics</groupId><artifactId>batik-css</artifactId><version>1.7</version></dependency><dependency><groupId>org.apache.xmlgraphics</groupId><artifactId>batik-svg-dom</artifactId><version>1.7</version></dependency><dependency><groupId>org.apache.xmlgraphics</groupId><artifactId>batik-svggen</artifactId><version>1.7</version></dependency>

3.3、配置activiti（springboot项目的yml文件）

spring:activiti:check-process-definitions: false  # 自动检查、部署流程定义文件database-schema-update: true  # 自动更新数据库结构process-definition-location-prefix: classpath:/processes  # 流程定义文件存储目录

3.4、重写新增模型接口

    /*** 新增模型* */@PostMapping("/add")public AjaxResult addModel(@RequestBody ModelEntityForAdd newModel){ObjectNode modelNode = objectMapper.createObjectNode();modelNode.put(MODEL_NAME, newModel.getName());modelNode.put(MODEL_DESCRIPTION, newModel.getDescription());modelNode.put(MODEL_REVISION, "1");Model model = repositoryService.newModel();model.setName(newModel.getName());model.setKey(newModel.getKey());model.setCategory(newModel.getCategory());model.setMetaInfo(modelNode.toString());repositoryService.saveModel(model);String id = model.getId();//完善ModelEditorSourceObjectNode editorNode = objectMapper.createObjectNode();editorNode.put("id", "canvas");editorNode.put("resourceId", "canvas");ObjectNode stencilSetNode = objectMapper.createObjectNode();stencilSetNode.put("namespace", "http://b3mn.org/stencilset/bpmn2.0#");editorNode.putPOJO("stencilset", stencilSetNode);repositoryService.addModelEditorSource(id, editorNode.toString().getBytes(StandardCharsets.UTF_8));return AjaxResult.success(id);}

3.5、重写获取流程定义接口

/*** 获取流程定义json数据** @param modelId* @return*/@GetMapping(value = "/{modelId}/json")public ObjectNode getEditorJson(@PathVariable String modelId) {ObjectNode modelNode = null;Model model = repositoryService.getModel(modelId);if (model != null) {try {if (StringUtils.isNotEmpty(model.getMetaInfo())) {modelNode = (ObjectNode) objectMapper.readTree(model.getMetaInfo());} else {modelNode = objectMapper.createObjectNode();modelNode.put(MODEL_NAME, model.getName());}modelNode.put(MODEL_ID, model.getId());byte[] modelEditorSource = repositoryService.getModelEditorSource(model.getId());ObjectNode editorJsonNode = (ObjectNode) objectMapper.readTree(new String(modelEditorSource, StandardCharsets.UTF_8));modelNode.putPOJO("model", editorJsonNode);} catch (Exception e) {throw new ActivitiException("Error creating model JSON", e);}}return modelNode;}

3.6、重写保存模型接口

/*** 保存流程定义数据*/@PutMapping(value = "/{modelId}/save")public void saveModel(@PathVariable String modelId, @RequestParam("name") String name, @RequestParam("json_xml") String json_xml,@RequestParam("svg_xml") String svg_xml, @RequestParam("description") String description) {try {Model model = repositoryService.getModel(modelId);ObjectNode modelJson = (ObjectNode) objectMapper.readTree(model.getMetaInfo());modelJson.put(MODEL_NAME, name);modelJson.put(MODEL_DESCRIPTION, description);model.setMetaInfo(modelJson.toString());model.setName(name);model.setVersion(model.getVersion() + 1);repositoryService.saveModel(model);repositoryService.addModelEditorSource(model.getId(), Objects.requireNonNull(json_xml.getBytes(StandardCharsets.UTF_8)));InputStream svgStream = new ByteArrayInputStream(Objects.requireNonNull(svg_xml.getBytes(StandardCharsets.UTF_8)));TranscoderInput input = new TranscoderInput(svgStream);PNGTranscoder transcoder = new PNGTranscoder();// Setup outputByteArrayOutputStream outStream = new ByteArrayOutputStream();TranscoderOutput output = new TranscoderOutput(outStream);// Do the transformationtranscoder.transcode(input, output);final byte[] result = outStream.toByteArray();repositoryService.addModelEditorSourceExtra(model.getId(), result);outStream.close();} catch (Exception e) {throw new ActivitiException("Error saving model", e);}}

完成上述三个接口，再结合前端，就基本完成了模型的创建、编辑、保存了。至于后续的模型部署、流程实例等等，网上都有很多资料了。

SpringBoot2.4.2+Vue集成Activiti6流程引擎相关推荐

bpmn-js：vue集成bpmn-js流程设计器并汉化
最近工作转到工作流模块开发了,需要开发一个流程设计器. 于是就开始接触到bpmn-js,搜索了不少资料,整合demo.现在总结一下如何在vue工程中集成bpmn-js流程设计器. 集成的效果: 目前这 ...
Spring Boot 集成SnakerFlow流程引擎，简介、功能列表、详细解读、扩展点分析
文章目录简介功能列表流程定义任务参与者参与者设置动态添加.删除参与者组支持详细解读 Spring Boot集成表定义表详细说明: 字段详细说明: 常见操作常规API 综合查询模 ...
Vue版可视化流程引擎RoadFlow v3.0.3 适用于众多大型企事业单位
介绍: 可视化流程引擎RoadFlow 是天知软件旗下基于.NET的集成工作流引擎的快速开发平台,由从事六年以上OA及工作流开发与实施的团队设计开发,该工作流平台已应用于众多大型企事业单位.拥有全浏览 ...
vue集成activiti6.0 详细教程
1.下载activiti前端代码放到public文件夹下地址:
Activiti（一）SpringBoot2集成Activiti6
Activiti是领先的轻量级的,以Java为中心的开源BPMN(Business Process Modeling Notation)引擎,实现了真正的流程自动化.下面介绍如何在SpringBoot ...
activiti5、activiti6、activiti7、flowable、camunda7、camunda8流程引擎对比分析和选型参考
常见的开源工作流引擎有哪些?该如何选择?市场上比较有名的开源流程引擎有osworkflow.jbpm.activiti.flowable.camunda,其中activiti又有activiti5.a ...
Activiti 快速入门教程：SpringBoot 集成 Activiti6 + Activiti Modeler 流程配置可视化
Activiti 快速入门教程:SpringBoot 集成 Activiti6 + Activiti Modeler 流程配置可视化 7大服务与核心表 23张表概览 7大核心服务(重要) 加依赖内部 ...
Spring Boot2 + Activiti6 集成在线流程设计器 Activiti modoler(3)
前言上篇文章介绍了如何在Spring Boot2集成activiti6 接下来,小编会一步一步的介绍如何集成在线设计器 Activiti Modoler 介绍什么是 Activiti Modole ...
Electron中与Vue集成流程
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
Activiti6.0流程引擎学习——(11)使用IDEA编码实现的请假流程
本篇博客要使用IDEA来实现之前绘制好的请假流程图.流程图如下: 具体创建这个流程图请看这篇博客:https://blog.csdn.net/JJBOOM425/article/details/850 ...

SpringBoot2.4.2+Vue集成Activiti6流程引擎

SpringBoot2.4.2+Vue集成Activiti6流程引擎相关推荐

最新文章

热门文章