SpringBoot+Vue校园疫情防控系统全栈开发实战与架构解析

简介：这是一套面向计算机专业本科生的毕业设计级校园疫情防控管理系统源码，基于Spring Boot与Vue实现前后端分离架构，专为高校健康信息数字化管理场景定制。资源包共424个文件，含101个Java后端核心代码、60个Vue前端组件、161个SVG图标资源及19个JS交互脚本，辅以SQL建库脚本、YML配置文件、BAT一键部署脚本（如run.bat/install.bat）和论文.doc文档，整体30.18MB，结构清晰、模块完整。已有2668人学习下载，适合作为毕设选题直接复用或二次开发。用户可获得开箱即用的可运行系统（已通过严格调试）、完整的数据库初始化方案、标准化的前后端工程目录结构，以及涵盖用户管理、健康打卡、轨迹上报、疫情预警等核心功能的全流程实现参考，有效降低毕设开发门槛并提升技术实践深度。

1. 项目概述与核心价值

最近几年，校园作为人员高度密集的场所，其常态化管理面临巨大挑战。传统的纸质登记、人工汇总方式不仅效率低下，数据滞后，更难以应对突发状况下的快速响应与精准溯源需求。正是在这样的背景下，一个基于SpringBoot和Vue技术栈的校园疫情防控系统，从一个课程设计或毕业设计的选题，演变成了一个极具现实意义和实用价值的练手项目。这个项目本质上是一个典型的管理信息系统，但它聚焦于一个非常具体且重要的垂直场景——校园疫情信息管理。

我之所以花时间研究并实践这个项目，是因为它几乎囊括了一个现代Web应用开发的所有核心环节：前后端分离架构、权限控制、数据可视化、报表生成、移动端适配，以及最重要的——业务流程与数据模型的抽象。对于开发者而言，无论你是想巩固SpringBoot和Vue的技术栈，还是想学习如何将一个复杂的线下业务流程转化为清晰的线上系统，这个项目都是一个绝佳的样本。它不像电商或社交平台那样功能庞杂，但又比简单的增删改查系统更具业务深度，非常适合中级开发者进行技术深化和项目经验积累。

简单来说，这个系统要解决的核心问题有三个：一是实现学生、教职工健康信息的便捷、快速、无接触上报；二是为各级管理员（如辅导员、院系负责人、校医院）提供一个实时、可视化的数据看板，用于监测异常和决策支持；三是建立一套从个人上报到校级汇总，再到异常情况处置的闭环流程。接下来，我将从技术选型、系统设计、核心实现到部署上线的全链路，拆解这个项目的构建过程与核心要点。

2. 技术栈选型与架构设计解析

2.1 后端技术栈：为什么是SpringBoot？

选择SpringBoot作为后端框架，几乎是当前Java生态下的标准答案，但在这个具体项目中，它的优势被进一步放大。

首先，快速启动与约定大于配置。疫情防控系统的开发往往有较强的时效性需求，SpringBoot的自动配置和起步依赖能让我们在几分钟内就搭建起一个包含Web、数据访问、安全等基础功能的后端服务。例如，通过spring-boot-starter-web、spring-boot-starter-data-jpa和spring-boot-starter-security这几个依赖，我们立刻就有了一个能处理HTTP请求、操作数据库并具备基础安全防护的应用程序骨架。

其次，生态成熟与稳定性。校园系统对稳定性和数据一致性要求较高。SpringBoot背后是强大的Spring生态，对于事务管理、缓存集成、消息队列等企业级需求都有成熟解决方案。在本项目中，我们可能会用到Spring Data JPA来简化数据库操作，用Spring Security来构建精细化的角色权限模型（如学生、辅导员、校医、系统管理员），用Spring Schedule来定时生成每日健康报表。这些组件的集成在SpringBoot中都非常顺畅。

最后，易于维护和扩展。系统的功能可能会随着防疫政策的变化而调整，比如增加核酸检测结果上传、疫苗接种信息核对等模块。SpringBoot提倡的模块化设计和清晰的层次结构（Controller, Service, Repository）使得功能扩展和维护变得相对容易。统一的异常处理、日志记录和配置管理也能提升项目的工程化水平。

2.2 前端技术栈：Vue.js的渐进式优势

前端选择Vue.js，同样是基于项目特点和开发效率的考量。

渐进式框架与快速上手。Vue的学习曲线相对平缓，对于可能同时承担前后端开发任务的学生或小型团队来说，更容易快速产出界面。其核心库只关注视图层，与现代化的工具链（如Vite）以及各种支持库（Vue Router, Vuex/Pinia, Axios）可以灵活组合。对于疫情防控系统这种以表单、表格、图表展示为主的管理后台类应用，Vue的组件化开发模式非常契合。

高效的开发体验。Vue的单文件组件（.vue文件）将模板、逻辑和样式封装在一起，提高了代码的可维护性。配合Element Plus或Ant Design Vue这类成熟的UI组件库，可以极大地加速页面开发。例如，一个包含筛选、分页、操作按钮的健康信息上报记录表格，利用UI组件库可能只需要几十行代码就能实现美观且功能完整的效果。

良好的前后端分离协作。Vue CLI或Vite创建的项目结构清晰，与后端SpringBoot应用完全解耦。双方通过RESTful API进行数据交互，使得前后端开发可以并行进行。前端开发者可以基于Mock数据先行开发页面，后端则专注于业务逻辑和API设计，最后进行联调，这种模式提升了整体开发效率。

2.3 整体架构设计：前后端分离与模块划分

本项目采用经典的前后端分离架构。后端SpringBoot应用提供REST API，负责业务逻辑、数据持久化和安全性控制；前端Vue应用负责用户界面展示和交互，通过HTTP客户端（如Axios）调用后端API。

在业务模块划分上，系统通常包含以下核心模块：

1. 用户认证与权限模块：处理登录、注册、JWT令牌颁发与验证、基于角色的访问控制。
2. 健康上报模块：核心模块，提供每日健康信息填报表单（体温、症状、行程等），支持提交、修改、查看历史记录。
3. 数据统计与看板模块：为管理员提供可视化图表，展示全校/全院系的健康上报率、异常情况分布、趋势分析等。
4. 通知公告模块：管理员发布防疫通知，用户端接收并确认。
5. 出入校申请/审批模块（可选扩展）：学生提交出入校申请，辅导员或院系领导在线审批。
6. 后台管理模块：用户管理、角色权限管理、基础数据（如班级、宿舍楼）管理、系统日志查看等。

数据库设计上，核心表包括用户表、角色表、健康日报表、通知表、审批流程表等。需要特别注意数据的一致性，例如用户删除（逻辑删除）时，其历史健康记录应如何处置，这些都需要在设计初期明确。

注意：在技术选型时，切忌盲目追求最新版本。例如，SpringBoot 2.x 系列（如2.7.x）拥有最广泛的社区支持和稳定的生态，而SpringBoot 3.x对Java版本和部分依赖有更高要求。对于毕业设计或学习项目，建议选择成熟稳定的版本，把精力更多放在业务逻辑实现上，而非解决新版本的兼容性问题。

3. 核心功能模块实现细节

3.1 用户认证与权限控制实现

这是系统的安全基石。我采用Spring Security + JWT的方案，避免了传统的Session管理在分布式环境下的复杂性。

后端实现要点：

1. 依赖引入：在pom.xml中添加spring-boot-starter-security和JWT工具库（如jjwt）的依赖。
2. 安全配置类：创建一个继承WebSecurityConfigurerAdapter（Spring Boot 2.x）或使用SecurityFilterChainBean（Spring Boot 3.x）的配置类。在这里，我们需要配置：
   • 密码编码器：强制使用BCryptPasswordEncoder，确保用户密码不以明文存储。
   • 放行路径：将登录接口/api/auth/login、注册接口/api/auth/register以及静态资源路径设置为无需认证即可访问。
   • 其他路径保护：其余所有API路径都需要认证。通过.anyRequest().authenticated()来配置。
   • 禁用CSRF：因为我们是前后端分离且使用JWT，可以安全地禁用CSRF防护。
3. 自定义UserDetailsService：实现这个接口，从数据库中根据用户名加载用户信息和其拥有的权限（角色）列表。
4. 登录接口：在AuthController中创建/login端点。该端点接收用户名和密码，调用AuthenticationManager进行认证。认证成功后，使用JWT工具生成一个包含用户名、用户ID和角色的Token返回给前端。
5. JWT过滤器：创建一个JwtAuthenticationFilter，将其添加到Spring Security的过滤器链中。这个过滤器的职责是：从HTTP请求头的Authorization字段中提取JWT Token，进行解析和验证，如果有效，则根据Token中的信息构造一个Authentication对象并放入安全上下文，这样后续的Controller就能通过@AuthenticationPrincipal注解获取当前用户信息了。

前端实现要点：

1. 登录交互：Vue组件中，用户提交登录表单后，通过Axios将用户名和密码POST到后端登录接口。
2. Token存储：收到后端返回的Token后，将其存储在localStorage或sessionStorage中。考虑到安全性，也可以使用Vuex或Pinia状态管理库进行内存存储，并配合vue-router的导航守卫。
3. 请求拦截器：在Axios的请求拦截器中，自动从存储中读取Token，并将其添加到后续所有API请求的Authorization头中，格式为Bearer。
4. 路由守卫：利用Vue Router的beforeEach钩子，在每次路由跳转前检查用户是否已认证（是否存在有效Token），以及其角色是否拥有访问目标页面的权限。如果没有，则重定向到登录页。

权限控制细化：除了接口级别的安全，我们还需要实现按钮级别的权限控制。可以在Vue中自定义一个权限指令v-permission，或者编写一个权限判断的全局方法。在渲染菜单或按钮时，根据当前用户的角色列表来决定是否显示。

3.2 健康上报模块的设计与开发

这是系统的核心业务模块，重点在于表单设计的合理性和数据提交的便捷性。

后端数据模型设计：

@Entity public class HealthReport { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @ManyToOne @JoinColumn(name = "user_id", nullable = false) private User user; // 上报人 private LocalDate reportDate; // 上报日期 private BigDecimal temperature; // 体温 private Boolean hasSymptoms; // 是否有症状 private String symptomDetails; // 症状详情 private String location; // 当前所在位置（如宿舍号、校外地址） private Boolean contactRisk; // 是否接触风险人员 private String remark; // 备注 @Enumerated(EnumType.STRING) private HealthStatus status; // 健康状态（如：正常，异常，待核实） private LocalDateTime createTime; private LocalDateTime updateTime; }

需要为reportDate和user_id建立唯一索引，确保每人每天只能提交一次日报。

后端API设计：

• POST /api/health-reports：提交当日健康报告。提交前需校验当日是否已上报。
• GET /api/health-reports/today：获取用户当日的上报记录（用于修改或查看）。
• GET /api/health-reports/history：获取用户的历史上报记录列表，支持分页和按日期筛选。
• PUT /api/health-reports/{id}：修改指定的上报记录（通常只允许修改当天的）。
• GET /api/health-reports/statistics（管理员）：获取统计数据的接口。

前端页面实现：

1. 上报页面：使用Element Plus的表单组件构建。包含数字输入框（体温）、单选/多选框（症状）、输入框（位置）、文本域（备注）等。表单提交前进行前端校验（如体温范围）。
2. 历史记录页面：使用Element Plus的表格组件，展示日期、体温、状态等列。集成分页组件和日期选择器进行筛选。
3. 交互逻辑：进入上报页面时，先调用/api/health-reports/today接口，如果已有记录，则将表单置于“编辑”模式并填充数据；如果没有，则是“新增”模式。提交成功后，给予明确的反馈（如成功提示），并可以跳转到历史页面。

实操心得：在健康上报这类每日必填的功能上，用户体验至关重要。我通常会做一个“一键快捷上报”的功能：如果用户连续多天身体状况无异常，可以提供一个按钮，点击后自动填充默认的正常数据（如体温36.5，无症状），用户只需确认即可提交，极大简化了操作。这个功能需要在前端记录用户习惯，并在后端提供相应的快捷提交接口。

3.3 管理端数据看板与可视化

管理员（如辅导员、校医院）最需要的是一个能一眼看清全局的仪表盘。这里我们使用ECharts或AntV G2等图表库来实现。

后端数据处理：管理员访问看板时，后端需要聚合数据。例如，一个为院系辅导员提供的看板APIGET /api/dashboard/class-overview，需要返回以下数据：

• 本班级今日应报人数、已报人数、上报率。
• 体温异常（如>37.3℃）的学生列表。
• 报告有症状的学生列表。
• 近7日本班级上报率的趋势数据。
• 各宿舍楼（或地理位置）的健康状态分布。

这些数据需要通过复杂的SQL查询或使用JPA的@Query注解编写原生查询来获取。为了性能考虑，对于实时性要求不高的汇总数据（如历史趋势），可以考虑使用缓存（如Redis）。

前端看板搭建：

1. 布局：使用栅格系统（如Element Plus的el-row和el-col）进行灵活布局。
2. 指标卡片：用卡片组件展示核心指标，如“今日上报率：98%”、“异常情况：3例”，数字可以做得醒目一些。
3. 图表集成：
   • 折线图：用于展示近7日上报率趋势。
   • 饼图或环形图：展示“正常”、“异常”、“未上报”人员的比例。
   • 柱状图：展示各班级或宿舍楼的异常数量对比。
   • 表格：列出具体的异常人员详情，并提供“联系”、“核实”等操作按钮。
4. 数据更新：可以设置定时器（如每5分钟）自动刷新图表数据，或者提供手动刷新按钮。调用对应的Dashboard API获取最新数据后，更新图表实例。

关键点：图表的数据格式需要与ECharts等库要求的格式对齐。通常后端返回一个结构清晰的JSON对象，前端在拿到数据后，进行简单的格式转换，然后调用setOption方法更新图表。

4. 开发过程中的难点与解决方案

4.1 文件上传与存储：核酸检测报告图片

随着防疫要求细化，系统可能需要支持上传核酸检测报告、健康码截图等图片。这是一个非常常见的需求，但也涉及一些细节。

方案选择：

1. 本地存储：最简单。使用Spring Boot的MultipartFile接收文件，保存到服务器磁盘的某个目录（如/uploads）。需要解决的是文件重名（使用UUID重命名）、目录创建、以及通过静态资源映射提供外部访问（addResourceHandlers）。
2. 云存储（推荐）：更适用于生产环境。可以使用阿里云OSS、腾讯云COS或七牛云等对象存储服务。它们的优点是扩展性强、可靠性高、自带CDN加速。Spring Boot项目集成官方SDK即可。

实现步骤（以本地存储为例）：

1. 后端Controller：

   @PostMapping("/upload") public ApiResponse<String> uploadFile(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return ApiResponse.error("文件不能为空"); } // 1. 生成唯一文件名 String originalFilename = file.getOriginalFilename(); String fileExtension = originalFilename.substring(originalFilename.lastIndexOf(".")); String newFileName = UUID.randomUUID().toString() + fileExtension; // 2. 确定存储路径 Path uploadPath = Paths.get("uploads/health-reports"); Files.createDirectories(uploadPath); // 创建目录（如果不存在） Path filePath = uploadPath.resolve(newFileName); // 3. 保存文件 file.transferTo(filePath.toFile()); // 4. 返回访问路径（如 /uploads/health-reports/xxx.jpg） String accessPath = "/uploads/health-reports/" + newFileName; return ApiResponse.success(accessPath); }

2. 静态资源映射配置：在Spring Boot配置类或application.yml中，将本地路径映射为Web可访问路径。

   spring: web: resources: static-locations: classpath:/META-INF/resources/,classpath:/resources/, classpath:/static/, classpath:/public/, file:${user.dir}/uploads/

3. 前端Vue组件：使用<input type="file">或Element Plus的<el-upload>组件。选择文件后，通过FormData对象将文件POST到上传接口。上传成功后，将返回的文件访问路径保存到表单对应的字段中（如healthReport.testReportPath）。

注意事项：务必对上传文件进行安全检查。包括：限制文件类型（白名单）、检查文件大小、对图片文件进行病毒扫描（如有条件）。永远不要信任客户端上传的文件名，避免目录遍历攻击。

4.2 定时任务与数据报表生成

系统需要定期执行一些任务，例如：

• 每晚23:30统计当日未上报人员名单，并生成提醒消息。
• 每天凌晨1点生成前一天的校级健康情况汇总报表（PDF或Excel）。
• 每周一生成上一周的疫情分析周报。

Spring Boot提供了@Scheduled注解，可以非常方便地创建定时任务。

实现步骤：

1. 启用定时任务：在主应用类上添加@EnableScheduling注解。
2. 创建任务类：定义一个组件，在方法上使用@Scheduled注解。

   @Component @Slf4j public class ScheduledTasks { @Autowired private HealthReportService healthReportService; @Autowired private NotificationService notificationService; // 每天23:30执行 @Scheduled(cron = "0 30 23 * * ?") public void remindUnreportedUsers() { log.info("开始执行未上报人员提醒任务..."); List<User> unreportedUsers = healthReportService.findTodayUnreportedUsers(); // ... 为这些用户生成系统通知或发送邮件/短信（异步） notificationService.createReminderNotifications(unreportedUsers); log.info("未上报人员提醒任务执行完毕。"); } // 每天凌晨1点执行 @Scheduled(cron = "0 0 1 * * ?") public void generateDailyReport() { log.info("开始生成每日健康报表..."); // 1. 从数据库聚合数据 DailyHealthStats stats = healthReportService.aggregateDailyStats(LocalDate.now().minusDays(1)); // 2. 使用模板引擎（如Thymeleaf, Freemarker）或POI库生成PDF/Excel byte[] reportBytes = reportGeneratorService.generateDailyReportPdf(stats); // 3. 保存报表文件到指定位置或发送给管理员 fileService.saveDailyReport(reportBytes); log.info("每日健康报表生成完毕。"); } }

3. Cron表达式：需要熟练掌握Cron表达式来定义执行时间。也可以将表达式写在配置文件中，使用@Scheduled(cron = "${report.cron.daily}")的方式注入，增加灵活性。

报表生成技术选型：

• Excel报表：Apache POI是Java操作Excel的标准库，功能强大但API稍复杂。Alibaba的EasyExcel是一个基于POI的封装，读写性能更好且API更简洁，特别适合大数据量导出，强烈推荐。
• PDF报表：常见方案有iText、Flying Saucer（配合HTML模板）等。也可以先用模板引擎（如Thymeleaf）生成HTML，再转换成PDF。

4.3 前端性能优化与用户体验提升

当数据量变大（例如一个学院几千人的历史记录），前端列表渲染和图表加载可能会出现性能问题。

优化措施：

1. 表格虚拟滚动：对于超长列表，使用Element Plus的<el-table>的虚拟滚动功能（需设置height和max-height），或考虑专门的虚拟滚动组件。这可以保证只渲染可视区域内的DOM元素，极大提升性能。
2. 图表数据抽样：当时间跨度很长（如查看一年的趋势）时，向后端请求所有点数据会导致传输慢、前端渲染卡顿。后端应该提供数据聚合接口，例如，将一年数据按周或月进行聚合，只返回几十个汇总点，前端图表依然能清晰反映趋势。
3. 组件懒加载与路由懒加载：使用Vue的异步组件和路由懒加载（() => import('./views/Dashboard.vue')），将不同功能模块打包成独立的JS文件，减少首屏加载体积。
4. API请求防抖与节流：对于搜索框输入联想、窗口resize触发图表重绘等场景，使用Lodash的debounce或throttle函数，避免短时间内发起大量无效请求。
5. 合理使用缓存：对于一些不常变化的基础数据，如学院列表、班级列表，可以在前端（Vuex/Pinia）或通过Axios拦截器进行内存缓存，在一定时间内不再重复请求。

用户体验细节：

• 加载状态：所有异步操作（按钮点击、页面切换）都应提供明确的加载状态提示，如按钮loading、骨架屏、全局加载条。
• 操作反馈：任何用户操作成功后，应有Toast提示；失败时，应有错误信息提示（最好能指导用户如何解决）。
• 移动端适配：虽然主要是管理后台，但考虑到辅导员、校医可能用手机紧急处理事务，应确保核心页面（如审批、查看异常）在移动端有基本的可读性和可操作性。可以使用UI库的响应式栅格或单独设计移动端视图。

5. 项目部署与运维考量

5.1 后端SpringBoot应用部署

SpringBoot应用部署非常灵活，常见的有以下几种方式：

1. 打包为可执行JAR（推荐用于简单部署）：这是最经典的方式。通过mvn clean package命令打包，会生成一个包含所有依赖和嵌入式Tomcat的Fat JAR。部署时，只需要服务器上有Java运行环境（JRE），直接使用java -jar your-application.jar命令即可启动。可以通过application-prod.yml配置文件来指定生产环境的数据库连接、端口等。

2. 打包为WAR部署到外部Tomcat：如果你需要与其他Java Web应用共享一个Tomcat服务器，可以修改pom.xml中的打包方式为war，并排除内嵌的Tomcat依赖。然后将生成的WAR包放到外部Tomcat的webapps目录下。

3. 使用Docker容器化部署（现代化部署首选）：编写Dockerfile，基于OpenJDK镜像构建应用镜像。

FROM openjdk:11-jre-slim VOLUME /tmp COPY target/*.jar app.jar ENTRYPOINT ["java","-jar","/app.jar"]

然后通过docker build和docker run命令来构建和运行容器。结合Docker Compose可以方便地管理应用及其依赖的服务（如MySQL、Redis）。容器化部署保证了环境一致性，易于扩展和迁移。

生产环境关键配置：

• 日志：配置Logback或Log4j2，将日志按级别和日期滚动输出到文件，便于排查问题。
• 监控：集成Spring Boot Actuator，暴露健康检查、指标等信息，可以配合Prometheus和Grafana进行监控。
• 性能：根据服务器配置，在application.yml中调整Tomcat的连接池参数、线程池大小等。

5.2 前端Vue应用部署

Vue项目通过npm run build命令进行构建，会在dist目录下生成静态资源（HTML, JS, CSS, 图片等）。

部署方式：

1. 与后端分离部署：将dist目录下的所有文件，放到一个独立的HTTP服务器上，如Nginx或Apache。这是最常见的方式。

   • Nginx配置示例：

     server { listen 80; server_name your-domain.com; root /path/to/your/vue-dist; index index.html; location / { try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } # 代理后端API请求 location /api/ { proxy_pass http://localhost:8080; # 后端SpringBoot服务地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 代理上传文件的访问路径 location /uploads/ { alias /path/to/your/springboot/uploads/; } }

   这种配置下，用户访问your-domain.com，Nginx返回前端页面；当前端页面需要调用API时，请求发往/api/，被Nginx代理到后端的SpringBoot应用；上传的图片通过/uploads/路径直接由Nginx提供访问。

2. 与后端合并部署：将Vue构建出的静态资源，复制到SpringBoot项目的src/main/resources/static目录下。然后SpringBoot应用同时充当了后端API服务器和前端静态资源服务器。这种方式部署简单，但前后端耦合，不利于独立扩展和持续集成。

5.3 数据库与缓存部署

• MySQL：建议使用5.7或8.0版本。生产环境务必做好权限控制、定期备份，并针对核心表（如health_report）建立合适的索引（如(user_id, report_date)）以优化查询性能。
• Redis（可选但推荐）：如果系统用户量大，频繁访问的数据（如首页看板统计数据、用户权限信息）可以缓存到Redis中，减轻数据库压力。使用Spring Boot的spring-boot-starter-data-redis可以轻松集成。

5.4 域名、HTTPS与安全加固

1. 域名：为你的系统申请一个易记的域名。
2. HTTPS：使用Let‘s Encrypt等免费证书服务为你的域名配置SSL证书，在Nginx中启用HTTPS，强制将所有HTTP请求重定向到HTTPS。这是保护用户数据（尤其是登录凭证和健康信息）传输安全的基本要求。
3. 安全加固：
   • API安全：确保所有敏感操作（如修改数据、删除用户）的API都经过了权限校验（@PreAuthorize）。
   • SQL注入：使用JPA或MyBatis等ORM框架，通常能有效防止。如果写原生SQL，务必使用参数化查询。
   • XSS攻击：前端对用户输入进行转义，后端在响应头中设置Content-Security-Policy等策略。
   • CSRF：由于我们使用JWT，且前后端分离，通常已免疫传统CSRF攻击，但仍需注意其他安全最佳实践。

6. 常见问题排查与调试技巧

在实际开发中，你肯定会遇到各种各样的问题。这里记录了几个我踩过的坑和解决方法。

6.1 跨域问题（CORS）

这是前后端分离开发中最常见的问题。浏览器出于安全考虑，会阻止前端页面从一个域名（如localhost:8080）向另一个域名（如localhost:8081）发起请求。

解决方案：在SpringBoot后端进行全局配置。

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") // 针对所有/api/开头的接口 .allowedOriginPatterns("*") // 允许所有来源，生产环境应指定具体域名 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true) .maxAge(3600); } }

注意：在生产环境中，allowedOriginPatterns应设置为确切的前端域名，而不是*，以增强安全性。

6.2 前端路由在刷新后404

当使用Vue Router的history模式时，如果你直接访问一个子路由（如/dashboard/overview）或刷新页面，Nginx或SpringBoot会因为找不到这个实际的文件路径而返回404。

解决方案：

• Nginx部署：在Nginx配置中添加try_files $uri $uri/ /index.html;（如前文所示）。
• SpringBoot部署：如果你将前端静态资源放在SpringBoot的static目录下，可以添加一个通用的错误页面控制器，将所有未知路径重定向到index.html。

  @Controller public class SpaController implements ErrorController { @RequestMapping(value = "/{path:[^\\.]*}") public String redirect() { return "forward:/index.html"; } // Spring Boot 2.x 需要实现ErrorController并重写getErrorPath // Spring Boot 3.x 此方法已废弃，上述映射已足够 }

6.3 数据库时区问题

这是一个非常隐蔽的坑。如果你的服务器数据库时区是UTC，而应用运行在CST时区，那么java.util.Date或LocalDateTime在存入和读出时可能会产生8小时的偏差。

解决方案：

1. 统一时区：最好的方式是让数据库、应用服务器、JVM使用统一的时区，如Asia/Shanghai。
2. 连接参数：在数据库连接URL中指定时区。

   spring: datasource: url: jdbc:mysql://localhost:3306/covid_system?serverTimezone=Asia/Shanghai&characterEncoding=utf8

3. 使用LocalDate：对于只需要日期（如上报日期reportDate）的字段，使用java.time.LocalDate，它不包含时区信息，可以避免时区转换问题。

6.4 文件上传大小限制

默认情况下，Spring Boot对上传文件的大小有限制（通常为1MB）。上传大文件（如视频报告）时会失败。

解决方案：在application.yml中调整配置：

spring: servlet: multipart: max-file-size: 10MB # 单个文件最大大小 max-request-size: 20MB # 单次请求总大小

同时，Nginx作为反向代理时，也需要调整client_max_body_size配置。

6.5 前端内存泄漏

在复杂的单页应用中，如果组件销毁时没有正确移除事件监听器或清理定时器，可能会导致内存泄漏。

排查与解决：

• 在Vue组件的beforeUnmount或unmounted生命周期钩子中，手动移除使用addEventListener添加的全局事件监听器。
• 清除在组件中创建的定时器（setInterval,setTimeout）。
• 使用Vue Devtools的Performance面板或Chrome的Memory面板进行内存快照对比，查找泄漏点。

开发这样一个系统，从技术层面看，是SpringBoot和Vue技术栈的一次完整实践；从业务层面看，是对一个真实世界问题的数字化建模与解决过程。每一个功能点的实现，都会迫使你去思考用户体验、数据一致性和系统性能。我个人的体会是，不要仅仅满足于功能的实现，多去思考“如果用户量增加十倍”、“如果数据保存五年”、“如果需求明天就变”这些情况下，你的代码和架构是否还能从容应对。把这些思考融入到开发习惯中，你的成长速度会远超仅仅完成项目本身。最后，记得为你的项目编写清晰的README文档，这既是对自己工作的总结，也是与他人协作或展示的敲门砖。

本文还有配套的精品资源，点击获取