SpringBoot+Vue车间管理系统实战：从架构设计到性能优化-平芜编程栈

1. 项目概述：从零搭建工厂车间管理平台

去年帮朋友公司改造他们的车间管理系统时，我深刻体会到传统制造业在数字化转型中的痛点——纸质工单满天飞、设备状态靠人盯、生产数据统计滞后。这个基于SpringBoot+Vue的车间管理系统正是为解决这些问题而生，特别适合需要快速构建轻量级生产管理平台的中小型制造企业。

系统采用前后端分离架构，前端用Vue3+Element Plus实现响应式界面，后端基于SpringBoot 2.7提供RESTful API，数据库选用MySQL 8.0。整套代码开箱即用，包含完整的权限管理、设备监控、工单流转等核心模块，我在原版基础上优化了实时数据推送机制，使设备状态更新延迟控制在300ms以内。

提示：系统默认使用Java 11开发，但通过调整pom.xml中的配置可向下兼容到Java 8。建议使用JDK 17获得更好的GC性能

2. 技术架构解析

2.1 后端技术栈设计

SpringBoot的选择绝非偶然——它的自动配置特性让车间现场部署变得极其简单。我在项目中特别配置了多环境支持：

# application-prod.yml spring: datasource: url: jdbc:mysql://${DB_HOST:localhost}:3306/workshop?useSSL=false&serverTimezone=Asia/Shanghai username: ${DB_USER:prod_user} password: ${DB_PASS:prod_123} jackson: time-zone: GMT+8 date-format: yyyy-MM-dd HH:mm:ss

关键依赖包括：

spring-boot-starter-websocket（实时通知）
mybatis-plus-boot-starter（数据访问）
hutool-all（工具包）
easyexcel（报表导出）

2.2 前端工程化实践

Vue3的组合式API让复杂状态管理变得清晰。这个项目最值得借鉴的是基于RBAC的动态路由实现：

// src/store/permission.js const filterAsyncRoutes = (routes, roles) => { return routes.filter(route => { if (route.meta?.roles) { return roles.some(role => route.meta.roles.includes(role)) } else { return true } }) }

我特别添加了这些优化：

使用vue-cli的chainWebpack配置gzip压缩
按需引入Element Plus组件
配置svg-sprite-loader实现图标组件化

3. 核心功能实现细节

3.1 工单生命周期管理

工单状态机是整个系统的核心逻辑，我采用状态模式实现：

public interface WorkOrderState { void confirm(WorkOrderContext context); void start(WorkOrderContext context); void complete(WorkOrderContext context) throws IllegalStateException; } @Component @Scope("prototype") public class CreatedState implements WorkOrderState { @Override public void confirm(WorkOrderContext context) { context.setState(context.getConfirmedState()); // 记录状态变更日志 logService.recordTransition(context.getWorkOrderId(), "CREATED", "CONFIRMED"); } }

状态转换时需要注意：

必须记录完整操作日志
触发相关消息通知
更新关联设备状态

3.2 设备实时监控方案

通过WebSocket实现设备看板的关键代码：

@ServerEndpoint("/equipment/status") @Component public class EquipmentStatusEndpoint { private static final ConcurrentHashMap<String, Session> sessions = new ConcurrentHashMap<>(); @OnOpen public void onOpen(Session session, @PathParam("workshopId") String workshopId) { sessions.put(workshopId, session); // 立即推送当前状态 pushInitialStatus(workshopId); } private void pushInitialStatus(String workshopId) { List<Equipment> equipments = equipmentService.listByWorkshop(workshopId); session.getAsyncRemote().sendText( JSONUtil.toJsonStr(equipments)); } }

实测中发现的性能优化点：

使用ConcurrentHashMap存储会话
采用异步发送模式
添加心跳检测机制

4. 数据库设计与优化

4.1 关键表结构

工单表的设计特别注意了查询效率：

CREATE TABLE `work_order` ( `id` bigint NOT NULL AUTO_INCREMENT, `order_no` varchar(32) NOT NULL COMMENT '工单编号', `product_id` bigint NOT NULL, `planned_quantity` int NOT NULL, `actual_quantity` int DEFAULT NULL, `status` enum('CREATED','CONFIRMED','PROCESSING','COMPLETED','CANCELLED') NOT NULL, `priority` tinyint DEFAULT '3' COMMENT '1-紧急 2-高 3-普通', `planned_start` datetime DEFAULT NULL, `planned_end` datetime DEFAULT NULL, `actual_start` datetime DEFAULT NULL, `actual_end` datetime DEFAULT NULL, `create_by` bigint NOT NULL, `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`), UNIQUE KEY `uk_order_no` (`order_no`), KEY `idx_status` (`status`), KEY `idx_product` (`product_id`), KEY `idx_time_range` (`planned_start`,`planned_end`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

4.2 查询优化实践

对于车间看板这种高频查询场景，我采用了这些策略：

添加适当的覆盖索引
使用JOIN替代子查询
对大表进行水平分表（按车间ID分片）
配置MySQL查询缓存

5. 部署与运维要点

5.1 容器化部署方案

Docker Compose文件示例：

version: '3.8' services: backend: build: ./backend ports: - "8080:8080" environment: - SPRING_PROFILES_ACTIVE=prod depends_on: - mysql - redis frontend: build: ./frontend ports: - "80:80" mysql: image: mysql:8.0 volumes: - mysql_data:/var/lib/mysql environment: - MYSQL_ROOT_PASSWORD=root123 - MYSQL_DATABASE=workshop

5.2 性能监控配置

SpringBoot Actuator的定制化配置：

# 暴露健康检查和指标端点 management.endpoints.web.exposure.include=health,metrics,prometheus # 配置自定义指标 management.metrics.tags.application=workshop-management # JVM监控频率 management.metrics.export.prometheus.step=30s

6. 常见问题排查指南

6.1 工单状态异常

典型症状：状态流转卡在"CONFIRMED" 排查步骤：

检查work_order_transition_log表最后记录
确认当前用户是否有操作权限
查看设备关联状态是否正常
检查是否有未完成的质检记录

6.2 实时看板数据延迟

优化方案：

检查WebSocket连接状态
调整MySQL的wait_timeout参数
增加Stomp心跳间隔配置

@Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic") .setHeartbeatValue(new long[] {10000, 10000}); } }