完整教程：基于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前端组件：
{{ scope.row.productionStatus }}
更新状态
<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看板组件：
{{ kanban.kanbanName }}
![]()
查看
编辑
五、系统测试：确保移动端兼容性
曾经以为功能实现就完成了，结果在手机端测试时发现表格显示错乱，紧急调整了响应式布局。
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. 演示流程设计
按照实际生产流程演示：
- 管理员登录→创建生产工单→分配设备
- 人员登录→接收生产任务→更新工序状态
- 实时查看看板信息→监控生产进度
3. 答辩重点准备
- 技术选型理由：为什么选择VUE+Spring Boot？
- 移动端优势：相比PC端系统的便利性
- 生产流程优化：系统如何提升车间生产效率
结语
基于VUE的工厂车间管理系统毕设成功的关键在于：抓住生产流程核心，用好前后端分离架构，注重移动端用户体验。VUE的响应式特性完美适配车间移动办公场景，Spring Boot提供稳定后端支持。
这套技术栈虽然学习曲线稍陡，但一旦掌握，无论是毕设完成度还是技术含量都能得到导师认可。记住：移动端适配、生产状态流转、设备管理是三大得分点！
需要完整源码、数据库脚本、部署文档的同学可以在评论区留言。遇到VUE路由配置或Spring Boot跨域问题也欢迎交流讨论！
点赞收藏这篇指南，你的车间管理系统毕设一定能顺利通过！
浙公网安备 33010602011771号