基于VUE的工厂车间管理系统毕设实战指南！从技术选型到测试全流程解析✨

基于VUE的工厂车间管理系统毕设实战指南！从技术选型到测试全流程解析✨

去年做工厂车间管理系统毕设时，我在前后端数据交互上踩了大坑——VUE前端与Spring Boot后端跨域问题调试了3天，导师演示时页面一直加载失败😫 经过反复摸索，终于总结出了这套VUE+Spring Boot毕设实战经验，手把手教你避开所有坑点！

一、需求分析：抓住车间管理核心

刚开始我想做一个"万能车间系统"，包含了人员考勤、物料管理、质量检测等模块，结果导师说"功能太分散，核心生产流程不突出"。后来明白，车间管理系统要围绕生产流程这个核心，聚焦看板、设备、工序管理。

1. 核心用户角色与功能

系统主要面向两类用户，功能定位要精准：

• 管理员端（系统管理核心）：

  • 人员管理：维护车间人员信息、分配账号权限
  • 看板信息管理：设置生产看板、监控生产进度
  • 设备信息管理：登记和维护生产设备信息
  • 生产开立管理：创建和跟踪生产工单
  • 系统管理：基础数据维护和系统配置

• 人员端（生产执行核心）：

  • 生产开立操作：接收和执行生产任务
  • 生产工序管理：记录工序执行情况
  • 生产流程跟踪：实时更新生产状态
  • 设备使用记录：登记设备使用情况

2. 需求分析实战技巧

• 深入车间调研：我实地参观了一个小型加工车间，发现他们最需要的是"工序状态实时更新"，于是重点设计了生产流程状态跟踪功能
• 绘制业务流程图：用DrawIO画出"生产开立→工序分配→流程执行→完成入库"的完整流程，答辩时清晰展示系统逻辑
• 明确业务规则：如"同一设备不能同时执行多个工序""工序必须按顺序执行"等约束条件

3. 可行性分析要点

• 技术可行性：VUE+Spring Boot+MySQL是主流技术栈，社区资源丰富
• 经济可行性：全部使用开源技术，零开发成本
• 操作可行性：界面设计符合移动端使用习惯，车间人员容易上手

二、技术选型：前后端分离架构

曾经尝试用传统JSP技术栈，发现移动端适配效果很差，最终选择VUE+Spring Boot前后端分离架构，完美解决移动端访问问题。

1. 技术栈选择理由

技术组件	选择理由	避坑提醒
VUE 2.x	移动端友好，组件化开发	不要用3.x，生态还不够成熟
Spring Boot 2.x	快速开发，简化配置	注意跨域配置问题
MySQL 8.0	轻量级，满足数据存储需求	记得配置时区
Element UI	VUE配套UI组件库	按需引入避免打包体积过大

2. 开发环境搭建

# 前端环境
npm install -g @vue/cli
vue create factory-frontend

# 后端环境
使用Spring Initializr创建项目
选择Web、MyBatis、MySQL依赖

3. 项目架构设计

采用前后端分离架构：

• 前端：VUE + Element UI + Axios
• 后端：Spring Boot + MyBatis + MySQL
• 交互：RESTful API + JSON数据格式

三、数据库设计：生产数据建模

最初设计时把生产流程所有信息放在一张表，导致查询性能极差。重新设计后按业务模块分表，系统响应速度大幅提升。

1. 核心数据表设计

生产流程表（production_flow）

CREATE TABLE `production_flow` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `production_batch` varchar(100) DEFAULT NULL COMMENT '生产批次',
  `process_name` varchar(100) DEFAULT NULL COMMENT '工序名称',
  `process_number` varchar(50) DEFAULT NULL COMMENT '工序编号',
  `equipment_name` varchar(100) DEFAULT NULL COMMENT '设备名称',
  `batch_quantity` int(11) DEFAULT NULL COMMENT '批次数量',
  `product_name` varchar(100) DEFAULT NULL COMMENT '产品名称',
  `production_status` varchar(50) DEFAULT '待开始' COMMENT '生产状态',
  `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `update_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_batch` (`production_batch`),
  KEY `idx_status` (`production_status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='生产流程表';

设备信息表（equipment_info）

CREATE TABLE `equipment_info` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `equipment_number` varchar(50) NOT NULL COMMENT '设备编号',
  `equipment_name` varchar(100) NOT NULL COMMENT '设备名称',
  `equipment_type` varchar(50) DEFAULT NULL COMMENT '设备类型',
  `scale` varchar(50) DEFAULT NULL COMMENT '规模',
  `quantity` int(11) DEFAULT '1' COMMENT '数量',
  `precautions` text COMMENT '注意事项',
  `status` varchar(20) DEFAULT '正常' COMMENT '设备状态',
  `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_number` (`equipment_number`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='设备信息表';

2. 表关系设计要点

• 状态字段设计：生产状态（待开始/进行中/已完成）、设备状态（正常/维修/停用）
• 批次关联：通过生产批次关联生产开立、工序、流程信息
• 时间跟踪：创建时间、更新时间自动维护

四、核心功能实现与代码详解

1. 生产流程管理（核心模块）

VUE前端组件：

<template>
  <div class="production-flow">
    <el-card header="生产流程管理">
      <el-table :data="flowList" v-loading="loading">
        <el-table-column prop="productionBatch" label="生产批次"></el-table-column>
        <el-table-column prop="processName" label="工序名称"></el-table-column>
        <el-table-column prop="equipmentName" label="设备名称"></el-table-column>
        <el-table-column prop="batchQuantity" label="批次数量"></el-table-column>
        <el-table-column prop="productionStatus" label="生产状态">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.productionStatus)">
              {{ scope.row.productionStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="updateStatus(scope.row)" size="mini">
              更新状态
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getProductionFlow, updateFlowStatus } from '@/api/production'

export default {
  name: 'ProductionFlow',
  data() {
    return {
      flowList: [],
      loading: false
    }
  },
  methods: {
    async loadFlowData() {
      this.loading = true
      try {
        const response = await getProductionFlow()
        this.flowList = response.data
      } catch (error) {
        this.$message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    },
    getStatusType(status) {
      const typeMap = {
        '待开始': 'info',
        '进行中': 'warning',
        '已完成': 'success'
      }
      return typeMap[status] || 'info'
    },
    async updateStatus(row) {
      // 状态更新逻辑
    }
  },
  mounted() {
    this.loadFlowData()
  }
}
</script>

Spring Boot后端Controller：

@RestController
@RequestMapping("/api/production")
@CrossOrigin(origins = "*") // 解决跨域问题
public class ProductionController {
    
    @Autowired
    private ProductionFlowService flowService;
    
    @GetMapping("/flow")
    public Result getProductionFlow(@RequestParam Map<String, Object> params) {
        try {
            PageUtils page = flowService.queryPage(params);
            return Result.ok().put("data", page);
        } catch (Exception e) {
            return Result.error("查询失败");
        }
    }
    
    @PostMapping("/flow/status")
    public Result updateFlowStatus(@RequestBody FlowStatusUpdateRequest request) {
        try {
            flowService.updateStatus(request);
            return Result.ok("状态更新成功");
        } catch (Exception e) {
            return Result.error("状态更新失败");
        }
    }
}

2. 设备信息管理

Service层实现：

@Service
public class EquipmentServiceImpl implements EquipmentService {
    
    @Autowired
    private EquipmentMapper equipmentMapper;
    
    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<EquipmentEntity> page = new Page<>(
            Integer.parseInt(params.get("page").toString()),
            Integer.parseInt(params.get("limit").toString())
        );
        
        IPage<EquipmentEntity> result = equipmentMapper.selectPage(page, 
            new EntityWrapper<EquipmentEntity>()
                .like("equipment_name", params.get("equipmentName"))
                .eq("status", params.get("status"))
        );
        
        return new PageUtils(result);
    }
    
    @Override
    public boolean addEquipment(EquipmentEntity equipment) {
        // 检查设备编号是否重复
        Integer count = equipmentMapper.selectCount(
            new EntityWrapper<EquipmentEntity>()
                .eq("equipment_number", equipment.getEquipmentNumber())
        );
        if (count > 0) {
            throw new RuntimeException("设备编号已存在");
        }
        return equipmentMapper.insert(equipment) > 0;
    }
}

3. 看板信息管理

VUE看板组件：

<template>
  <div class="kanban-dashboard">
    <el-row :gutter="20">
      <el-col :span="8" v-for="kanban in kanbanList" :key="kanban.id">
        <el-card class="kanban-card">
          <div slot="header">
            <span>{{ kanban.kanbanName }}</span>
          </div>
          <img :src="kanban.previewImage" class="kanban-image">
          <div class="kanban-actions">
            <el-button @click="viewKanban(kanban)" type="primary">查看</el-button>
            <el-button @click="editKanban(kanban)">编辑</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

五、系统测试：确保移动端兼容性

曾经以为功能实现就完成了，结果在手机端测试时发现表格显示错乱，紧急调整了响应式布局。

1. 功能测试用例

生产流程状态测试：

测试场景	操作步骤	预期结果
开始生产	点击"开始生产"按钮	状态变为"进行中"，开始时间记录
完成工序	点击"完成工序"按钮	状态变为"已完成"，结束时间记录
状态回退	尝试将已完成回退到进行中	提示"不允许状态回退"

设备管理测试：

测试场景	操作步骤	预期结果
重复设备编号	添加相同设备编号的设备	提示"设备编号已存在"
设备状态更新	修改设备状态为"维修"	该设备在生产分配中不可选

2. 移动端兼容性测试

• 浏览器测试：Chrome、Safari、微信内置浏览器
• 屏幕尺寸：375×667（iPhone 6/7/8）、414×736（iPhone 6/7/8 Plus）
• 触摸操作：测试滑动、点击等触摸手势

3. 跨域问题解决方案

后端跨域配置：

@Configuration
public class CorsConfig {
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE")
                    .allowedHeaders("*")
                    .allowCredentials(false)
                    .maxAge(3600);
            }
        };
    }
}

六、部署与演示准备

1. 前端部署配置

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: 'dist',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

2. 演示流程设计

按照实际生产流程演示：

1. 管理员登录→创建生产工单→分配设备
2. 人员登录→接收生产任务→更新工序状态
3. 实时查看看板信息→监控生产进度

3. 答辩重点准备

• 技术选型理由：为什么选择VUE+Spring Boot？
• 移动端优势：相比PC端系统的便利性
• 生产流程优化：系统如何提升车间生产效率

结语

基于VUE的工厂车间管理系统毕设成功的关键在于：抓住生产流程核心，用好前后端分离架构，注重移动端用户体验。VUE的响应式特性完美适配车间移动办公场景，Spring Boot提供稳定后端支持。

这套技术栈虽然学习曲线稍陡，但一旦掌握，无论是毕设完成度还是技术含量都能得到导师认可。记住：移动端适配、生产状态流转、设备管理是三大得分点！

需要完整源码、数据库脚本、部署文档的同学可以在评论区留言。遇到VUE路由配置或Spring Boot跨域问题也欢迎交流讨论！

点赞收藏这篇指南，你的车间管理系统毕设一定能顺利通过！ 🎯