SpringBoot+Vue车间管理系统全栈开发实战-代码聚汇网

SpringBoot+Vue车间管理系统全栈开发实战

刘野哥哥·2026-08-23·阅读 22 GEO检测（免费）

SpringBootVue车间管理系统

|难度：普通|阅读约 19 分钟

1. 工厂车间管理系统全栈开发实战

这个车间管理系统采用SpringBoot+Vue+MySQL技术栈实现，是一套开箱即用的生产管理解决方案。我在制造业信息化领域深耕多年，见过太多企业还在用Excel手工记录生产数据，这套系统正是为解决这类痛点而生。

系统核心功能覆盖车间管理的全流程：从工单下发、物料调配、工序报工到质量检验和绩效统计。后端采用SpringBoot快速构建RESTful API，前端用Vue实现响应式界面，MySQL作为数据持久层。特别值得一提的是，源码经过完整测试并附带初始化脚本，真正做到下载即可运行。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 系统架构设计解析

2.1 技术栈选型依据

选择SpringBoot作为后端框架主要基于以下考虑：

自动配置特性大幅减少XML配置（相比传统SSM）
内嵌Tomcat支持一键部署
完善的Starter生态（集成MyBatis、Redis等只需添加依赖）
我在实际项目中验证过的稳定性表现

前端选用Vue.js而非React/Angular的原因：

渐进式框架适合制造业相对简单的交互场景
双向数据绑定简化表单类开发（工单、报工等模块）
Element UI组件库完美匹配管理系统风格

数据库选择MySQL的考量点：

事务支持满足车间数据一致性要求
5.7+版本对JSON字段的良好支持（存储设备参数等半结构化数据）
相比Oracle等商业数据库的零成本优势

2.2 系统模块划分

mermaid复制graph TD
    A[车间管理系统] --> B[基础数据]
    A --> C[生产管理]
    A --> D[设备管理]
    A --> E[质量管理]
    A --> F[报表分析]
    
    B --> B1[工序管理]
    B --> B2[物料管理]
    B --> B3[人员管理]
    
    C --> C1[工单排产]
    C --> C2[进度跟踪]
    C --> C3[异常处理]
    
    D --> D1[设备台账]
    D --> D2[点检计划]
    D --> D3[维修记录]

3. 核心功能实现细节

3.1 工单状态机设计

车间管理的核心是工单流转，我们采用状态模式实现：

java复制// 工单状态枚举
public enum WorkOrderStatus {
    PENDING("待生产"),
    PROCESSING("生产中"),
    PAUSED("已暂停"),
    COMPLETED("已完成"),
    CANCELED("已取消");

    private String desc;
    // 构造方法省略
}

// 状态转换规则校验
public class WorkOrderStateMachine {
    private static final Map<WorkOrderStatus, Set<WorkOrderStatus>> TRANSITION_RULES = Map.of(
        PENDING, EnumSet.of(PROCESSING, CANCELED),
        PROCESSING, EnumSet.of(PAUSED, COMPLETED),
        PAUSED, EnumSet.of(PROCESSING, CANCELED)
    );

    public static boolean canTransition(WorkOrderStatus from, WorkOrderStatus to) {
        return TRANSITION_RULES.getOrDefault(from, Collections.emptySet())
                             .contains(to);
    }
}

3.2 报工数据批量提交

车间现场常需快速录入多个工序报工数据，前端采用Vue实现动态表单：

vue复制<template>
  <el-form :model="batchForm">
    <div v-for="(item, index) in batchForm.items" :key="index">
      <el-select v-model="item.operationId" placeholder="选择工序">
        <el-option 
          v-for="op in operations"
          :key="op.id"
          :label="op.name"
          :value="op.id">
        </el-option>
      </el-select>
      <el-input-number 
        v-model="item.quantity" 
        :min="1" 
        :max="1000">
      </el-input-number>
    </div>
    <el-button @click="addRow">新增行</el-button>
    <el-button type="primary" @click="submit">批量提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      batchForm: { items: [{}] },
      operations: []
    }
  },
  methods: {
    addRow() { this.batchForm.items.push({}) },
    async submit() {
      try {
        await this.$http.post('/api/report/batch', this.batchForm)
        this.$message.success('报工成功')
      } catch (e) {
        this.$message.error(e.response.data.message)
      }
    }
  }
}
</script>

4. 关键技术实现

4.1 SpringBoot多数据源配置

对于大型车间可能需要连接MES等外部系统，需配置多数据源：

java复制@Configuration
public class DataSourceConfig {
    
    @Bean
    @ConfigurationProperties("spring.datasource.primary")
    public DataSource primaryDataSource() {
        return DataSourceBuilder.create().build();
    }

    @Bean
    @ConfigurationProperties("spring.datasource.secondary")
    public DataSource secondaryDataSource() {
        return DataSourceBuilder.create().build();
    }

    @Bean
    public JdbcTemplate primaryJdbcTemplate(
            @Qualifier("primaryDataSource") DataSource dataSource) {
        return new JdbcTemplate(dataSource);
    }

    @Bean
    public JdbcTemplate secondaryJdbcTemplate(
            @Qualifier("secondaryDataSource") DataSource dataSource) {
        return new JdbcTemplate(dataSource);
    }
}

4.2 Vuex状态管理方案

对于跨组件共享的车间全局状态（如当前选中的工单），使用Vuex集中管理：

javascript复制// store/modules/workshop.js
export default {
  state: {
    currentWorkOrder: null,
    realTimeOutput: 0
  },
  mutations: {
    SET_CURRENT_ORDER(state, order) {
      state.currentWorkOrder = order
    },
    UPDATE_OUTPUT(state, delta) {
      state.realTimeOutput += delta
    }
  },
  actions: {
    fetchWorkOrder({ commit }, orderId) {
      return axios.get(`/api/work-orders/${orderId}`)
        .then(res => commit('SET_CURRENT_ORDER', res.data))
    }
  }
}

5. 数据库设计要点

5.1 核心表结构

sql复制-- 工单表
CREATE TABLE `work_order` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `order_no` varchar(32) NOT NULL COMMENT '工单编号',
  `product_id` bigint NOT NULL,
  `plan_quantity` int NOT NULL COMMENT '计划数量',
  `actual_quantity` int DEFAULT '0',
  `status` varchar(20) NOT NULL COMMENT '状态',
  `start_time` datetime DEFAULT NULL,
  `end_time` datetime DEFAULT NULL,
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_order_no` (`order_no`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 工序报工记录
CREATE TABLE `operation_report` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `work_order_id` bigint NOT NULL,
  `operation_id` bigint NOT NULL COMMENT '工序ID',
  `worker_id` bigint NOT NULL,
  `report_quantity` int NOT NULL,
  `qualified_quantity` int NOT NULL,
  `report_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `device_id` bigint DEFAULT NULL COMMENT '使用设备',
  PRIMARY KEY (`id`),
  KEY `idx_work_order` (`work_order_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

5.2 优化查询性能

针对车间常见的实时看板需求，建立优化索引：

sql复制-- 为高频查询字段添加组合索引
ALTER TABLE `operation_report` 
ADD INDEX `idx_order_operation` (`work_order_id`, `operation_id`);

-- 使用覆盖索引优化报表查询
ALTER TABLE `work_order`
ADD INDEX `idx_status_time` (`status`, `start_time`, `end_time`);

6. 系统部署实践

6.1 后端打包与运行

使用SpringBoot Maven插件构建可执行JAR：

bash复制# 打包
mvn clean package -DskipTests

# 运行（带生产环境配置）
java -jar workshop.jar --spring.profiles.active=prod \
     --server.port=8080 \
     --spring.datasource.url=jdbc:mysql://prod-db:3306/workshop

6.2 前端部署方案

采用Nginx部署Vue静态资源：

nginx复制server {
    listen       80;
    server_name  workshop.example.com;

    location / {
        root   /usr/share/nginx/html/workshop;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
    }
}

7. 常见问题排查

7.1 跨域问题解决方案

开发环境下配置SpringBoot允许跨域：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:8081")
                .allowedMethods("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

7.2 生产环境内存溢出

在JVM启动参数中添加内存限制和OOM时HeapDump：

bash复制java -Xms512m -Xmx1024m -XX:+HeapDumpOnOutOfMemoryError \
     -XX:HeapDumpPath=/var/log/workshop.hprof \
     -jar workshop.jar

8. 扩展功能建议

8.1 与MES系统集成

通过WebService对接企业现有MES：

java复制@WebServiceClient
public class MesClient {
    private final MesService port;
    
    public MesClient(String wsdlUrl) {
        MesService_Service service = new MesService_Service(
            new URL(wsdlUrl), 
            new QName("http://mes.example.com/", "MesService")
        );
        this.port = service.getMesServicePort();
    }
    
    public boolean syncWorkOrder(WorkOrder order) {
        // 转换DTO并调用MES接口
        MesWorkOrder mesOrder = convertToMesOrder(order);
        return port.createWorkOrder(mesOrder);
    }
}

8.2 移动端适配方案

基于Vant实现移动端报工界面：

vue复制<template>
  <van-form @submit="onSubmit">
    <van-field
      v-model="workerId"
      label="工号"
      placeholder="请输入工号"
      :rules="[{ required: true }]"
    />
    <van-field
      v-model="quantity"
      type="number"
      label="完成数量"
    />
    <van-button block type="primary" native-type="submit">
      提交报工
    </van-button>
  </van-form>
</template>

这套系统在实际部署中需要注意车间网络环境可能较差，建议增加本地缓存机制。对于关键业务操作如报工提交，应采用队列+重试机制确保数据最终一致性。我在实施过程中发现，车间大屏展示最好用WebSocket实现实时更新，比HTTP轮询体验好很多。