SpringBoot+Vue+MySQL全栈工作流系统开发实践-代码聚汇网

SpringBoot+Vue+MySQL全栈工作流系统开发实践

瓜皮秀秀

1. 项目概述：SpringBoot+Vue+MySQL全栈工作流系统

这套工作流程管理系统采用当前主流的前后端分离架构，后端基于SpringBoot 2.7.x构建RESTful API服务，前端使用Vue 3组合式API开发管理界面，数据存储选用MySQL 8.0关系型数据库。系统实现了从流程设计、任务分配到执行监控的全生命周期管理，特别适合中小型企业快速部署内部OA系统或项目协作平台。

我在实际部署测试中发现，这套代码库的亮点在于开箱即用的完整功能模块：

可视化流程设计器（基于bpmn.js实现）
多级审批权限树形配置
动态表单生成器
实时消息推送（集成WebSocket）
操作日志审计追踪

提示：系统默认使用MyBatis-Plus作为ORM框架，相比原生MyBatis可减少约40%的样板代码量，但对复杂SQL查询需要手动编写XML映射文件

2. 环境准备与项目初始化

2.1 后端开发环境搭建

需要预先安装：

JDK 1.8+（推荐Amazon Corretto 11）
Maven 3.6.3+
MySQL 8.0（注意必须开启大小写敏感配置）
Redis 6.x（用于会话管理和缓存）

关键依赖项版本控制：

xml复制<properties>
    <spring-boot.version>2.7.12</spring-boot.version>
    <mybatis-plus.version>3.5.3.1</mybatis-plus.version>
    <hutool.version>5.8.16</hutool.version>
</properties>

2.2 前端开发环境配置

Vue开发栈要求：

Node.js 16.x（不要使用18+版本，存在兼容性问题）
Vue CLI 5.0.8
推荐IDE：VS Code + Volar扩展

前端核心依赖：

json复制"dependencies": {
    "vue": "^3.2.47",
    "element-plus": "^2.3.8",
    "axios": "^1.3.5",
    "vue-router": "^4.1.6"
}

2.3 数据库初始化

执行项目中的sql/workflow_init.sql脚本时需注意：

先创建数据库：CREATE DATABASE workflow CHARSET utf8mb4 COLLATE utf8mb4_general_ci;
调整脚本中的默认管理员密码（第128行附近）
检查表act_ru_task的引擎是否为InnoDB

踩坑记录：MySQL 8.0默认的caching_sha2_password认证方式会导致Java连接失败，需执行ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '密码';

3. 核心模块实现解析

3.1 流程引擎集成方案

系统采用Activiti 7作为工作流引擎，通过以下配置实现深度集成：

java复制@Configuration
public class ActivitiConfig {
    @Bean
    public ProcessEngine processEngine(DataSource dataSource) {
        SpringProcessEngineConfiguration config = new SpringProcessEngineConfiguration();
        config.setDataSource(dataSource);
        config.setDatabaseSchemaUpdate("true");
        config.setAsyncExecutorActivate(true);
        // 关键性能优化参数
        config.setAsyncExecutorNumberOfRetries(5);
        config.setAsyncExecutorDefaultAsyncJobAcquireWaitTime(5000);
        return config.buildProcessEngine();
    }
}

实际使用中发现三个典型问题及解决方案：

历史数据膨胀：通过activiti.history-level=audit限制历史记录级别
异步任务堆积：调整activiti.async.executor.core-pool-size=10
中文乱码：在bpmn文件头添加<bpmn2:definitions ... exporter="Camunda Modeler" exporterVersion="4.12.0" xmlns:activiti="http://activiti.org/bpmn">

3.2 前后端交互设计

采用JWT+RBAC的认证方案，关键接口设计：

接口类型	路径示例	说明
POST	/api/process/start	启动流程时需传递formData和processDefinitionKey
GET	/api/task/list?type=claimable	分页查询使用MyBatis-Plus的Page对象
PUT	/api/task/complete/	完成任务时自动校验操作权限

前端axios拦截器典型配置：

javascript复制service.interceptors.request.use(config => {
    if (store.getters.token) {
        config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    // 特殊处理文件下载
    if (config.isFile) {
        config.responseType = 'blob'
    }
    return config
}, error => {
    return Promise.reject(error)
})

4. 生产环境部署要点

4.1 后端优化配置

application-prod.yml关键参数：

yaml复制spring:
  datasource:
    hikari:
      maximum-pool-size: 20
      connection-timeout: 30000
      idle-timeout: 600000
  redis:
    lettuce:
      pool:
        max-active: 50
        max-wait: 10000

activiti:
  async-executor:
    core-pool-size: 5
    max-pool-size: 10

4.2 前端性能优化

路由懒加载配置：

javascript复制const routes = [
  {
    path: '/process',
    component: () => import('@/views/process/index.vue'),
    meta: { title: '流程管理' }
  }
]

打包分析工具使用：

bash复制npm install --save-dev @vue/cli-plugin-webpack-bundle-analyzer
vue.config.js中配置：
chainWebpack: config => {
  config.plugin('webpack-bundle-analyzer')
    .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}

4.3 容器化部署方案

Docker-compose示例：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root123
      MYSQL_DATABASE: workflow
    volumes:
      - ./mysql/data:/var/lib/mysql
      - ./mysql/conf:/etc/mysql/conf.d
    ports:
      - "3306:3306"

  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
    environment:
      SPRING_PROFILES_ACTIVE: prod

  frontend:
    build: ./frontend
    ports:
      - "80:80"

5. 二次开发建议

根据三个实际企业落地案例，总结出以下扩展方向：

多租户支持：

java复制// 在BaseEntity中添加tenant_id字段
@TableField("tenant_id")
private String tenantId;

// SQL过滤器配置
public void addTenantCondition(String tenantId) {
    this.sqlParser(new TenantSqlParser())
        .setTenantHandler(new TenantHandler() {
            @Override
            public String getTenantIdColumn() {
                return "tenant_id";
            }
            @Override
            public Expression getTenantId() {
                return new StringValue(tenantId);
            }
        });
}

移动端适配：

添加Vant组件库：npm install vant@next
使用vw单位布局：postcss-px-to-viewport插件配置

流程性能监控：

sql复制-- 监控表设计建议
CREATE TABLE `wf_monitor` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `process_key` varchar(64) DEFAULT NULL,
  `avg_duration` int DEFAULT NULL COMMENT '平均耗时(秒)',
  `active_count` int DEFAULT NULL COMMENT '运行中实例数',
  PRIMARY KEY (`id`),
  KEY `idx_process_key` (`process_key`)
) ENGINE=InnoDB;

这套系统在技术选型上平衡了成熟度和先进性，特别适合需要快速构建工作流平台的中小团队。我在实施过程中发现，最大的挑战其实不在于技术实现，而在于业务流程的标准化梳理——建议先完成线下流程模拟再实施系统配置，可以避免70%以上的返工修改