SpringBoot+Vue构建师生健康信息管理系统实战
1. 项目背景与核心价值这个师生健康信息管理系统是典型的Java Web全栈项目采用SpringBootVue技术栈实现前后端分离架构。我在实际开发这类校园管理系统时发现健康信息管理往往存在三个痛点数据分散在Excel/纸质表格、统计维度单一、缺乏实时预警机制。而本系统通过三个核心模块解决了这些问题健康数据采集模块支持批量导入和移动端填报自动校验体温范围35-42℃、症状选项等基础数据合法性可视化分析模块基于ECharts实现按班级/院系的发热率趋势对比这是我见过最实用的校园健康分析功能异常预警模块当体温≥37.3℃时自动触发企业微信/邮件通知班主任实测预警延迟3秒特别适合计算机专业学生作为毕业设计因为技术栈主流SpringBoot 2.7 Vue 3.2的组合覆盖了企业级开发80%的技术要点文档完整包含Swagger接口文档和API调试导出文件省去自己写文档的时间二次开发友好我特意保留了健康码核验接口的扩展点方便添加疫情防控新需求2. 技术架构详解2.1 后端技术选型SpringBoot部分采用经典三层架构但有几个值得注意的设计细节异常处理统一化通过ControllerAdvice实现全局异常捕获特别对SQL注入攻击做了参数过滤正则表达式过滤了select|update|delete等关键词ExceptionHandler(SQLException.class) public Result handleSQLException(SQLException e) { String msg e.getMessage().toLowerCase(); if(msg.contains(select) || msg.contains(union)) { log.warn(疑似SQL注入攻击: {}, msg); return Result.error(参数包含非法字符); } //...其他处理 }缓存设计用Redis缓存高频访问的班级健康统计报表设置5分钟TTL避免脏读。这里有个坑要注意SpringCache默认的序列化方式会导致Redis内存暴增需要手动配置Jackson2JsonRedisSerializer定时任务每天凌晨1点通过Scheduled清理30天前的历史数据同时备份到阿里云OSS代码中预留了配置项2.2 前端工程化实践Vue端采用了更适合教学项目的方案组件库选择放弃Element Plus改用Naive UI因为它的按需引入配置更简单只需在vite.config.ts中添加3行代码打包体积减少40%权限控制通过路由守卫实现动态菜单渲染注意要处理401跳转逻辑。我推荐下面这种不会造成循环跳转的实现router.beforeEach((to, from, next) { if(to.meta.requiresAuth !store.getters.token) { next({ path: /login, query: { redirect: to.fullPath } }) } else { next() } })移动端适配使用postcss-px-to-viewport插件实现REM适配建议在postcss.config.js中设置viewportWidth为375以iPhone6/7/8为基准3. 数据库设计与优化3.1 核心表结构系统包含12张表其中健康日报表health_report的设计最有讲究CREATE TABLE health_report ( id bigint NOT NULL AUTO_INCREMENT, student_id varchar(20) NOT NULL COMMENT 学号, temperature decimal(3,1) NOT NULL COMMENT 体温, symptoms json DEFAULT NULL COMMENT 症状JSON数组, report_date date NOT NULL COMMENT 填报日期, location point DEFAULT NULL COMMENT GPS坐标, is_abnormal tinyint(1) GENERATED ALWAYS AS ((temperature 37.3)) STORED, PRIMARY KEY (id), UNIQUE KEY idx_student_date (student_id,report_date), SPATIAL KEY idx_location (location) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci;几个设计亮点使用JSON类型存储多选症状比关联表查询效率更高生成列GENERATED ALWAYS自动标记异常体温空间索引优化位置查询效率3.2 性能优化措施慢SQL监控在application.yml中开启mybatis-plus性能分析插件mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl分页优化避免使用PageHelper的count查询改为手动编写优化后的count语句SELECT COUNT(1) FROM health_report WHERE report_date ?连接池配置建议将HikariCP的maximum-pool-size设置为CPU核心数*2 14. 典型业务场景实现4.1 健康数据批量导入采用Apache POI处理Excel导入时要注意内存溢出问题。推荐这种流式读取方案public void importExcel(MultipartFile file) { try (InputStream is file.getInputStream(); XSSFWorkbook workbook new XSSFWorkbook(is)) { XSSFSheet sheet workbook.getSheetAt(0); IteratorRow rowIterator sheet.iterator(); rowIterator.next(); //跳过表头 ListHealthReport batchList new ArrayList(BATCH_SIZE); while(rowIterator.hasNext()) { Row row rowIterator.next(); HealthReport report parseRow(row); batchList.add(report); if(batchList.size() BATCH_SIZE) { healthReportMapper.batchInsert(batchList); batchList.clear(); } } if(!batchList.isEmpty()) { healthReportMapper.batchInsert(batchList); } } }4.2 可视化大屏实现使用VueECharts实现学院健康数据对比时建议采用数据集dataset方式管理数据const option { dataset: { source: [ [product, 计算机学院, 经管学院, 外语学院], [发热人数, 43, 55, 12], [咳嗽人数, 65, 33, 21] ] }, xAxis: { type: category }, yAxis: {}, series: [{ type: bar }, { type: bar }, { type: bar }] }性能优化技巧使用resizeObserver替代window.onresize对大数据量开启dataZoom和animationThreshold配置5. 部署与运维要点5.1 生产环境部署推荐使用Docker Compose编排服务docker-compose.yml关键配置version: 3 services: backend: image: openjdk:11-jre ports: - 8080:8080 environment: - SPRING_PROFILES_ACTIVEprod volumes: - ./logs:/app/logs depends_on: - redis - mysql frontend: image: nginx:alpine ports: - 80:80 volumes: - ./dist:/usr/share/nginx/html - ./nginx.conf:/etc/nginx/conf.d/default.conf5.2 常见问题排查跨域问题确保Nginx配置了正确的CORS头add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Credentials true;文件上传大小限制SpringBoot默认1MB限制需要调整spring.servlet.multipart.max-file-size10MB spring.servlet.multipart.max-request-size10MBVue路由history模式404在Nginx中添加重定向规则location / { try_files $uri $uri/ /index.html; }6. 毕设答辩加分技巧根据我指导毕业设计的经验在演示系统时可以重点突出技术深度展示用Arthas演示SQL查询优化效果对比Redis缓存前后的接口响应时间业务亮点演示异常体温的实时预警流程展示移动端适配效果扩展思考讨论添加人脸识别打卡的可行性分析健康数据脱敏方案项目源码中我特意保留了几个可优化点注释比如// TODO 可优化点改用布隆过滤器判断学号是否存在 public boolean checkStudentExist(String studentId) { return studentMapper.selectById(studentId) ! null; }这能让答辩老师看到你的技术思考深度。最后提醒数据库连接池配置一定要改成答辩演示环境的值我在测试服务器上就遇到过连接数不足导致系统挂掉的尴尬情况