一、背景

最近因為項目需求，我們需要引入一個流程引擎框架。基于以前做辦公系統的經驗，我就選擇了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流程引擎的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。