1. 高校疫情防控Web系统全栈开发实战去年参与某高校防疫系统升级时我完整走通了SpringBootVue3的全栈开发流程。这个技术栈组合在应对高并发疫情数据场景时表现出色特别是Vue3的Composition API让前端状态管理变得异常清晰。下面分享这套系统的完整实现方案包含后端API设计、前端可视化大屏以及部署时遇到的真实坑点。提示本文基于SpringBoot 2.7.18 Vue3.3.4 MyBatis-Plus 3.5.3.1版本验证MySQL建议使用8.0.28及以上版本避免JSON字段兼容问题1.1 系统核心模块解析典型的校园防疫系统包含以下关键模块健康打卡子系统基于地理围栏的定位校验行程追踪模块对接运营商基站数据API核酸统计看板ECharts动态可视化隔离管理工作流引擎驱动审批流程应急预警基于规则引擎的自动触发技术选型上后端采用SpringBoot2而非3.x版本主要考虑国内企业环境对JDK17的接受度。实测在4核8G服务器上该组合可支撑3000师生同时提交健康信息。2. 后端工程搭建与核心配置2.1 SpringBoot2项目初始化使用IDEA 2024创建项目时依赖选择需要特别注意版本匹配parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version /parent dependencies !-- 必须使用3.5.x版本的MyBatis-Plus -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- 防止与Vue3前端冲突 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId exclusions exclusion groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-tomcat/artifactId /exclusion /exclusions /dependency /xml2.2 MyBatis-Plus最佳实践疫情数据表设计示例Data TableName(epidemic_report) public class HealthReport { TableId(type IdType.ASSIGN_ID) private Long id; // 使用MySQL8的JSON类型存储动态字段 TableField(typeHandler FastjsonTypeHandler.class) private JSONObject symptoms; // 自动填充打卡时间 TableField(fill FieldFill.INSERT) private LocalDateTime reportTime; }动态查询构造技巧public PageHealthReport queryReports(ReportQuery query) { return lambdaQuery() .ge(query.getStartTime() ! null, HealthReport::getReportTime, query.getStartTime()) .le(query.getEndTime() ! null, HealthReport::getReportTime, query.getEndTime()) .like(StringUtils.isNotBlank(query.getUsername()), HealthReport::getUsername, query.getUsername()) .page(new Page(query.getPage(), query.getSize())); }踩坑记录MyBatis-Plus 3.5.x版本与SpringBoot2.7.x存在自动注入冲突需在启动类添加MapperScan明确指定扫描路径3. Vue3前端架构设计3.1 工程化配置要点采用Vite4构建工具配置代理解决跨域// vite.config.js export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: path path.replace(/^\/api/, ) } } } })状态管理方案对比Pinia适合中小型应用Vuex4需要兼容旧项目时使用直接Composition API简单场景推荐3.2 疫情数据可视化实战使用ECharts5实现动态地图script setup import { onMounted } from vue import * as echarts from echarts const initChart () { const chart echarts.init(document.getElementById(map)) chart.setOption({ tooltip: { trigger: item, formatter: params { return ${params.name}br/确诊: ${params.value || 0}例 } }, visualMap: { min: 0, max: 100, text: [高, 低], inRange: { color: [#e0f3f8, #abd9e9, #74add1, #4575b4, #313695] } }, series: [{ name: 疫情分布, type: map, map: china, data: [] // 动态加载后端数据 }] }) } /script4. 安全防护与性能优化4.1 关键安全措施接口防护矩阵健康打卡JWT地理围栏双验证敏感数据字段级脱敏JsonSerialize批量导出加入速率限制Guava RateLimiterSQL注入防御配置mybatis-plus: configuration: default-scripting-language: freemarker log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 强制参数化查询 aggressive-lazy-loading: true4.2 高并发场景优化缓存策略设计Cacheable(value campusStats, key #campusId_#date.format(dateFormatter)) public CampusStats getCampusStats(Long campusId, LocalDate date) { // 数据库查询逻辑 }异步处理架构Async(epidemicTaskExecutor) public void processReportAsync(HealthReport report) { // 1. 数据清洗 // 2. 风险计算 // 3. 通知触发 }线程池配置建议spring: task: execution: pool: core-size: 8 max-size: 20 queue-capacity: 1000 thread-name-prefix: epidemic-task-5. 典型问题排查实录5.1 内存泄漏问题症状服务运行一段时间后出现Java: OutOfMemoryError: insufficient memory排查步骤使用jmap -histo:live pid查看对象分布发现MyBatis的Executor对象持续增长最终定位到未关闭的SqlSession解决方案// 在Filter或Interceptor中添加资源清理 Around(execution(* com..controller.*.*(..))) public Object handleSqlSession(ProceedingJoinPoint pjp) throws Throwable { try { return pjp.proceed(); } finally { SqlSessionHolder holder (SqlSessionHolder) TransactionSynchronizationManager.getResource(sqlSessionFactory); if (holder ! null) { holder.getSqlSession().clearCache(); } } }5.2 Vue3组件通信问题场景需要在三个子组件间共享疫情数据状态推荐方案// 使用provide/inject跨层级传递 // parent.vue const outbreakData ref({}) provide(outbreakData, outbreakData) // child.vue const data inject(outbreakData)备选方案Pinia// stores/epidemic.js export const useEpidemicStore defineStore(epidemic, { state: () ({ stats: null }), actions: { async fetchStats() { this.stats await api.getStats() } } })6. 部署与监控方案6.1 生产环境部署推荐使用Docker Compose编排version: 3.8 services: mysql: image: mysql:8.0.32 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} volumes: - ./mysql-data:/var/lib/mysql backend: build: ./epidemic-server ports: - 8080:8080 depends_on: - mysql frontend: build: ./epidemic-web ports: - 80:806.2 监控指标配置Prometheus关键指标# application.yml management: endpoints: web: exposure: include: health,metrics,prometheus metrics: tags: application: ${spring.application.name}Grafana监控看板应包含JVM内存使用率接口响应时间P99MySQL连接池活跃数Redis缓存命中率这套系统在某高校实际运行中平稳支撑了2023年春季学期日均20万的健康打卡请求。特别提醒在开发企业级Web应用时一定要提前规划好权限体系的设计我们最初采用的RBAC模型在后期的隔离区管理模块中就遇到了权限细粒度不足的问题后来不得不重构为ABAC模型。 SpringBoot+Vue3高校防疫系统全栈开发实战
1. 高校疫情防控Web系统全栈开发实战去年参与某高校防疫系统升级时我完整走通了SpringBootVue3的全栈开发流程。这个技术栈组合在应对高并发疫情数据场景时表现出色特别是Vue3的Composition API让前端状态管理变得异常清晰。下面分享这套系统的完整实现方案包含后端API设计、前端可视化大屏以及部署时遇到的真实坑点。提示本文基于SpringBoot 2.7.18 Vue3.3.4 MyBatis-Plus 3.5.3.1版本验证MySQL建议使用8.0.28及以上版本避免JSON字段兼容问题1.1 系统核心模块解析典型的校园防疫系统包含以下关键模块健康打卡子系统基于地理围栏的定位校验行程追踪模块对接运营商基站数据API核酸统计看板ECharts动态可视化隔离管理工作流引擎驱动审批流程应急预警基于规则引擎的自动触发技术选型上后端采用SpringBoot2而非3.x版本主要考虑国内企业环境对JDK17的接受度。实测在4核8G服务器上该组合可支撑3000师生同时提交健康信息。2. 后端工程搭建与核心配置2.1 SpringBoot2项目初始化使用IDEA 2024创建项目时依赖选择需要特别注意版本匹配parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version /parent dependencies !-- 必须使用3.5.x版本的MyBatis-Plus -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- 防止与Vue3前端冲突 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId exclusions exclusion groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-tomcat/artifactId /exclusion /exclusions /dependency /xml2.2 MyBatis-Plus最佳实践疫情数据表设计示例Data TableName(epidemic_report) public class HealthReport { TableId(type IdType.ASSIGN_ID) private Long id; // 使用MySQL8的JSON类型存储动态字段 TableField(typeHandler FastjsonTypeHandler.class) private JSONObject symptoms; // 自动填充打卡时间 TableField(fill FieldFill.INSERT) private LocalDateTime reportTime; }动态查询构造技巧public PageHealthReport queryReports(ReportQuery query) { return lambdaQuery() .ge(query.getStartTime() ! null, HealthReport::getReportTime, query.getStartTime()) .le(query.getEndTime() ! null, HealthReport::getReportTime, query.getEndTime()) .like(StringUtils.isNotBlank(query.getUsername()), HealthReport::getUsername, query.getUsername()) .page(new Page(query.getPage(), query.getSize())); }踩坑记录MyBatis-Plus 3.5.x版本与SpringBoot2.7.x存在自动注入冲突需在启动类添加MapperScan明确指定扫描路径3. Vue3前端架构设计3.1 工程化配置要点采用Vite4构建工具配置代理解决跨域// vite.config.js export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: path path.replace(/^\/api/, ) } } } })状态管理方案对比Pinia适合中小型应用Vuex4需要兼容旧项目时使用直接Composition API简单场景推荐3.2 疫情数据可视化实战使用ECharts5实现动态地图script setup import { onMounted } from vue import * as echarts from echarts const initChart () { const chart echarts.init(document.getElementById(map)) chart.setOption({ tooltip: { trigger: item, formatter: params { return ${params.name}br/确诊: ${params.value || 0}例 } }, visualMap: { min: 0, max: 100, text: [高, 低], inRange: { color: [#e0f3f8, #abd9e9, #74add1, #4575b4, #313695] } }, series: [{ name: 疫情分布, type: map, map: china, data: [] // 动态加载后端数据 }] }) } /script4. 安全防护与性能优化4.1 关键安全措施接口防护矩阵健康打卡JWT地理围栏双验证敏感数据字段级脱敏JsonSerialize批量导出加入速率限制Guava RateLimiterSQL注入防御配置mybatis-plus: configuration: default-scripting-language: freemarker log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 强制参数化查询 aggressive-lazy-loading: true4.2 高并发场景优化缓存策略设计Cacheable(value campusStats, key #campusId_#date.format(dateFormatter)) public CampusStats getCampusStats(Long campusId, LocalDate date) { // 数据库查询逻辑 }异步处理架构Async(epidemicTaskExecutor) public void processReportAsync(HealthReport report) { // 1. 数据清洗 // 2. 风险计算 // 3. 通知触发 }线程池配置建议spring: task: execution: pool: core-size: 8 max-size: 20 queue-capacity: 1000 thread-name-prefix: epidemic-task-5. 典型问题排查实录5.1 内存泄漏问题症状服务运行一段时间后出现Java: OutOfMemoryError: insufficient memory排查步骤使用jmap -histo:live pid查看对象分布发现MyBatis的Executor对象持续增长最终定位到未关闭的SqlSession解决方案// 在Filter或Interceptor中添加资源清理 Around(execution(* com..controller.*.*(..))) public Object handleSqlSession(ProceedingJoinPoint pjp) throws Throwable { try { return pjp.proceed(); } finally { SqlSessionHolder holder (SqlSessionHolder) TransactionSynchronizationManager.getResource(sqlSessionFactory); if (holder ! null) { holder.getSqlSession().clearCache(); } } }5.2 Vue3组件通信问题场景需要在三个子组件间共享疫情数据状态推荐方案// 使用provide/inject跨层级传递 // parent.vue const outbreakData ref({}) provide(outbreakData, outbreakData) // child.vue const data inject(outbreakData)备选方案Pinia// stores/epidemic.js export const useEpidemicStore defineStore(epidemic, { state: () ({ stats: null }), actions: { async fetchStats() { this.stats await api.getStats() } } })6. 部署与监控方案6.1 生产环境部署推荐使用Docker Compose编排version: 3.8 services: mysql: image: mysql:8.0.32 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} volumes: - ./mysql-data:/var/lib/mysql backend: build: ./epidemic-server ports: - 8080:8080 depends_on: - mysql frontend: build: ./epidemic-web ports: - 80:806.2 监控指标配置Prometheus关键指标# application.yml management: endpoints: web: exposure: include: health,metrics,prometheus metrics: tags: application: ${spring.application.name}Grafana监控看板应包含JVM内存使用率接口响应时间P99MySQL连接池活跃数Redis缓存命中率这套系统在某高校实际运行中平稳支撑了2023年春季学期日均20万的健康打卡请求。特别提醒在开发企业级Web应用时一定要提前规划好权限体系的设计我们最初采用的RBAC模型在后期的隔离区管理模块中就遇到了权限细粒度不足的问题后来不得不重构为ABAC模型。