SpringBoot+Vue工厂车间管理系统开发实战
1. 项目概述：SpringBoot+Vue工厂车间管理系统
这套基于SpringBoot+Vue的工厂车间管理系统，是我在指导本科生毕业设计时反复打磨的一个实战项目。它完美契合计算机专业学生完成课设、毕设的核心需求——既要体现完整的技术栈，又要控制开发复杂度。系统采用前后端分离架构，前端Vue.js+Element UI实现响应式界面，后端SpringBoot提供RESTful API，MySQL作为数据存储，涵盖了工厂管理中的设备监控、生产排程、质量检测等典型场景。
为什么说这个项目特别适合学习用途？首先，技术选型上SpringBoot和Vue都是当前企业级开发的主流框架，MySQL更是必学的数据库。其次，车间管理系统本身业务逻辑清晰但又有一定复杂度，既不会像学生管理系统那样过于简单，也不会像电商系统那样庞大到难以把控。我在代码中刻意保留了从零搭建的完整痕迹，包括POM依赖的逐步引入、Vue组件的拆分逻辑、API设计的演进过程，这些都能帮助学习者理解真实项目的构建思路。
提示：本项目的MySQL表设计特别考虑了教学需求，所有表都包含完整的字段注释和外键关系说明，方便学生理解数据库设计原则。
2. 技术架构详解
2.1 后端SpringBoot实现
后端采用SpringBoot 2.7.x版本构建，这是我经过多个生产项目验证的稳定版本。核心模块划分如下：
factory-core：领域模型与业务逻辑factory-api：REST控制器与DTOfactory-dao：MyBatis映射与持久层factory-common：工具类与配置
特别值得说明的是安全配置部分。很多教学项目会简单使用内存用户，但这里我实现了完整的RBAC（基于角色的访问控制）：
@Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/api/equipment/**").hasAnyRole("MAINTENANCE","ADMIN") .antMatchers("/api/production/**").hasAnyRole("OPERATOR","ADMIN") .anyRequest().authenticated() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())) .addFilter(new JwtAuthorizationFilter(authenticationManager())); } }数据库连接池选用HikariCP而非默认的Tomcat池，这是我在性能测试中发现的一个优化点。在application.yml中需要显式配置：
spring: datasource: hikari: maximum-pool-size: 20 connection-timeout: 30000 idle-timeout: 600000 max-lifetime: 18000002.2 前端Vue实现方案
前端采用Vue 2.x + Element UI组合，这是考虑到学生群体的技术栈接受度。项目结构遵循最佳实践：
src/ ├── api/ # 接口封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── router/ # 路由配置 ├── store/ # Vuex状态管理 ├── utils/ # 工具函数 └── views/ # 页面组件一个典型的设备监控页面实现包含以下技术要点：
- 使用ECharts实现实时数据可视化
- WebSocket连接维护设备状态
- 基于Vuex的状态共享
- 动态路由权限控制
我在代码中特别标注了Element UI表格组件的性能优化技巧：
// 大数据量表格必须启用虚拟滚动 <el-table :data="equipmentList" height="500" row-key="id" :row-height="50" :virtual-scroll-options="{ height: 500 }">2.3 数据库设计要点
MySQL 5.7版本设计包含12张核心表，这里展示设备管理模块的ER关系：
| 表名 | 字段示例 | 说明 |
|---|---|---|
| equipment | id, name, type_id, status, last_maintenance | 设备基础信息 |
| equipment_type | id, name, maintenance_cycle | 设备类型 |
| maintenance_log | id, equipment_id, technician_id, details | 维护记录 |
| technician | id, name, specialty, contact | 技术人员 |
建表语句中我特意加入了教学注释：
CREATE TABLE `equipment` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '设备唯一标识', `name` varchar(50) NOT NULL COMMENT '设备名称', `type_id` int(11) NOT NULL COMMENT '关联equipment_type.id', `status` tinyint(4) NOT NULL DEFAULT '1' COMMENT '1-运行中 2-待机 3-维修中', PRIMARY KEY (`id`), KEY `idx_type` (`type_id`) COMMENT '类型查询索引' ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='设备主表';3. 核心功能实现
3.1 生产任务调度模块
这个模块最能体现车间管理系统的业务复杂性。后端采用Spring的@Scheduled注解实现定时任务：
@Scheduled(cron = "0 0/30 * * * ?") public void autoDispatchTasks() { // 1. 获取待分配任务 List<Task> pendingTasks = taskMapper.selectPending(); // 2. 基于设备负载均衡算法分配 Map<Equipment, List<Task>> assignment = new LoadBalancer().distribute(pendingTasks); // 3. 持久化分配结果 assignment.forEach((equip, tasks) -> { tasks.forEach(task -> { task.setEquipmentId(equip.getId()); taskMapper.update(task); }); }); }前端实现甘特图展示时，我推荐使用vue-gantt-elastic而非直接操作DOM：
<gantt-elastic :tasks="tasks" :options="{ title: { label: '生产任务排程', html: false }, row: { height: 40 } }"> </gantt-elastic>3.2 质量检测数据分析
质量检测模块包含一个典型的统计功能实现路径：
- 后端使用MyBatis的注解式SQL实现复杂统计：
@Select("SELECT DATE_FORMAT(test_time,'%Y-%m-%d') as day, " + "AVG(score) as avg_score, COUNT(*) as total " + "FROM quality_test WHERE product_id=#{productId} " + "GROUP BY DATE_FORMAT(test_time,'%Y-%m-%d')") List<QualityStat> getDailyStats(@Param("productId") int productId);- 前端通过axios拦截器统一处理API错误：
service.interceptors.response.use( response => { if (response.data.code !== 200) { Message.error(response.data.msg) return Promise.reject(new Error(response.data.msg)) } return response.data }, error => { Message.error(error.message) return Promise.reject(error) } )- 可视化使用Vue-ECharts的按需引入方案：
import ECharts from 'vue-echarts/components/ECharts' import 'echarts/lib/chart/line' import 'echarts/lib/component/tooltip' export default { components: { ECharts }, data() { return { options: { xAxis: { type: 'category', data: [] }, yAxis: { type: 'value' }, series: [{ data: [], type: 'line' }] } } } }4. 项目部署与教学要点
4.1 开发环境搭建
为了避免学生陷入环境配置的泥潭，我准备了详细的初始化脚本：
- MySQL初始化（包含示例数据）：
mysql -u root -p < database/init_schema.sql mysql -u root -p < database/sample_data.sql- 后端依赖一键安装：
mvn install -DskipTests- 前端依赖解决常见网络问题：
# 使用淘宝镜像 npm install --registry=https://registry.npm.taobao.org4.2 典型教学场景实现
在指导答辩时，我通常会建议学生重点展示以下技术亮点：
JWT认证流程：
- 前端存储token的localStorage安全实践
- 后端Refresh Token的实现
- 接口权限的注解控制
Excel导入导出：
// 使用EasyExcel避免OOM @PostMapping("/import") public Result importEquipment(MultipartFile file) { List<Equipment> list = EasyExcel.read(file.getInputStream()) .head(Equipment.class) .sheet() .doReadSync(); equipmentService.batchSave(list); return Result.success(); }WebSocket实时通知：
const socket = new WebSocket(`ws://${location.host}/api/ws`) socket.onmessage = (event) => { const data = JSON.parse(event.data) if (data.type === 'ALARM') { this.$notify.error({ title: '设备告警', message: data.content }) } }
4.3 常见问题解决方案
根据往届学生反馈，我整理了这些高频问题的应对策略：
跨域问题：
不要直接关闭安全配置，应该：@Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:8080") .allowedMethods("*") .allowCredentials(true); } }; }MyBatis结果映射：
使用ResultMap解决字段名不一致问题：<resultMap id="EquipmentMap" type="Equipment"> <id property="id" column="equip_id"/> <result property="name" column="equip_name"/> <association property="type" javaType="EquipmentType"> <id property="id" column="type_id"/> </association> </resultMap>Vue性能优化：
在列表页中使用虚拟滚动：<virtual-list :size="50" :remain="10"> <div v-for="item in items" :key="item.id">{{item.name}}</div> </virtual-list>
这套系统经过3届学生的迭代完善，现在已经包含完整的开发文档、API文档和部署指南。对于想深入理解前后端分离开发的学生，我特别建议重点研究权限控制模块和状态管理方案，这两个方面最能体现工程化思维。