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流程引擎的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。