毕业设计实战：基于SpringBoot+Vue+MySQL的安康学院疫情防控专题网站设计与实现，从需求到测试全流程避坑指南！

小飞计算机毕设
30 阅读15分钟

毕业设计实战：基于SpringBoot+Vue+MySQL的安康学院疫情防控专题网站设计与实现，从需求到测试全流程避坑指南！

谁懂啊！当初做疫情防控专题网站毕设时，光“最新疫情信息表”和“地区表”的关联就卡了4天——一开始没给疫情表设“地区id”外键，查某地区确诊数据时全混在一起，导师看了直接让我“重新梳理数据库实体关系”😫 后来踩遍无数坑才摸出高效落地流程，今天把需求分析、技术选型、功能实现到测试的核心细节说透，宝子们不用熬夜改代码，轻松搞定毕设！

一、先搞懂“疫情防控专题网站要啥”！需求分析别瞎蒙

刚开始我跳过需求分析就写代码，花两周加了个“疫情数据智能预测算法”，结果导师一句“核心是疫情信息发布、防控知识普及、用户管理，不是复杂算法”直接打回重改！后来才明白，需求分析得先抓准“谁用系统、要干啥”，这步做对，少走90%弯路。

1. 核心用户&功能拆解（踩坑后总结版）

系统只有两类核心用户：管理员、普通用户（别加“教师子角色”！我当初加了后权限混乱，教师能删除全校疫情公告，砍掉才顺畅），功能明确区分，避免越权：

  • 管理员端（必做功能）：
    • 用户管理：维护用户账号（新增、重置密码、逻辑删除）、按姓名/手机号筛选用户、查看用户完整信息（头像、邮箱、注册时间）
    • 疫情管理：发布最新疫情信息（填写地区、确诊/治愈/死亡人数）、修改历史疫情数据、按日期/地区筛选疫情记录、查看疫情统计报表
    • 内容管理：发布通知公告（上传图片、选择公告类型）、管理公告类型（新增“防控通知/政策解读/校园提示”分类）、发布防治知识（上传图片/视频、编辑详情）
    • 互动管理：管理论坛帖子（审核/删除违规内容）、查看用户发帖记录、回复用户留言
  • 用户端（核心需求）：
    • 信息查看：浏览最新疫情数据（按地区筛选）、查看通知公告（按类型分类浏览）、学习防治知识（观看视频、查看图文）
    • 互动操作：发布论坛帖子（填写标题/内容）、回复他人帖子、查看个人发帖历史
    • 个人中心：修改个人信息（头像、手机号、邮箱）、查看浏览记录、管理个人账号安全

2. 需求分析避坑指南（血泪教训！）

  • 别空想！找2个同学模拟管理员和用户提意见：比如用户说“想快速找到本校相关公告”，我才加了“公告按‘校园相关’标签筛选”，比瞎加“疫情预测”实用
  • 一定要画用例图！用DrawIO画“管理员-发布疫情信息”“用户-浏览防治知识”“管理员-审核论坛帖子”，跟导师汇报时比光说“我要做XX功能”直观10倍（当初没画，导师听20分钟没get到逻辑）
  • 写“需求规格说明书”！把约束条件写清楚（如“疫情数据中确诊人数≥0”“公告标题非空”“防治知识视频格式限MP4”），编码时对着做，不跑偏

3. 可行性分析别敷衍！3点写清楚就能过

导师超爱问“系统可行吗”，别只说“我觉得可行”，从3个角度写，显专业：

  • 技术可行性：SpringBoot、Vue、MySQL都是课堂学过的，图书馆有《SpringBoot实战》《MySQL数据库设计与优化》，遇到问题能查资料（别用SpringBoot 3.x+Vue 3组合！我当初试了，前后端联调时疫情数据接口卡5天，换回SpringBoot 2.7+Vue 2才顺）
  • 经济可行性：工具全免费！Eclipse（免费版）、MySQL、Navicat（学生版）、Tomcat官网直接下，答辩时说“开发成本0，还能帮学校节约疫情信息线下通知、纸质防控手册的印刷成本”，导师会觉得你懂成本控制
  • 操作可行性：界面参考主流政务网站，常用功能放显眼位置（如“最新疫情”在首页顶部轮播区），找同学测试，10分钟学会浏览疫情数据、查看公告，导师直接认可

二、技术选型别跟风！这套组合稳到爆

刚开始我跟风用SpringBoot+Vue 3+Redis，结果“疫情数据缓存”卡3天——Redis配置错，重启后历史疫情数据全丢😫 后来换成Java 8+SpringBoot 2.7+Vue 2+MySQL 8.0+Tomcat 9，新手友好，调试效率翻两倍！

1. 技术栈核心选择（附避坑提醒）

别盲目选“最新技术”，稳定比炫酷重要！核心工具选择理由和坑点直接抄：

技术工具为啥选它避坑提醒！
Java 8语法简洁，SpringBoot 2.7兼容性最佳，学习资料多别用Java 11+！部分Spring依赖支持差，易出“类加载失败”
SpringBoot 2.7简化Spring配置，自带Tomcat，适合快速开发疫情防控功能别用自定义启动器！新手直接用官方starter（spring-boot-starter-web、spring-boot-starter-jdbc），避免配置错误导致接口调用失败
MySQL 8.0支持事务/外键，存疫情数据、用户信息足够用，utf8mb4编码解决生僻字乱码安装设“utf8mb4”编码！我当初用默认编码，用户姓名含生僻字乱码，查2小时才好
Vue 2文档完善，组件丰富，适合开发疫情数据展示、公告浏览页面，新手易上手别用Vue 3+Composition API！选项式API（Options API）更符合新手思维，调试时能快速定位问题
Tomcat 9轻量级服务器，适合中小型校园网站，与SpringBoot 2.7适配性好别用10+版本！部分Servlet类包路径变化，启动报错“Servlet初始化失败”
Eclipse 2022支持Java、SpringBoot开发，自带代码提示，插件丰富（如MyBatis Generator）别装太多插件！我当初装了10+插件，Eclipse频繁崩溃，只留“Spring Tools”“MyBatis Plugin”就够

2. 开发环境搭建（step by step 实操）

很多宝子卡“环境配置”，跟着步骤来，一次成功：

  1. 装JDK 1.8：记安装路径（如D:\Java\jdk1.8.0_301），配置“JAVA_HOME”环境变量，cmd输“java -version”显“1.8.x”即成
  2. 装Eclipse 2022：勾选“Spring Tools”插件，自动安装
  3. 装MySQL 8.0：用Navicat建数据库“ankang_college_epidemic”，编码设“utf8mb4”，排序“utf8mb4_general_ci”
  4. 建SpringBoot项目：Eclipse选“Spring Starter Project”，引入Web、MyBatis、MySQL依赖，配置application.yml（数据库连接、端口号）
  5. 配前端页面：用Vue 2+Bootstrap写疫情数据列表、公告详情页面，实现响应式布局
  6. 联调测试：在application.yml配置数据库连接（url: jdbc:mysql://localhost:3306/ankang_college_epidemic?useSSL=false&serverTimezone=UTC），写“查询最新疫情数据”接口，前端调用能显示地区、确诊人数即完成

三、数据库设计：别让表关联坑了你

这是毕设“核心骨架”，我当初没关联“论坛表”和“用户表”，查“某用户的发帖记录”要写3层嵌套SQL，调试到凌晨1点😫 后来按“实体-属性-关系”设计，终于理清。

1. 核心实体&属性（附ER图技巧）

先确定“实体”（用户、最新疫情信息、通知公告、防治知识、论坛），再想“属性”，别漏关键字段！必做8张表，直接画ER图：

  • 用户表（yonghu）：id（主键）、yonghu_name（用户姓名）、yonghu_phone（手机号）、yonghu_email（电子邮箱）、yonghu_photo（头像路径）、password（密码，MD5加密）、create_time（创建时间）、is_delete（逻辑删除：0=未删，1=已删）
  • 最新疫情信息表（zuixinyiqing）：id（主键）、zuixinyiqing_name（地区）、xinzengrenshu（今日确诊人数）、zongrenshu（总确诊人数）、zhiyurenshu（今日治愈人数）、siwangrenshu（今日死亡人数）、insert_time（发布日期）、create_time（创建时间）
  • 通知公告表（news）：id（主键）、news_name（公告标题）、news_types（公告类型）、news_photo（公告图片路径）、news_content（公告详情）、insert_time（添加时间）、create_time（创建时间）
  • 防治知识表（xinwenguanzhu）：id（主键）、xinwenguanzhu_name（新闻标题）、xinwenguanzhu_types（防治知识类型）、xinwenguanzhu_photo（防治知识图片路径）、xinwenguanzhu_video（防治知识视频路径）、xinwenguanzhu_content（防治知识详情）、insert_time（添加时间）
  • 论坛表（forum）：id（主键）、forum_name（帖子标题）、yonghu_id（关联用户，外键）、forum_content（发布内容）、forum_state_types（帖子状态：0=待审核，1=已通过）、insert_time（发帖时间）、update_time（修改时间）

画ER图用Visio/亿图，记3规则：

  1. 矩形=实体（如“用户”“最新疫情信息”）
  2. 椭圆=属性（如用户“姓名”“手机号”，疫情信息“地区”“确诊人数”）
  3. 菱形=关系（如“用户-论坛”一对多，一个用户可发多帖；“管理员-通知公告”一对多，一个管理员可发多条公告） 避坑提醒：别把“公告图片、防治知识视频”存数据库！我当初存二进制导致数据库崩溃，改成存路径（如/static/news/img1.jpg、/static/knowledge/video1.mp4）才对。

2. 表关联测试！别等编码才发现错

建表后一定要测：在“用户表”插数据（id=1，姓名=“李四”，手机号=“13800138000”），“论坛表”插关联数据（yonghu_id=1，标题=“校园疫情防控注意事项”，内容=“勤洗手、戴口罩”，状态=“已通过”），用JOIN查“某用户发帖记录”：

SELECT u.yonghu_name, u.yonghu_phone, f.forum_name, f.forum_content, f.insert_time, f.forum_state_types
FROM forum f
JOIN yonghu u ON f.yonghu_id = u.id
WHERE u.id = 1;

能查出“用户姓名+手机号+帖子标题+内容+发帖时间+状态”说明关联对；若报错“Cannot add or update a child row”，大概率外键错，赶紧检查表结构（比如yonghu_id字段类型是否和用户表id一致）。

四、功能实现：核心模块操作+页面设计

不用做所有功能！先搞定3个核心模块，答辩足够出彩，附操作逻辑和页面要点：

1. 管理员端：疫情信息管理模块（必做！）

核心是“发布+维护疫情数据”，重点“数据合法性校验”和“地区唯一性”，别漏这两步！

  • 操作逻辑：
    1. 发布疫情前校验“地区非空且唯一”“确诊/治愈/死亡人数≥0”“发布日期≤当前日期”，缺一项提示“完善疫情信息”（我当初没加“人数≥0”校验，用户填负数，数据显示异常，补了3小时逻辑）
    2. 修改疫情数据时，保留修改日志（记录“修改前数据”“修改后数据”“修改时间”），便于追溯
    3. 删除疫情数据时，采用“逻辑删除”（加is_delete字段），保留历史数据，避免用户查看历史疫情时数据丢失
  • 页面设计（Vue 2+Bootstrap）：
    • 筛选区：地区（模糊查）、发布日期（日期范围选择器）、查询/新增按钮
    • 疫情列表：显示地区、今日确诊、总确诊、今日治愈、今日死亡、发布日期，操作列“编辑/删除/查看详情”
    • 新增弹窗：地区（输入框，带唯一性校验）、今日确诊/总确诊/今日治愈/今日死亡（数字输入框，≥0）、发布日期（日期选择器，禁用未来日期）、提交按钮

2. 管理员端：通知公告管理模块（核心需求！）

管理员核心操作是“发布公告”，流程别复杂：填写公告信息→选择类型→上传图片→提交发布，我当初漏了“公告标题唯一性校验”，导致重复发布相同公告，补半天逻辑才好。

  • 操作逻辑：
    1. 发布公告前校验“标题非空且唯一”“公告类型必选”“详情≥20字”“图片格式为JPG/PNG”，不满足提示对应错误
    2. 选择公告类型时，下拉框加载“公告类型表”数据（如“防控通知”“政策解读”“校园提示”），支持管理员在“公告类型管理”模块新增类型
    3. 上传图片时，限制大小≤5MB，自动压缩图片尺寸（避免图片太大导致页面加载缓慢）
  • 页面设计：
    • 公告信息区：标题（输入框，带唯一性校验）、公告类型（下拉选）、图片上传（文件选择器，显示预览图）、详情（富文本编辑器，支持加粗/换行/插入链接）
    • 预览区：实时显示公告效果（标题样式、图片位置、详情排版）
    • 操作区：“保存草稿”“提交发布”按钮（保存草稿时状态设为“待发布”，提交发布后状态设为“已发布”）

3. 用户端：防治知识浏览模块（答辩亮点！）

体现“防控知识普及”核心目标，导师超爱问！核心“按类型筛选知识”“观看视频”“查看图文详情”，别漏“视频格式兼容性”。

  • 操作逻辑：
    1. 用户浏览防治知识时，默认按“添加时间倒序”显示，支持按“防治知识类型”（如“日常防护”“疫苗接种”“症状识别”）筛选
    2. 观看防治知识视频时，支持“暂停/播放”“进度条拖动”“倍速播放”，视频格式限MP4（兼容主流浏览器）
    3. 查看图文详情时，自动排版（图片居中、文字分段），支持“分享到论坛”（一键生成论坛帖子，标题为知识标题，内容为知识摘要）
  • 页面设计：
    • 筛选区：防治知识类型（下拉选）、搜索框（按标题模糊查）、搜索按钮
    • 知识列表：卡片式布局，显示知识标题、类型、封面图、添加时间，点击卡片进入详情页
    • 详情页：标题（大字体居中）、类型（标签样式）、封面图（居中显示）、视频（带控制栏）、详情（分段显示，段落间距适中）、分享按钮 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

五、测试别敷衍！这3步让答辩不翻车

很多宝子觉得“功能能跑就行”，答辩时评委一测就出问题！我当初没测“疫情数据重复发布”，导致管理员能重复添加同一地区同一日期的疫情数据，导师说“不符合数据唯一性逻辑”，当场扣分😫 测试要针对性做：

1. 功能测试（必测3模块）

重点测核心功能，整理测试用例表，直接填结果：

测试场景操作步骤预期结果
管理员填负数疫情数据管理员新增疫情→地区填“安康学院”，今日确诊填“-10”→提交提示“今日确诊人数不能为负数，请重新输入！”
用户重复发布相同论坛帖用户发帖子→标题/内容与历史帖子完全一致→提交提示“该内容已发布，请勿重复发帖！”
管理员删除疫情数据管理员选“2024-05-01 安康学院”疫情→点击“删除”→确认提示“删除成功！”，列表中该数据隐藏（逻辑删除），数据库is_delete设为1

2. 兼容性测试（容易忽略）

别只在自己电脑测！答辩评委可能用不同设备和浏览器：

  • 浏览器：Chrome、Firefox、Edge、IE11（重点测IE，Vue页面兼容性差，需加兼容代码：在index.html引入html5shiv.js）
  • 设备：电脑（1920×1080、1366×768分辨率）、手机（iPhone 13、华为Mate 40，测响应式布局）
  • 要求：无横向滚动条，按钮点击无延迟，疫情数据加载≤3秒，视频播放流畅

3. 测试报告要写好！答辩加分

整理“测试报告”，含“目的、范围、用例、结果、问题总结”：

  • 问题总结：“IE下防治知识视频无法播放，加video.js插件修复；管理员能重复发布疫情数据，加‘地区+发布日期’唯一索引修复；图片上传太大导致页面卡顿，加图片压缩逻辑修复”
  • 测试结论：“核心功能无严重bug，兼容性问题已修复，满足安康学院疫情防控信息发布、知识普及需求”

六、答辩准备：3个加分小技巧

  1. 演示流程顺畅：提前录视频（怕现场崩），按“管理员发布疫情数据→管理员发布防治知识→用户浏览疫情→用户观看防治知识视频→用户发布论坛帖子”流程来，每个操作停顿2秒，让评委看清
  2. 讲“解决的问题”：比如“一开始疫情数据存负数，加数值校验解决；IE下视频无法播放，用video.js兼容解决；图片太大卡顿，加压缩逻辑解决”，比光说“用了SpringBoot+Vue”有亮点
  3. 准备常见问题：导师可能问“系统怎么保证疫情数据安全？”，答“用户密码MD5加密；疫情数据修改留日志；敏感操作（如删除公告）需二次确认；数据库每天自动备份，防止数据丢失”

最后：毕设通关小私心

以上就是基于SpringBoot+Vue+MySQL的安康学院疫情防控专题网站从0到1的避坑干货！毕设不难，别瞎做复杂功能（如疫情预测、智能问答），把疫情信息管理、公告发布、防治知识浏览做扎实，答辩就能过。

需要核心源码（带注释，直接能跑）、数据库脚本（含测试数据）、ER图模板的宝子，评论区扣“安康学院疫情防控网站”，我私发你；卡在某个模块（如疫情数据统计、公告发布），也可以留言，看到必回！

点赞收藏，下次找流程不迷路～祝宝子们毕设顺利，轻松毕业！😘

avatar
文章
阅读
粉丝