1. 项目概述为什么是Spring Boot Vue Flowable如果你正在为一个需要审批、流转、状态跟踪的业务系统选型比如OA、CRM或者ERP里的某个模块那么“工作流引擎”这个词大概率已经在你脑海里盘旋很久了。自己从零手撸一套光是状态机设计、任务分派、历史记录和回退逻辑就足以让人头大。所以引入一个成熟的工作流引擎是明智的选择。而在众多开源引擎中Flowable以其轻量、高性能和与Spring生态的无缝集成成为了很多Java后端开发者的首选。那么前端呢如今稍具规模的应用前后端分离已是标配。Vue.js凭借其渐进式的设计、易于上手的特点和活跃的生态成为了前端框架中的热门选手。它能够帮助我们快速构建出交互流畅、用户体验良好的流程设计器和任务处理界面。最后用什么把它们粘合起来Spring Boot当仁不让。它简化了Spring应用的初始搭建和开发过程通过自动配置和起步依赖让我们能快速构建出生产级的、独立运行的微服务。将Flowable集成到Spring Boot中几乎就是“开箱即用”的体验。所以“Spring Boot Vue Flowable”这个技术栈本质上是一个现代化、全栈式的工作流应用解决方案。它解决了从后端流程引擎核心、到RESTful API构建、再到前端流程可视化与交互的全链路问题。后端负责流程的定义、部署、实例运行与任务管理前端则负责让用户能够直观地绘制流程、处理待办事项并查看流转历史。接下来我将以一个典型的“请假审批流程”作为贯穿始终的案例带你从零开始拆解这个技术组合的搭建、核心实现与那些官方文档里不会写的“坑”。2. 技术栈选型与项目初始化在动手写代码之前我们需要明确每个技术组件扮演的角色并搭建好基础的项目结构。这是一个典型的前后端分离项目因此我们会创建两个独立的工程。2.1 后端工程Spring Boot与Flowable整合首先使用Spring Initializr或者IDE的创建向导创建一个标准的Spring Boot项目。核心依赖的选择是关键Spring Web: 提供RESTful API支持用于前后端通信。Spring Data JPA: 用于操作业务数据表如请假单。虽然Flowable自带一套数据表但业务数据我们通常分开管理。MySQL Driver: 数据库驱动Flowable和业务数据都将存储在这里。Flowable Starter: 这是核心。在pom.xml中引入Flowable Spring Boot Starter依赖它会自动为我们配置Flowable引擎、Spring集成、以及REST API可选。dependency groupIdorg.flowable/groupId artifactIdflowable-spring-boot-starter/artifactId version6.8.0/version !-- 请使用当前稳定版本 -- /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency artifactIdspring-boot-starter-data-jpa/artifactId /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency配置文件 (application.yml) 要点spring: datasource: url: jdbc:mysql://localhost:3306/flowable_demo?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: update # 对于业务表使用update。Flowable表由其自身管理。 show-sql: true # Flowable 配置 flowable: # 禁用异步执行器适用于演示和简单场景避免需要额外配置消息队列 async-executor-activate: false # 启动时检查数据库表结构若不匹配则自动更新 database-schema-update: true # 关闭历史数据记录级别可选‘none’, ‘activity’, ‘audit’, ‘full’。‘audit’是平衡性能与信息的常用选择。 history-level: audit注意启动Spring Boot应用后Flowable会自动在配置的数据库中创建约60张表如ACT_RE_*流程定义表、ACT_RU_*运行时表、ACT_HI_*历史表等。第一次看到这么多表不用慌这是正常的。2.2 前端工程Vue项目搭建与基础配置前端我们使用Vue CLI来快速搭建项目。确保你已安装Node.js和vue/cli。# 创建一个新的Vue项目 vue create flowable-frontend # 选择Manually select features 确保选中Router, Vuex # 进入项目并安装一些必备依赖 cd flowable-frontend npm install axios element-ui --save # 安装Flowable官方提供的流程设计器前端组件可选但强烈推荐 npm install flowable/flowable-frontend --saveAxios: 用于向后端发起HTTP请求。Element UI: 一套基于Vue 2.0的桌面端组件库能极大提升开发效率构建出风格统一的界面。flowable/flowable-frontend: 这是Flowable官方维护的前端库包含了流程设计器(flowable-bpmn)和任务表单渲染器等强大组件。虽然直接使用有一定学习成本但它能让我们快速集成一个功能强大的设计器。在main.js中引入Element UI和axiosimport Vue from vue import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css import App from ./App.vue import router from ./router import store from ./store Vue.use(ElementUI) Vue.config.productionTip false // 将axios挂载到Vue原型上方便在组件中使用 import axios from axios Vue.prototype.$http axios new Vue({ router, store, render: h h(App) }).$mount(#app)2.3 前后端联调基础准备前后端分离后联调是第一个坎。我们需要解决跨域问题。在后端Spring Boot应用中可以通过一个简单的配置类来解决Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) // 拦截所有请求 .allowedOriginPatterns(*) // 允许所有来源生产环境应指定具体域名 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowCredentials(true) .maxAge(3600) .allowedHeaders(*); } }同时在前端的axios创建实例时可以配置基础URL// 在src/utils/request.js 或类似文件中 import axios from axios const service axios.create({ baseURL: process.env.VUE_APP_BASE_API || http://localhost:8080, // 后端地址 timeout: 5000 }) export default service3. 核心概念与Flowable模型解析在开始编码前必须理解Flowable的几个核心概念这直接关系到我们如何设计API和前端交互。3.1 流程定义与流程实例这是最容易混淆的一对概念。流程定义 (Process Definition) 相当于蓝图或模板。它是由BPMN 2.0标准描述的流程图定义了流程的结构、节点、流转路径。例如“员工请假流程”这个模板就是一个流程定义。它通常通过部署一个.bpmn20.xml文件来创建。流程实例 (Process Instance) 相当于根据蓝图建造出来的一栋具体的房子。当某个员工发起一个请假申请时就会基于“员工请假流程”这个定义创建一个具体的流程实例。一个流程定义可以产生无数个流程实例。3.2 关键节点类型在我们的请假流程中会遇到几种关键节点开始事件 (Start Event) 流程的入口。用户任务 (User Task)需要人工参与的节点。例如“提交申请”、“经理审批”、“HR备案”。这是交互的核心每个User Task都会产生一个待办任务。排他网关 (Exclusive Gateway) 用来做决策像程序中的if-else。例如判断请假天数是否大于3天决定是走经理审批还是直接归档。结束事件 (End Event) 流程的终点。3.3 任务、变量与身份管理任务 (Task) 特指User Task产生的待办事项。任务有创建、签收、完成、委托等生命周期。流程变量 (Process Variables) 流程运行时的“内存”。它可以存储业务数据如leaveDays请假天数、applicant申请人、approvalComment审批意见。变量可以在节点间传递用于控制流程分支如在网关上判断leaveDays 3。身份服务 (IdentityService) Flowable内置的用户/组管理。但在实际项目中我们通常不直接使用它而是将其与公司现有的用户体系如LDAP、数据库用户表进行集成。更常见的做法是在任务查询和完成时直接使用我们业务系统的用户ID。4. 后端核心实现API设计与服务层开发后端的核心是提供一系列RESTful API供前端调用以操作流程。我们围绕“请假流程”来构建。4.1 实体与Repository层首先定义业务实体LeaveApplication请假申请单。Entity Table(name leave_application) Data // 使用Lombok简化getter/setter public class LeaveApplication { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String applicant; // 申请人ID private String applicantName; // 申请人姓名 private String leaveType; // 请假类型 private Integer leaveDays; // 请假天数 private String reason; // 事由 private Date applyTime; // 申请时间 private String status; // 业务状态草稿、审批中、已批准、已拒绝 private String processInstanceId; // 关联的Flowable流程实例ID }创建对应的JPA RepositoryLeaveApplicationRepository。4.2 流程定义与部署服务我们需要API来部署流程定义上传BPMN文件和查询已部署的流程。Service public class ProcessDefinitionService { Autowired private RepositoryService repositoryService; /** * 部署一个流程定义BPMN文件 */ public Deployment deployProcess(String processName, InputStream bpmnInputStream) { Deployment deployment repositoryService.createDeployment() .addInputStream(processName .bpmn20.xml, bpmnInputStream) .name(processName 部署) .deploy(); return deployment; } /** * 查询所有流程定义 */ public ListProcessDefinition listDefinitions() { return repositoryService.createProcessDefinitionQuery() .latestVersion() .list(); } }对应的Controller会提供/api/process/deploy(POST) 和/api/process/definitions(GET) 接口。实操心得 在开发环境我们经常需要修改流程图。每次手动删除旧部署很麻烦。可以在application.yml中设置flowable.check-process-definitions: false来禁用启动时检查然后通过代码或工具如Flowable Modeler来管理部署。另一种做法是将BPMN文件放在src/main/resources/processes/目录下Flowable会自动扫描并部署修改后重启应用即可更新非常适合原型开发。4.3 流程实例与任务服务这是最核心的业务服务处理流程的启动、任务查询与完成。1. 启动流程实例当员工提交一个请假单时首先保存业务数据然后启动一个流程实例。Service public class LeaveWorkflowService { Autowired private RuntimeService runtimeService; Autowired private TaskService taskService; Autowired private LeaveApplicationRepository leaveAppRepo; Transactional public ProcessInstance startLeaveProcess(LeaveApplication leaveApp) { // 1. 保存业务数据 leaveApp.setStatus(审批中); leaveApp.setApplyTime(new Date()); leaveAppRepo.save(leaveApp); // 2. 设置流程变量 MapString, Object variables new HashMap(); variables.put(applicant, leaveApp.getApplicant()); variables.put(applicantName, leaveApp.getApplicantName()); variables.put(leaveDays, leaveApp.getLeaveDays()); variables.put(leaveAppId, leaveApp.getId()); // 关键将业务ID传入流程 // 3. 启动流程实例 ProcessInstance instance runtimeService.startProcessInstanceByKey(LeaveProcess, variables); // 4. 将流程实例ID回写到业务表 leaveApp.setProcessInstanceId(instance.getId()); leaveAppRepo.save(leaveApp); return instance; } }这里LeaveProcess是BPMN文件中流程定义的id属性。2. 查询用户待办任务经理登录后需要看到所有待他审批的任务。public ListTask getTasksByCandidateUser(String userId) { ListTask tasks taskService.createTaskQuery() .taskCandidateOrAssigned(userId) // 查询候选人或已签收的任务 .includeProcessVariables() // 包含流程变量用于显示申请信息 .orderByTaskCreateTime().desc() .list(); // 这里有一个关键点Flowable的“候选人”机制。 // 在BPMN中UserTask的“Assignee”可以固定指定一个人也可以设置为“候选人组”。 // 更灵活的做法是在完成任务时动态指定处理人查询时则根据业务规则如部门来过滤任务。 return tasks; }3. 完成任务经理审批通过或拒绝。Transactional public void completeTask(String taskId, String userId, boolean approved, String comment) { // 1. 签收任务如果任务未被签收 Task task taskService.createTaskQuery().taskId(taskId).singleResult(); if (task.getAssignee() null) { taskService.claim(taskId, userId); } // 2. 设置审批结果作为流程变量驱动后续流程如网关判断 MapString, Object variables new HashMap(); variables.put(approved, approved); variables.put(approvalComment, comment); variables.put(approver, userId); // 3. 完成任务 taskService.complete(taskId, variables); // 4. 可选根据流程结果更新业务数据状态 // 可以通过流程实例ID找到关联的业务单据并更新其状态为“已批准”或“已拒绝”。 // 这通常通过监听流程的“结束事件”来实现更为优雅。 }4.4 历史数据查询服务Flowable会自动将已完成的任务和流程实例归档到历史表中。我们可以通过HistoryService来查询已办任务、流程执行轨迹图用于生成审批日志或流程图。Service public class HistoryService { Autowired private HistoryService historyService; // 注意与类名冲突实际注入时需用Qualifier或改名 public ListHistoricProcessInstance getFinishedProcesses(String businessKey) { return historyService.createHistoricProcessInstanceQuery() .finished() .processInstanceBusinessKey(businessKey) // 业务键查询 .list(); } /** * 获取某个流程实例的审批历史活动记录 */ public ListHistoricActivityInstance getActivityHistory(String processInstanceId) { return historyService.createHistoricActivityInstanceQuery() .processInstanceId(processInstanceId) .orderByHistoricActivityInstanceStartTime().asc() .list(); } }5. 前端核心实现流程设计与任务处理界面前端主要负责两大功能一是流程设计器用于绘制BPMN图二是任务处理工作台。5.1 集成Flowable流程设计器如果你选择使用flowable/flowable-frontend库集成设计器会相对简单。创建一个ProcessDesigner.vue组件。template div classdesigner-container flowable-bpmn refbpmnModeler :xmldefaultXml :usersuserList :groupsgroupList saveonSave / /div /template script import { FlowableBpmn } from flowable/flowable-frontend; export default { components: { FlowableBpmn }, data() { return { defaultXml: ?xml version1.0 encodingUTF-8? definitions ... !-- 一个简单的请假流程初始XML -- process idLeaveProcess name请假流程 isExecutabletrue startEvent idstart / userTask idapply name提交申请 flowable:assignee${applicant} / exclusiveGateway idgateway1 / sequenceFlow idflow1 sourceRefstart targetRefapply / sequenceFlow idflow2 sourceRefapply targetRefgateway1 / !-- 这里省略后续节点 -- /process /definitions, userList: [{id: zhangsan, name: 张三}, {id: lisi, name:李四}], groupList: [{id: deptLeader, name: 部门领导}] }; }, methods: { async onSave(xml, svg) { // 将xml和svg发送到后端进行部署 try { const formData new FormData(); const bpmnBlob new Blob([xml], { type: application/xml}); formData.append(file, bpmnBlob, leaveProcess.bpmn20.xml); formData.append(processName, 请假流程V2); await this.$http.post(/api/process/deploy, formData, { headers: { Content-Type: multipart/form-data } }); this.$message.success(流程部署成功); } catch (error) { this.$message.error(部署失败 error.message); } } } }; /script注意事项 官方设计器功能强大但定制化较复杂。如果需求简单也可以考虑其他开源BPMN设计器如bpmn-js它更轻量但需要自己实现属性面板和与后端的集成逻辑。5.2 构建任务工作台任务工作台通常包含两个主要视图“我的待办”和“我的已办”。我的待办组件 (MyTodoTasks.vue)template div el-table :datataskList stylewidth: 100% el-table-column propname label任务名称/el-table-column el-table-column propprocessDefinitionName label流程类型/el-table-column el-table-column label申请人 template slot-scopescope {{ scope.row.processVariables.applicantName }} /template /el-table-column el-table-column propcreateTime label到达时间 :formatterformatDate/el-table-column el-table-column label操作 template slot-scopescope el-button clickhandleTask(scope.row) typeprimary sizesmall处理/el-button /template /el-table-column /el-table !-- 任务处理对话框 -- el-dialog :titlecurrentTask.name :visible.syncdialogVisible div v-ifcurrentTask p请假人{{ currentTask.processVariables.applicantName }}/p p请假天数{{ currentTask.processVariables.leaveDays }}/p p事由{{ currentTask.processVariables.reason }}/p el-input v-modelcomment placeholder请输入审批意见/el-input div stylemargin-top: 20px; text-align: right; el-button clickcompleteTask(false)拒绝/el-button el-button typeprimary clickcompleteTask(true)同意/el-button /div /div /el-dialog /div /template script export default { data() { return { taskList: [], currentTask: null, dialogVisible: false, comment: }; }, mounted() { this.fetchTasks(); }, methods: { async fetchTasks() { const resp await this.$http.get(/api/task/my-todo?userId this.$store.state.user.id); this.taskList resp.data; }, handleTask(task) { this.currentTask task; this.dialogVisible true; }, async completeTask(approved) { await this.$http.post(/api/task/complete, { taskId: this.currentTask.id, userId: this.$store.state.user.id, approved: approved, comment: this.comment }); this.$message.success(任务处理完成); this.dialogVisible false; this.comment ; this.fetchTasks(); // 刷新列表 }, formatDate(row, column, cellValue) { return new Date(cellValue).toLocaleString(); } } }; /script关键点 前端展示的“申请人”、“请假天数”等信息是从任务的processVariables流程变量中获取的。这要求我们在启动流程和完成任务时正确地将业务数据设置到变量中。5.3 流程跟踪与高亮用户常常需要查看一个申请当前走到哪一步了。这需要结合后端的历史查询接口和前端绘图库如bpmn-js来实现。后端提供一个接口传入processInstanceId返回该实例的活动历史HistoricActivityInstance列表和当前活动节点ListExecution。前端获取到流程定义的XML和当前活动节点ID。使用bpmn-js加载XML模型然后通过其API高亮显示当前活动的节点通常标记为红色并将已完成的节点标记为绿色。这是一个增强用户体验的重要功能虽然实现稍有难度但能直观展示流程状态。6. 高级特性与实战技巧当基础功能跑通后我们会遇到一些更复杂的需求。这里分享几个实战技巧。6.1 动态指定处理人在BPMN图中我们不应该把处理人Assignee写死。更通用的做法是使用任务监听器或在代码中动态设置。方法一使用任务监听器推荐在BPMN XML的userTask上配置监听器在任务创建时通过Java代码计算处理人。userTask idmanagerAudit name经理审批 flowable:candidateGroupsdeptLeader extensionElements flowable:taskListener eventcreate classcom.yourcompany.listener.ManagerTaskAssignmentListener/ /extensionElements /userTaskpublic class ManagerTaskAssignmentListener implements TaskListener { Override public void notify(DelegateTask delegateTask) { // 根据流程变量、业务规则等动态计算审批人 String applicant (String) delegateTask.getVariable(applicant); String managerId userService.findManagerByApplicant(applicant); delegateTask.setAssignee(managerId); // 动态设置处理人 } }方法二在完成任务时指定下一任务处理人当完成“提交申请”任务时在completeTask方法中通过RuntimeService的addUserIdentityLink方法为下一个“经理审批”任务添加候选人。6.2 会签与或签多人同时处理一个任务比如需要多位领导会签。会签 (Multi-Instance Parallel): 所有参与者同时审批所有人都通过才算通过。或签 (Multi-Instance Sequential): 参与者依次审批任何一人通过即通过。在BPMN设计器中选中一个UserTask在其属性面板中设置“Multi-instance”为Parallel或Sequential并指定Collection参与者列表变量如${approverList}和Element variable单个参与者变量如approver。后端在流程启动前需要将参与者列表ListString approverList设置为流程变量。6.3 流程版本控制当你修改并重新部署一个已存在的流程定义相同Key时Flowable会自动为其创建新版本。默认情况下新发起的流程实例会使用最新版本。旧版本的流程实例会继续按照旧的定义执行完毕。你可以通过ProcessDefinitionQuery的version()方法来查询或指定特定版本的流程定义。6.4 与业务数据的关联这是架构设计的重点。我们采用了“业务ID关联”的方式即leaveAppId作为流程变量。还有另一种常见模式是使用业务键。ProcessInstance instance runtimeService.startProcessInstanceByKey(LeaveProcess, businessKey, variables);这里的businessKey可以就是业务实体的ID。这样通过runtimeService.createProcessInstanceQuery().processInstanceBusinessKey(businessKey)就能快速找到对应的流程实例。两种方式各有优劣业务键方式在查询关联时更直接。7. 部署、监控与性能调优7.1 多环境部署配置在生产环境配置会有所不同。# application-prod.yml spring: datasource: url: jdbc:mysql://prod-db:3306/flowable_prod?useSSLtrue... # 生产环境建议使用连接池如HikariCP并配置合适的参数 hikari: maximum-pool-size: 20 minimum-idle: 5 flowable: async-executor-activate: true # 生产环境开启异步执行器提升性能 async-executor-core-pool-size: 10 async-executor-max-pool-size: 50 # 历史数据级别生产环境可能选择‘audit’以平衡性能和审计需求 history-level: audit # 关闭自动部署通过CI/CD流程控制 check-process-definitions: false7.2 使用Flowable REST API还是自研APIFlowable Starter默认提供了完整的REST API (/flowable-rest/service/...)。对于快速原型或内部工具可以直接使用。但对于对外暴露的生产系统强烈建议封装自己的API。原因有安全性 自研API可以方便地集成统一的认证授权如Spring Security JWT。业务封装 可以在API层统一注入业务逻辑如数据校验、日志记录、通知发送等。接口定制 前端所需的数据格式可能与Flowable原生API返回的结构不同自研API可以灵活适配。7.3 监控与管理Flowable Admin应用 Flowable官方提供了一个独立的管理Web应用可以监控流程引擎、查看任务、管理部署等。可以将其作为单独服务部署。Spring Boot Actuator 集成Actuator可以监控应用健康状态、Metrics等。结合flowable-spring-boot-starter-actuator依赖还能暴露Flowable特定的端点。数据库监控 关注ACT_RU_*运行时表的数量防止因流程未正常结束而导致的数据堆积。可以编写定时任务清理过期的历史数据ACT_HI_*表。7.4 性能调优要点异步执行器 对于耗时操作如调用外部服务、生成复杂报表应将其设置为异步任务由Flowable的异步执行器在后台处理避免阻塞流程线程。历史数据清理 定期归档或清理ACT_HI_*历史表。Flowable提供了HistoryService的API进行清理也可以编写脚本直接操作数据库需谨慎。变量使用 避免在流程变量中存储过大的对象如文件内容。大文件应存储到对象存储中在变量里只存其引用ID。查询优化 使用Flowable提供的查询API时尽量使用索引字段如processInstanceId,taskId,businessKey进行过滤避免全表扫描。8. 常见问题与排查实录在实际开发中你几乎一定会遇到下面这些问题。8.1 流程启动失败提示“未找到流程定义”可能原因1 流程定义的Key不匹配。startProcessInstanceByKey(“LeaveProcess”)中的LeaveProcess必须与BPMN文件中process idLeaveProcess的id属性完全一致。可能原因2 流程定义未部署或未激活。检查ACT_RE_PROCDEF表确认对应Key的最新版本记录是否存在且SUSPENSION_STATE_为1激活状态。排查步骤 在启动流程的代码前后打日志打印出所有已部署流程定义的Key和ID列表进行比对。8.2 任务查询不到可能原因1 候选人设置错误。如果任务设置了candidateGroups“deptLeader”那么查询时必须使用.taskCandidateGroup(“deptLeader”)。如果动态设置了assignee则使用.taskAssignee(userId)查询。可能原因2 用户身份未同步。确保你查询时使用的userId与流程中设置候选人/处理人时使用的ID是同一个体系。实操心得 我通常会在任务监听器中将动态计算出的处理人ID同时设置为assignee并记录到自定义的业务任务表中这样查询业务表即可更直观且不受Flowable身份模型约束。8.3 网关条件不生效流程不走预期分支可能原因 顺序流上的条件表达式写错或流程变量类型不匹配。排查步骤检查BPMN XML中从网关引出的顺序流上的conditionExpression。例如${leaveDays 3}。确保变量leaveDays在流程中确实存在并且是Integer类型而不是String。在网关执行前通过runtimeService.getVariable()打印变量值确认是否符合预期。技巧 在测试时可以临时将历史级别设置为full这样可以在历史表中看到每个变量变更的详细记录便于调试。8.4 事务回滚导致流程状态不一致这是一个严重问题。例如在startLeaveProcess方法中先保存了业务单据然后启动流程如果启动流程后发生异常业务数据已保存但流程实例没创建。解决方案 务必使用Spring的Transactional注解管理事务确保业务操作和Flowable的数据库操作在同一个事务中。如上文startLeaveProcess方法所示。这样任何一步失败整个操作都会回滚。8.5 前端设计器保存的XML后端无法部署可能原因 BPMN XML格式不符合Flowable要求或缺少必要的属性如flowable:assignee虽然可为空但process节点的isExecutable”true”必须要有。排查步骤将前端生成的XML保存为文件用Flowable Modeler或任何XML编辑器打开检查其规范性。查看后端日志通常会有详细的解析错误信息。确保部署时文件后缀名是.bpmn20.xml或.bpmn这是Flowable识别流程文件的约定。整合Spring Boot、Vue和Flowable构建工作流应用是一个典型的全栈实践。它要求你不仅理解前后端技术更要吃透工作流引擎的核心概念。从简单的线性审批到复杂的会签、动态路由Flowable提供了强大的能力但如何将其优雅地融入你的业务系统才是真正的挑战。我的经验是前期多花时间设计好流程模型与业务数据的关联关系规划清楚用户体系如何集成后期就能避免很多重构的麻烦。这个技术栈足够成熟和灵活能够支撑起从中型到大型的各类流程驱动型应用。
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
