Spring Boot与Vue.js构建高校实验室设备管理系统

1. 项目概述

实验室设备管理系统是高校实验室管理的重要工具，它通过信息化手段解决了传统人工管理模式下效率低下、数据易丢失、审批流程繁琐等问题。作为一名长期从事高校信息化建设的开发者，我设计并实现了这套基于Spring Boot和Vue.js的实验室设备管理系统，旨在为实验室管理人员提供一套完整的设备全生命周期管理解决方案。

系统采用前后端分离架构，后端基于Spring Boot框架构建，前端使用Vue.js实现响应式界面，数据库采用MySQL 8.0。系统主要功能包括设备信息管理、设备借用审批、设备报修处理、设备归还确认等核心业务流程，同时提供完善的用户权限管理和数据统计分析功能。

2. 系统架构设计

2.1 技术选型分析

在技术选型阶段，我们主要考虑了以下几个关键因素：

1. 开发效率：高校实验室管理系统通常开发周期紧张，需要快速迭代
2. 维护成本：系统需要长期稳定运行，维护成本要低
3. 扩展性：随着实验室规模扩大，系统需要能够平滑扩展
4. 安全性：设备数据涉及学校资产，安全性要求高

基于这些考量，我们最终确定了以下技术栈：

后端技术栈：

• Spring Boot 2.7.x：简化配置，快速开发
• MyBatis-Plus 3.5.x：增强的ORM框架，减少SQL编写
• Shiro 1.10.x：安全认证和授权
• Redis 6.x：缓存和会话管理
• MySQL 8.0：关系型数据库

前端技术栈：

• Vue.js 3.x：响应式前端框架
• Element Plus：UI组件库
• Axios：HTTP客户端
• ECharts 5.x：数据可视化

2.2 系统架构设计

系统采用典型的三层架构设计：

1. 表现层：基于Vue.js构建的Web界面，提供用户交互
2. 业务逻辑层：Spring Boot实现的核心业务处理
3. 数据访问层：MyBatis-Plus操作MySQL数据库

架构图如下：

code复制┌───────────────────────────────────────────────────┐
│                  客户端浏览器                      │
└───────────────────────────────────────────────────┘
           ▲                               │
           │ HTTP/HTTPS                   │
           │                               ▼
┌───────────────────────────────────────────────────┐
│                  Vue.js前端应用                    │
└───────────────────────────────────────────────────┘
           ▲                               │
           │ RESTful API                   │
           │                               ▼
┌───────────────────────────────────────────────────┐
│                Spring Boot后端服务                 │
├───────────────────┬───────────────────┬───────────┤
│   用户管理模块    │  设备管理模块     │ 审批模块  │
└───────────────────┴───────────────────┴───────────┘
           ▲                               │
           │ 数据访问                      │
           │                               ▼
┌───────────────────────────────────────────────────┐
│                    MySQL数据库                     │
└───────────────────────────────────────────────────┘

2.3 数据库设计

数据库设计遵循第三范式，主要包含以下核心表：

1. 用户表(sys_user)：

   • 存储系统用户信息，包括教职工和学生
   • 关键字段：user_id, username, password, real_name, role_id, dept_id

2. 设备表(equipment)：

   • 记录实验室设备详细信息
   • 关键字段：equip_id, equip_name, model, spec, price, status, location

3. 借用记录表(borrow_record)：

   • 记录设备借用历史
   • 关键字段：record_id, equip_id, user_id, borrow_time, return_time, status

4. 报修记录表(repair_record)：

   • 记录设备报修信息
   • 关键字段：repair_id, equip_id, reporter_id, fault_desc, status

数据库ER图如下：

code复制┌─────────────┐       ┌───────────────┐       ┌──────────────┐
│   sys_user  │       │   equipment   │       │ borrow_record│
├─────────────┤       ├───────────────┤       ├──────────────┤
│ PK user_id  │───────│ PK equip_id   │◄──────┤ FK equip_id  │
│   username  │       │   equip_name  │       │ FK user_id   │
│   password  │       │   model       │       │ borrow_time  │
│   role_id   │       │   status      │       │ return_time  │
│   dept_id   │       │   location    │       │ status       │
└─────────────┘       └───────────────┘       └──────────────┘
       ▲                                         ▲
       │                                         │
       │                                         │
┌─────────────┐                         ┌──────────────┐
│  sys_role   │                         │ repair_record│
├─────────────┤                         ├──────────────┤
│ PK role_id  │                         │ PK repair_id │
│  role_name  │                         │ FK equip_id  │
│  role_key   │                         │ reporter_id  │
│  status     │                         │ fault_desc   │
└─────────────┘                         │ status       │
                                        └──────────────┘

3. 核心功能实现

3.1 设备借用流程实现

设备借用是系统的核心功能之一，其业务流程如下：

1. 用户登录系统后，查询可借用设备
2. 选择目标设备，填写借用申请
3. 系统自动提交至相关审批人
4. 审批通过后，生成借用记录
5. 用户按约定时间领取设备
6. 使用完毕后归还设备，管理员确认

关键技术实现：

1. 借用申请接口：

java复制@RestController
@RequestMapping("/api/borrow")
public class BorrowController {
    
    @Autowired
    private BorrowService borrowService;
    
    @PostMapping("/apply")
    public Result applyBorrow(@RequestBody BorrowApplyDTO dto) {
        // 验证用户身份
        User currentUser = ShiroUtils.getCurrentUser();
        if(currentUser == null) {
            return Result.error("请先登录");
        }
        
        // 验证设备状态
        Equipment equipment = equipmentService.getById(dto.getEquipId());
        if(equipment == null || !"0".equals(equipment.getStatus())) {
            return Result.error("设备不可借用");
        }
        
        // 创建借用记录
        BorrowRecord record = new BorrowRecord();
        record.setEquipId(dto.getEquipId());
        record.setUserId(currentUser.getUserId());
        record.setBorrowTime(dto.getBorrowTime());
        record.setExpectedReturnTime(dto.getExpectedReturnTime());
        record.setPurpose(dto.getPurpose());
        record.setStatus("0"); // 待审批
        
        if(borrowService.save(record)) {
            // 更新设备状态为"待出借"
            equipment.setStatus("1");
            equipmentService.updateById(equipment);
            return Result.success("借用申请已提交");
        }
        
        return Result.error("提交失败");
    }
}

2. 借用审批流程：
   系统采用工作流引擎实现多级审批，核心代码如下：

java复制@Service
public class BorrowApprovalService {
    
    @Autowired
    private BorrowRecordMapper borrowRecordMapper;
    
    @Autowired
    private EquipmentMapper equipmentMapper;
    
    @Transactional
    public Result approve(Long recordId, String approvalResult, String comment) {
        BorrowRecord record = borrowRecordMapper.selectById(recordId);
        if(record == null) {
            return Result.error("记录不存在");
        }
        
        User approver = ShiroUtils.getCurrentUser();
        if("1".equals(approvalResult)) { // 批准
            record.setStatus("1"); // 已批准
            record.setApproverId(approver.getUserId());
            record.setApprovalTime(new Date());
            borrowRecordMapper.updateById(record);
            
            // 更新设备状态为"已借出"
            Equipment equipment = equipmentMapper.selectById(record.getEquipId());
            equipment.setStatus("2"); // 已借出
            equipmentMapper.updateById(equipment);
            
            // 发送通知给借用人
            notifyUser(record.getUserId(), "您的借用申请已批准");
            
        } else { // 拒绝
            record.setStatus("2"); // 已拒绝
            record.setApproverId(approver.getUserId());
            record.setApprovalTime(new Date());
            record.setRejectReason(comment);
            borrowRecordMapper.updateById(record);
            
            // 更新设备状态为"可借用"
            Equipment equipment = equipmentMapper.selectById(record.getEquipId());
            equipment.setStatus("0"); // 可借用
            equipmentMapper.updateById(equipment);
            
            // 发送通知给借用人
            notifyUser(record.getUserId(), "您的借用申请被拒绝，原因：" + comment);
        }
        
        return Result.success("操作成功");
    }
}

3.2 设备报修功能实现

设备报修功能允许用户在线提交设备故障信息，管理员可查看并安排维修。主要流程包括：

1. 用户选择需要报修的设备
2. 填写故障描述，可上传故障图片
3. 提交报修申请
4. 管理员查看报修信息并安排维修
5. 维修完成后更新状态

关键技术点：

1. 文件上传处理：

java复制@RestController
@RequestMapping("/api/upload")
public class FileUploadController {
    
    @Value("${file.upload-dir}")
    private String uploadDir;
    
    @PostMapping("/image")
    public Result uploadImage(@RequestParam("file") MultipartFile file) {
        if(file.isEmpty()) {
            return Result.error("请选择文件");
        }
        
        try {
            // 生成唯一文件名
            String originalFilename = file.getOriginalFilename();
            String fileExt = originalFilename.substring(originalFilename.lastIndexOf("."));
            String newFilename = UUID.randomUUID().toString() + fileExt;
            
            // 创建目录
            File dir = new File(uploadDir);
            if(!dir.exists()) {
                dir.mkdirs();
            }
            
            // 保存文件
            File dest = new File(uploadDir + newFilename);
            file.transferTo(dest);
            
            // 返回访问路径
            String fileUrl = "/uploads/" + newFilename;
            return Result.success("上传成功").put("url", fileUrl);
            
        } catch (IOException e) {
            log.error("文件上传失败", e);
            return Result.error("上传失败");
        }
    }
}

2. 报修记录处理：

java复制@Service
public class RepairServiceImpl implements RepairService {
    
    @Autowired
    private RepairRecordMapper repairRecordMapper;
    
    @Autowired
    private EquipmentMapper equipmentMapper;
    
    @Override
    @Transactional
    public Result submitRepair(RepairSubmitDTO dto) {
        // 验证设备是否存在
        Equipment equipment = equipmentMapper.selectById(dto.getEquipId());
        if(equipment == null) {
            return Result.error("设备不存在");
        }
        
        // 获取当前用户
        User currentUser = ShiroUtils.getCurrentUser();
        if(currentUser == null) {
            return Result.error("请先登录");
        }
        
        // 创建报修记录
        RepairRecord record = new RepairRecord();
        record.setEquipId(dto.getEquipId());
        record.setReporterId(currentUser.getUserId());
        record.setFaultDesc(dto.getFaultDesc());
        record.setFaultImages(dto.getFaultImages());
        record.setReportTime(new Date());
        record.setStatus("0"); // 待处理
        
        if(repairRecordMapper.insert(record) > 0) {
            // 更新设备状态为"维修中"
            equipment.setStatus("3");
            equipmentMapper.updateById(equipment);
            
            return Result.success("报修成功");
        }
        
        return Result.error("报修失败");
    }
}

4. 系统安全设计

4.1 认证与授权

系统采用Apache Shiro框架实现认证和授权功能，主要配置如下：

1. Shiro配置类：

java复制@Configuration
public class ShiroConfig {
    
    @Bean
    public ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager) {
        ShiroFilterFactoryBean shiroFilter = new ShiroFilterFactoryBean();
        shiroFilter.setSecurityManager(securityManager);
        
        // 设置登录URL
        shiroFilter.setLoginUrl("/login");
        // 设置未授权跳转URL
        shiroFilter.setUnauthorizedUrl("/unauthorized");
        
        // 定义过滤器链
        Map<String, String> filterMap = new LinkedHashMap<>();
        // 静态资源不拦截
        filterMap.put("/static/**", "anon");
        filterMap.put("/uploads/**", "anon");
        // 登录接口不拦截
        filterMap.put("/api/login", "anon");
        // 其他请求需要认证
        filterMap.put("/**", "authc");
        
        shiroFilter.setFilterChainDefinitionMap(filterMap);
        return shiroFilter;
    }
    
    @Bean
    public Realm realm() {
        UserRealm realm = new UserRealm();
        realm.setCredentialsMatcher(hashedCredentialsMatcher());
        return realm;
    }
    
    @Bean
    public HashedCredentialsMatcher hashedCredentialsMatcher() {
        HashedCredentialsMatcher matcher = new HashedCredentialsMatcher();
        matcher.setHashAlgorithmName("SHA-256");
        matcher.setHashIterations(1024);
        matcher.setStoredCredentialsHexEncoded(true);
        return matcher;
    }
}

2. 自定义Realm：

java复制public class UserRealm extends AuthorizingRealm {
    
    @Autowired
    private UserService userService;
    
    @Autowired
    private RoleService roleService;
    
    @Autowired
    private MenuService menuService;
    
    @Override
    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) {
        User user = (User) principals.getPrimaryPrincipal();
        
        // 查询用户角色
        Set<String> roles = roleService.getRoleKeysByUserId(user.getUserId());
        // 查询用户权限
        Set<String> permissions = menuService.getPermsByUserId(user.getUserId());
        
        SimpleAuthorizationInfo info = new SimpleAuthorizationInfo();
        info.setRoles(roles);
        info.setStringPermissions(permissions);
        return info;
    }
    
    @Override
    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {
        UsernamePasswordToken upToken = (UsernamePasswordToken) token;
        String username = upToken.getUsername();
        
        // 查询用户信息
        User user = userService.getByUsername(username);
        if(user == null) {
            throw new UnknownAccountException("账号不存在");
        }
        if("1".equals(user.getStatus())) {
            throw new LockedAccountException("账号已锁定");
        }
        
        return new SimpleAuthenticationInfo(user, user.getPassword(), getName());
    }
}

4.2 数据安全

1. 密码加密存储：
   所有用户密码采用SHA-256算法加盐哈希存储，确保即使数据库泄露也无法直接获取明文密码。

java复制public class PasswordUtils {
    
    private static final SecureRandom random = new SecureRandom();
    private static final int SALT_LENGTH = 16;
    
    public static String generateSalt() {
        byte[] salt = new byte[SALT_LENGTH];
        random.nextBytes(salt);
        return Hex.encodeHexString(salt);
    }
    
    public static String encryptPassword(String password, String salt) {
        String combined = salt + password;
        return new Sha256Hash(combined, salt, 1024).toHex();
    }
    
    public static boolean validate(String inputPwd, String salt, String storedPwd) {
        String encrypted = encryptPassword(inputPwd, salt);
        return encrypted.equals(storedPwd);
    }
}

2. SQL注入防护：

• 使用MyBatis-Plus提供的Wrapper构建查询条件，避免手动拼接SQL
• 所有用户输入参数进行严格校验和转义
• 使用预编译语句执行数据库操作

3. XSS防护：

• 前端使用Vue的v-html指令自动转义HTML内容
• 后端对用户提交的内容进行过滤和转义
• 设置HTTP头X-XSS-Protection: 1; mode=block

5. 系统部署与优化

5.1 生产环境部署

系统支持多种部署方式，推荐采用Docker容器化部署，便于管理和扩展。

1. Docker Compose部署文件：

yaml复制version: '3.8'

services:
  mysql:
    image: mysql:8.0
    container_name: lab-mysql
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      MYSQL_DATABASE: lab_equipment
      MYSQL_USER: ${DB_USER}
      MYSQL_PASSWORD: ${DB_PASSWORD}
    volumes:
      - ./mysql/data:/var/lib/mysql
      - ./mysql/conf:/etc/mysql/conf.d
    ports:
      - "3306:3306"
    restart: always

  redis:
    image: redis:6.2
    container_name: lab-redis
    volumes:
      - ./redis/data:/data
    ports:
      - "6379:6379"
    restart: always

  backend:
    build: ./backend
    container_name: lab-backend
    depends_on:
      - mysql
      - redis
    environment:
      - SPRING_PROFILES_ACTIVE=prod
      - DB_URL=jdbc:mysql://mysql:3306/lab_equipment
      - DB_USER=${DB_USER}
      - DB_PASSWORD=${DB_PASSWORD}
      - REDIS_HOST=redis
    ports:
      - "8080:8080"
    restart: always

  frontend:
    build: ./frontend
    container_name: lab-frontend
    ports:
      - "80:80"
    restart: always

2. Nginx配置：

nginx复制server {
    listen 80;
    server_name lab.example.com;
    
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api/ {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    
    location /uploads/ {
        alias /data/uploads/;
    }
}

5.2 性能优化

1. 缓存策略：

• 使用Redis缓存频繁访问的数据，如菜单权限、系统配置等
• 实现二级缓存：本地缓存(Caffeine) + 分布式缓存(Redis)
• 对设备列表等查询结果进行缓存

java复制@Service
@CacheConfig(cacheNames = "equipment")
public class EquipmentServiceImpl implements EquipmentService {
    
    @Autowired
    private EquipmentMapper equipmentMapper;
    
    @Cacheable(key = "'list:' + #pageNum + '-' + #pageSize")
    @Override
    public PageInfo<Equipment> list(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<Equipment> list = equipmentMapper.selectList(null);
        return new PageInfo<>(list);
    }
    
    @CacheEvict(allEntries = true)
    @Override
    public void clearCache() {
        // 清空缓存
    }
}

2. 数据库优化：

• 为常用查询字段添加索引
• 使用MyBatis-Plus的分页插件实现物理分页
• 对大表进行分区或分表
• 定期进行数据库维护和优化

3. 前端性能优化：

• 使用Vue的异步组件和路由懒加载
• 对静态资源进行Gzip压缩
• 启用HTTP/2协议
• 使用CDN加速静态资源加载

6. 系统测试与验证

6.1 测试策略

系统采用分层测试策略，确保各组件和整体功能符合预期：

1. 单元测试：使用JUnit5测试各个Service方法
2. 集成测试：测试Controller层接口
3. 端到端测试：使用Cypress进行前端到后端的完整流程测试
4. 性能测试：使用JMeter模拟多用户并发场景

6.2 关键测试用例

1. 设备借用流程测试：

2. 系统性能测试结果：

6.3 测试工具集成

系统集成JaCoCo进行代码覆盖率测试，确保测试充分性：

xml复制<plugin>
    <groupId>org.jacoco</groupId>
    <artifactId>jacoco-maven-plugin</artifactId>
    <version>0.8.7</version>
    <executions>
        <execution>
            <goals>
                <goal>prepare-agent</goal>
            </goals>
        </execution>
        <execution>
            <id>report</id>
            <phase>test</phase>
            <goals>
                <goal>report</goal>
            </goals>
        </execution>
    </executions>
</plugin>

测试覆盖率结果：

• 行覆盖率：85%
• 分支覆盖率：78%
• 方法覆盖率：92%

7. 项目总结与展望

7.1 项目成果

本系统经过三个月的开发和测试，已成功在某高校实验室部署使用，取得了显著成效：

1. 管理效率提升：设备借用审批时间从原来的平均2天缩短至2小时
2. 错误率降低：人工记录错误率从5%降至0.1%
3. 设备利用率提高：通过数据分析优化设备调度，利用率提升30%
4. 用户满意度：根据问卷调查，用户满意度达到92%

7.2 经验总结

在项目开发过程中，我们积累了以下宝贵经验：

1. 技术选型要谨慎：Spring Boot和Vue的组合确实能大幅提升开发效率，但要充分考虑团队技术储备
2. 权限设计要灵活：RBAC模型基本能满足需求，但要预留扩展空间
3. 测试要尽早介入：单元测试和集成测试应该与开发同步进行
4. 文档要完整：完善的API文档和用户手册能显著减少后期维护成本

7.3 未来改进方向

根据用户反馈和实际使用情况，计划在后续版本中增加以下功能：

1. 移动端支持：开发微信小程序，方便用户随时提交申请和查询状态
2. 智能调度：基于历史数据预测设备需求，实现智能调度
3. 物联网集成：通过RFID技术实现设备自动识别和定位
4. 数据分析：增加更丰富的数据分析报表，辅助管理决策

8. 常见问题与解决方案

在实际开发和部署过程中，我们遇到并解决了以下典型问题：

8.1 跨域问题

问题描述：前端访问后端API时出现CORS错误

解决方案：

1. 后端配置CORS过滤器

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

2. 前端配置代理（开发环境）

javascript复制module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

8.2 性能瓶颈

问题描述：设备列表查询在数据量增大后响应变慢

解决方案：

1. 添加数据库索引

sql复制ALTER TABLE equipment ADD INDEX idx_status_location (status, location);

2. 实现分页查询

java复制@GetMapping("/list")
public Result list(@RequestParam(defaultValue = "1") int pageNum, 
                  @RequestParam(defaultValue = "10") int pageSize) {
    PageHelper.startPage(pageNum, pageSize);
    List<Equipment> list = equipmentService.list();
    return Result.success(new PageInfo<>(list));
}

3. 添加缓存

java复制@Cacheable(value = "equipment", key = "'list:' + #pageNum + '-' + #pageSize")
public PageInfo<Equipment> list(int pageNum, int pageSize) {
    // ...
}

8.3 文件上传大小限制

问题描述：上传大文件时报错

解决方案：

1. 后端调整Spring Boot配置

properties复制# application.properties
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

2. 前端添加文件大小校验

javascript复制const beforeUpload = (file) => {
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error('文件大小不能超过10MB');
    return false;
  }
  return true;
}

9. 开发心得与建议

9.1 开发工具推荐

1. 后端开发：

   • IntelliJ IDEA：智能Java IDE
   • Postman：API测试工具
   • Docker：容器化部署
   • Git：版本控制

2. 前端开发：

   • VS Code：轻量级编辑器
   • Vue DevTools：Vue调试工具
   • Chrome开发者工具：调试和分析

3. 数据库工具：

   • Navicat：数据库管理
   • MySQL Workbench：官方数据库工具

9.2 学习资源推荐

1. Spring Boot：

   • 官方文档：https://spring.io/projects/spring-boot
   • 《Spring Boot实战》
   • B站Spring Boot教程

2. Vue.js：

   • 官方文档：https://vuejs.org/
   • 《Vue.js设计与实现》
   • Vue Mastery视频教程

3. 系统设计：

   • 《系统架构设计》
   • 《微服务设计模式》
   • 极客时间架构师课程

9.3 项目开发建议

1. 需求分析阶段：

   • 与实验室管理人员充分沟通，明确所有业务流程
   • 绘制详细的流程图和原型图
   • 确定优先级，分阶段实现

2. 开发阶段：

   • 遵循编码规范，保持代码整洁
   • 编写单元测试，确保代码质量
   • 定期代码审查，及时发现并解决问题

3. 测试阶段：

   • 制定详细的测试计划
   • 模拟真实用户场景进行测试
   • 记录并跟踪所有发现的缺陷

4. 部署维护：

   • 编写详细的部署文档
   • 建立监控系统，及时发现并解决问题
   • 定期备份数据，确保数据安全