1. 项目概述这个实验室设备管理系统是一个典型的Java Web应用采用前后端分离架构。前端基于Vue.js框架开发后端采用Spring Boot技术栈实现。系统主要面向高校实验室、科研机构等场景解决实验设备管理中的三大核心问题租赁、报修和借用流程的数字化管理。我在实际开发中发现传统实验室设备管理普遍存在几个痛点纸质登记效率低下、设备状态不透明、借用记录难以追溯。这套系统通过信息化手段实现了设备全生命周期的可视化管理。从技术选型来看VueSpringBoot的组合能够很好地满足这类管理系统的开发需求——Vue提供了流畅的用户交互体验SpringBoot则保证了后端服务的稳定性和扩展性。2. 系统核心功能设计2.1 设备租赁管理模块租赁模块采用状态机设计模式设备可处于空闲、租赁中、维修中三种状态。核心数据库表包括设备表(equipment)存储设备基本信息租赁记录表(rental_record)记录租赁起止时间用户表(user)区分管理员和普通用户关键实现代码片段// 租赁状态变更逻辑 public RentalRecord rentEquipment(Long equipmentId, Long userId) { Equipment equipment equipmentRepository.findById(equipmentId) .orElseThrow(() - new RuntimeException(设备不存在)); if (!equipment.getStatus().equals(空闲)) { throw new RuntimeException(设备当前不可租赁); } equipment.setStatus(租赁中); equipmentRepository.save(equipment); RentalRecord record new RentalRecord(); record.setEquipmentId(equipmentId); record.setUserId(userId); record.setStartTime(LocalDateTime.now()); return rentalRecordRepository.save(record); }2.2 设备报修流程实现报修流程采用工作流引擎设计包含以下状态流转用户提交报修申请管理员审核并分配维修人员维修人员处理并反馈结果管理员确认完成前端使用VueElement UI实现多步骤表单el-steps :activeactiveStep el-step title报修申请/el-step el-step title审核分配/el-step el-step title维修处理/el-step el-step title完成确认/el-step /el-steps2.3 设备借用管理设计借用模块特别考虑了实验室场景的特殊需求支持预约制借用避免设备使用冲突借用时长限制通常不超过7天逾期自动提醒机制数据库设计采用乐观锁解决并发问题Version private Integer version;3. 技术架构详解3.1 前端技术栈选型采用Vue 3 TypeScript的组合主要基于以下考虑组件化开发便于功能模块的复用响应式设计适配不同终端设备TypeScript提高代码可维护性核心依赖包{ dependencies: { vue: ^3.2.0, vue-router: ^4.0.0, axios: ^0.21.0, element-plus: ^1.0.2-beta.41 } }3.2 后端技术实现SpringBoot采用分层架构设计Controller层处理HTTP请求Service层业务逻辑实现Repository层数据持久化安全认证采用JWT方案Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .authorizeRequests() .antMatchers(/api/auth/**).permitAll() .anyRequest().authenticated() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())) .addFilter(new JwtAuthorizationFilter(authenticationManager())); } }4. 系统部署方案4.1 开发环境配置推荐使用以下工具链IDEIntelliJ IDEA VS Code数据库MySQL 8.0构建工具Maven npm关键配置项# application.properties spring.datasource.urljdbc:mysql://localhost:3306/lab_equipment spring.datasource.usernameroot spring.datasource.passwordyourpassword spring.jpa.hibernate.ddl-autoupdate4.2 生产环境部署采用Docker容器化部署方案# 后端Dockerfile FROM openjdk:11 COPY target/lab-equipment-0.0.1-SNAPSHOT.jar app.jar ENTRYPOINT [java,-jar,/app.jar] # 前端Dockerfile FROM nginx:alpine COPY dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.confNginx配置示例server { listen 80; server_name yourdomain.com; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; } }5. 开发经验与避坑指南5.1 前后端联调技巧接口文档管理使用Swagger UI自动生成API文档Configuration EnableSwagger2 public class SwaggerConfig { Bean public Docket api() { return new Docket(DocumentationType.SWAGGER_2) .select() .apis(RequestHandlerSelectors.any()) .paths(PathSelectors.any()) .build(); } }跨域问题解决方案Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .allowedHeaders(*); } }5.2 性能优化实践数据库查询优化添加合适索引使用JPA的EntityGraph解决N1问题复杂查询使用Query注解优化前端性能优化路由懒加载组件按需引入使用keep-alive缓存组件5.3 常见问题排查日期时间处理问题// 解决时区问题 Bean public Jackson2ObjectMapperBuilderCustomizer jacksonObjectMapperCustomization() { return builder - builder.timeZone(TimeZone.getTimeZone(Asia/Shanghai)); }文件上传大小限制# 调整上传限制 spring.servlet.multipart.max-file-size10MB spring.servlet.multipart.max-request-size10MBVue路由刷新404问题// router/index.js const router createRouter({ history: createWebHistory(), routes })6. 项目扩展方向在实际使用中我发现系统还可以进一步扩展以下功能设备使用率统计分析基于RFID的物理设备绑定微信小程序端接入设备维护预测基于使用时长和报修记录对于希望二次开发的同学建议先熟悉核心业务流程graph TD A[用户登录] -- B{身份验证} B --|管理员| C[设备管理] B --|普通用户| D[设备查询] D -- E[发起借用/租赁] E -- F[审批流程] F -- G[使用记录] G -- H[归还/报修]特别提醒数据库设计时要充分考虑扩展性建议预留10-20%的字段余量。我在初期版本中就因为字段不足导致后期不得不进行多次表结构变更。