Flowable 與 bpmn.io@7.0 完整集成示例 Demo

下面是一個完整的前后端集成示例，包含前端使用 bpmn.js 7.0 和與 Flowable 后端交互的實現。

1. 后端實現 (Spring Boot + Flowable)

1.1 添加依賴 (pom.xml)

<dependencies><!-- Spring Boot --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- Flowable --><dependency><groupId>org.flowable</groupId><artifactId>flowable-spring-boot-starter</artifactId><version>6.7.0</version></dependency><!-- 其他必要依賴 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId></dependency><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency>
</dependencies>

1.2 應用配置 (application.yml)

server:port: 8080spring:datasource:url: jdbc:h2:mem:flowable;DB_CLOSE_DELAY=-1username: sapassword:driver-class-name: org.h2.Driverh2:console:enabled: truepath: /h2-consoleflowable:async-executor-activate: falsedatabase-schema-update: true

1.3 控制器 (FlowableController.java)

@RestController
@RequestMapping("/api")
public class FlowableController {@Autowiredprivate RepositoryService repositoryService;@Autowiredprivate RuntimeService runtimeService;// 部署流程@PostMapping("/deploy")public ResponseEntity<?> deployProcess(@RequestParam("file") MultipartFile file) {try {Deployment deployment = repositoryService.createDeployment().addBytes(file.getOriginalFilename(), file.getBytes()).deploy();return ResponseEntity.ok(Map.of("deploymentId", deployment.getId(),"deploymentName", deployment.getName(),"deploymentTime", deployment.getDeploymentTime()));} catch (Exception e) {return ResponseEntity.badRequest().body(e.getMessage());}}// 獲取流程定義XML@GetMapping("/process-definition/{id}/xml")public ResponseEntity<?> getProcessDefinitionXml(@PathVariable String id) {try {ProcessDefinition processDefinition = repositoryService.createProcessDefinitionQuery().processDefinitionId(id).singleResult();InputStream resourceAsStream = repositoryService.getResourceAsStream(processDefinition.getDeploymentId(), processDefinition.getResourceName());String xml = IOUtils.toString(resourceAsStream, StandardCharsets.UTF_8);return ResponseEntity.ok(xml);} catch (Exception e) {return ResponseEntity.badRequest().body(e.getMessage());}}// 獲取流程定義列表@GetMapping("/process-definitions")public ResponseEntity<?> getProcessDefinitions() {List<ProcessDefinition> processDefinitions = repositoryService.createProcessDefinitionQuery().latestVersion().list();List<Map<String, Object>> result = processDefinitions.stream().map(pd -> Map.of("id", pd.getId(),"name", pd.getName(),"key", pd.getKey(),"version", pd.getVersion(),"deploymentId", pd.getDeploymentId())).collect(Collectors.toList());return ResponseEntity.ok(result);}
}

1.4 安全配置 (SecurityConfig.java)

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {@Overrideprotected void configure(HttpSecurity http) throws Exception {http.cors().and().csrf().disable().authorizeRequests().antMatchers("/api/**").authenticated().and().httpBasic();}@BeanCorsConfigurationSource corsConfigurationSource() {CorsConfiguration configuration = new CorsConfiguration();configuration.setAllowedOrigins(Arrays.asList("*"));configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));configuration.setAllowedHeaders(Arrays.asList("*"));UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", configuration);return source;}
}

2. 前端實現 (React + bpmn.js)

2.1 項目初始化

npx create-react-app flowable-bpmn-demo
cd flowable-bpmn-demo
npm install bpmn-js@7.0.0 axios

2.2 BPMN 編輯器組件 (BpmnEditor.js)

import React, { useEffect, useRef, useState } from 'react';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import axios from 'axios';
import './BpmnEditor.css';const BpmnEditor = () => {const containerRef = useRef(null);const modelerRef = useRef(null);const [processDefinitions, setProcessDefinitions] = useState([]);const [selectedDefinition, setSelectedDefinition] = useState(null);const [xml, setXml] = useState('');// 初始化建模器useEffect(() => {if (containerRef.current && !modelerRef.current) {modelerRef.current = new BpmnModeler({container: containerRef.current,keyboard: { bindTo: document }});// 創建新流程圖createNewDiagram();}// 加載流程定義列表loadProcessDefinitions();return () => {if (modelerRef.current) {modelerRef.current.destroy();}};}, []);// 創建新流程圖const createNewDiagram = async () => {try {const result = await modelerRef.current.createDiagram();console.log('Diagram created');} catch (err) {console.error('Could not create diagram', err);}};// 加載流程定義列表const loadProcessDefinitions = async () => {try {const response = await axios.get('http://localhost:8080/api/process-definitions', {auth: {username: 'admin',password: 'test'}});setProcessDefinitions(response.data);} catch (error) {console.error('Error loading process definitions:', error);}};// 加載特定流程定義const loadProcessDefinition = async (definitionId) => {try {const response = await axios.get(`http://localhost:8080/api/process-definition/${definitionId}/xml`,{auth: {username: 'admin',password: 'test'}});await modelerRef.current.importXML(response.data);setXml(response.data);setSelectedDefinition(definitionId);} catch (error) {console.error('Error loading process definition:', error);}};// 保存當前流程圖const saveDiagram = async () => {try {const { xml } = await modelerRef.current.saveXML({ format: true });setXml(xml);const formData = new FormData();const blob = new Blob([xml], { type: 'text/xml' });formData.append('file', blob, 'process.bpmn');const response = await axios.post('http://localhost:8080/api/deploy', formData, {headers: {'Content-Type': 'multipart/form-data'},auth: {username: 'admin',password: 'test'}});alert(`Deployed successfully! Deployment ID: ${response.data.deploymentId}`);loadProcessDefinitions();} catch (error) {console.error('Error saving diagram:', error);}};return (<div className="bpmn-editor-container"><div className="toolbar"><button onClick={createNewDiagram}>New Diagram</button><button onClick={saveDiagram}>Save/Deploy</button><select value={selectedDefinition || ''}onChange={(e) => loadProcessDefinition(e.target.value)}><option value="">Load Process Definition</option>{processDefinitions.map((pd) => (<option key={pd.id} value={pd.id}>{pd.name || pd.key} (v{pd.version})</option>))}</select></div><div className="canvas" ref={containerRef}></div><div className="xml-viewer"><h3>BPMN XML</h3><textarea value={xml} onChange={(e) => setXml(e.target.value)}rows="20"/></div></div>);
};export default BpmnEditor;

2.3 樣式文件 (BpmnEditor.css)

.bpmn-editor-container {display: flex;flex-direction: column;height: 100vh;
}.toolbar {padding: 10px;background: #f5f5f5;border-bottom: 1px solid #ddd;
}.toolbar button, .toolbar select {margin-right: 10px;padding: 5px 10px;
}.canvas {flex: 1;height: 60%;border: 1px solid #ccc;
}.xml-viewer {height: 30%;padding: 10px;border-top: 1px solid #ddd;
}.xml-viewer textarea {width: 100%;height: calc(100% - 30px);font-family: monospace;
}

2.4 主應用組件 (App.js)

import React from 'react';
import './App.css';
import BpmnEditor from './BpmnEditor';function App() {return (<div className="App"><header className="App-header"><h1>Flowable + bpmn.js Integration Demo</h1></header><main><BpmnEditor /></main></div>);
}export default App;