SpringBoot+Vue高校防疫系统开发与优化实践-代码聚汇网

SpringBoot+Vue高校防疫系统开发与优化实践

千纸鹤Amanda·2026-08-14·阅读 23 GEO检测（免费）

SpringBootVue疫情防控系统

|难度：普通|阅读约 8 分钟

1. 高校疫情防控Web系统概述

在2020年以来的特殊时期，高校作为人员密集场所面临着严峻的防控压力。我参与开发的这套基于SpringBoot+Vue+MySQL的疫情防控管理系统，已经在三所万人规模高校稳定运行两年多，日均处理健康打卡数据超过5万条。系统采用前后端分离架构，后端使用SpringBoot 2.7.4+MyBatis Plus构建RESTful API，前端采用Vue 2.6+Element UI实现响应式界面，数据库选用MySQL 8.0并做了读写分离优化。

这个系统最核心的价值在于将分散的防疫流程数字化：从学生每日健康打卡、教职工行程报备，到校内场所扫码登记、异常情况预警，形成完整的闭环管理。相比传统纸质登记，系统将信息统计效率提升20倍以上，某次密接排查时间从原来的8小时缩短到15分钟。

提示：虽然系统针对高校场景设计，但只需调整数据字典和权限配置，同样适用于企业园区、社区等中大规模组织的防疫管理。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 系统架构与技术选型

2.1 后端SpringBoot设计要点

后端采用经典的三层架构（Controller-Service-DAO），但针对疫情防控的特殊需求做了关键增强：

高并发处理：使用Guava RateLimiter对/health/submit接口做限流（1000请求/秒），配合Redis缓存热点数据（如场所二维码信息）
定时任务：通过@Scheduled实现：
- 每日23:00汇总各院系健康异常报表
- 每10分钟检查未打卡人员名单

安全防护：

java复制// XSS过滤配置示例
@Bean
public FilterRegistrationBean<XssFilter> xssFilterRegistration() {
    FilterRegistrationBean<XssFilter> registration = new FilterRegistrationBean<>();
    registration.setFilter(new XssFilter());
    registration.addUrlPatterns("/*");
    registration.setOrder(1);
    return registration;
}

2.2 前端Vue优化实践

前端项目通过vue-cli 4搭建，主要解决两个核心问题：

大数据量渲染性能：
- 使用virtual-scroll优化5000+条历史记录展示
- 采用WebWorker处理导出的Excel数据

多端适配方案：

javascript复制// 基于viewport的响应式布局
const setRem = () => {
    let designSize = 1920; // 设计稿宽度
    let html = document.documentElement;
    let wW = html.clientWidth;
    let rem = (wW * 100) / designSize;
    document.documentElement.style.fontSize = rem + 'px';
}

2.3 MySQL数据库设计

主要表结构及其关系如下图所示（此处应为文字描述）：

用户基础表(user_base)：包含教职工/学生共性字段
健康打卡表(health_report)：每日打卡数据，设置复合索引(user_id, report_date)
场所登记表(location_checkin)：记录各场所扫码情况，使用空间索引优化地理查询

针对高频查询的优化措施：

将text类型的备注字段拆分成单独的表
对status字段使用TINYINT代替VARCHAR
配置InnoDB缓冲池大小为物理内存的70%

3. 核心功能实现细节

3.1 健康打卡模块

采用"表单动态配置+数据校验"的设计模式：

后台可配置不同用户组的打卡字段（如学生需填报宿舍号）
前端根据用户类型动态渲染表单

后端验证逻辑：

java复制// 体温校验规则
@AssertTrue(message = "体温值异常")
public boolean isTemperatureValid() {
    return temperature >= 35.0 && temperature <= 42.0;
}

3.2 异常预警系统

构建三级预警机制：

实时规则引擎（Drools）检测：
- 连续3天体温≥37.3℃
- 健康码突然变红
定时任务扫描：
- 未按规定做核酸检测
- 到过风险地区未报备
人工标记异常

预警信息通过WebSocket实时推送到管理端，同时对接短信平台。

3.3 数据可视化大屏

使用ECharts实现的关键指标：

实时在校人数热力图
疫苗接种进度甘特图
异常情况发生趋势折线图

性能优化技巧：

采用数据采样策略处理历史数据
使用WebGL渲染超过1万点的散点图
设置60秒自动刷新避免内存泄漏

4. 部署与运维实践

4.1 服务器环境配置

推荐的生产环境配置：

应用服务器：2核4G ×2（Nginx负载均衡）
数据库服务器：4核8G（主从架构）
Redis：1核2G（持久化开启）

关键Linux调优参数：

bash复制# 增加文件描述符限制
ulimit -n 65535

# 调整Swappiness
vm.swappiness = 10

4.2 容器化部署方案

使用Docker Compose编排服务：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
    volumes:
      - ./mysql/data:/var/lib/mysql
      - ./mysql/conf:/etc/mysql/conf.d

  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql

4.3 常见问题排查

打卡高峰期响应慢：
- 检查Redis内存使用情况
- 分析慢查询日志：mysqldumpslow -t 10 /var/log/mysql/mysql-slow.log

二维码识别失败：

验证Zxing库版本（推荐3.4.1）

调整图像预处理参数：

java复制Hashtable<DecodeHintType, Object> hints = new Hashtable<>();
hints.put(DecodeHintType.TRY_HARDER, Boolean.TRUE);

定时任务不执行：
- 确认@EnableScheduling注解已添加
- 检查服务器时区设置：timedatectl set-timezone Asia/Shanghai

5. 二次开发建议

对于需要扩展功能的开发者，推荐以下改造方向：

多租户支持：
- 在user_base表添加tenant_id字段
- 使用ThreadLocal传递租户标识
- 改造MyBatis拦截器自动拼接租户条件

微信小程序接入：

javascript复制// 获取微信定位
wx.getLocation({
  type: 'gcj02',
  success: (res) => {
    this.latitude = res.latitude
    this.longitude = res.longitude
  }
})

BI分析增强：
- 集成Apache Superset
- 构建学生流动轨迹图谱
- 预测疫情传播风险模型

这套系统在实际运行中经历过三次重大迭代，最深刻的教训是：一定要预留足够的扩展字段。我们在第二版不得不修改30多张表结构来适应防疫政策的变化，后来在所有表中都增加了5个备用VARCHAR字段和3个备用INT字段，后续需求变更基本通过配置就能实现。