1. 项目定位与功能架构拆解1.1 为什么是“疫情隔离管理系统”这个选题先说一个比较现实的点Java Web方向的毕设选题每年翻来覆去就是图书管理、学生选课、宿舍管理、二手交易这几个。这些题目不是不好而是答辩时老师已经听过几百遍很难做出亮点。我当初选择“隔离管理系统”这个方向看中的是它的业务边界足够清晰、流程链路足够完整、管理对象足够具体一套系统做下来CRUD、权限、流程、统计、消息通知这些毕设考察点全部能覆盖到而且业务名词一听就知道不是随便拼的模板项目。还有一个很实际的考虑隔离管理业务的“状态流转”天然丰富。人员从登记进入、每日健康上报、核酸/抗原结果更新、隔离到期评估再到解除隔离每一步都有明确的状态变化和权限要求。这种强流程性业务最适合用来体现SpringBoot Vue这套技术栈的优势。如果换成一个纯粹的增删改查系统很难向答辩老师解释清楚“你为什么需要后端权限框架”“你为什么需要前端路由守卫”。从功能覆盖角度看这套系统最终拆成了三大块基础数据管理、核心业务流转、统计与预警。基础数据包括用户账号、角色权限、人员档案、隔离房间资源核心业务包括待隔离人员登记、每日健康记录、隔离状态变更、解除申请审批统计与预警则包括隔离人数日报、房间占用率、异常体温提醒、待办审批统计。这个功能矩阵既能回答“系统解决了什么问题”也能回答“系统有哪些技术难点”两个问题都有话说答辩环节就不会冷场。1.2 核心角色与业务链路设计系统里我设计了四种角色分别是系统管理员、隔离区管理人员、医护人员、普通用户被隔离人员或家属。四种角色之间不是简单叠加而是对应着不同的操作边界和页面菜单这直接决定了后端的接口权限设计和前端的路由分级。先捋一下业务链路。一个人进入隔离区首先由管理人员录入基础信息并分配房间这时该人员状态是“隔离中”。随后在每个隔离周期内该人员或者医护人员每天需要填报健康信息包括体温、症状描述、核酸检测结果等。健康数据异常时系统自动给管理人员生成一条预警记录。隔离期满后由人员发起解除申请或由医护人员根据健康记录评估后提交解除建议最终必须由管理人员审批通过状态才会变为“已解除”。这条链路设计清楚后再去设计数据表和接口脑子里就非常明确哪些状态需要枚举维护哪些操作需要审批环节哪些数据需要留审计日志。在设计角色权限时我还额外加了一个细节医护人员可以看到隔离人员的完整健康记录但无权修改基础档案管理人员可以分配房间、审批解除申请但不能代替医护人员填写每日健康数据。这种“业务数据归属”和“操作权限分离”的思路在写后端接口时体现为方法级权限校验而不是简单地在Controller层判断角色名称。Spring Security框架里的PreAuthorize注解在此时就派上了用场比手写if判断要优雅得多。1.3 功能清单汇总为了不让开发过程失控我建议所有准备做类似管理系统的同学开工前先写一份功能清单表格至少细化到模块、子功能、涉及角色、关键状态这几个维度。下面是我这套系统在中期迭代后最终确定的一份精简清单供参考。功能模块子功能涉及角色核心状态/字段登录认证账号密码登录、验证码、Token刷新所有角色登录IP、最后登录时间用户与权限用户管理、角色管理、菜单权限系统管理员角色编码、菜单层级隔离人员管理人员登记、档案编辑、状态查询管理人员隔离状态、房间号房间资源管理房间增删改查、占用状态维护管理人员房间状态、楼层、床位健康信息上报每日填报、异常记录标记医护人员、普通用户体温、症状、采样结果隔离解除审批解除申请、审批流转医护人员、管理人员申请状态、审批意见统计看板人数统计、趋势折线、预警列表系统管理员、管理人员按日聚合数据消息提醒待办提醒、异常通知管理人员、医护人员已读/未读状态有了这张表再往里面填字段、画原型、建表、写接口基本就不会出现做到一半忘了某个功能的情况。我最初就是因为没列清单上来直接建表结果做到健康上报模块时发现隔离人员档案里缺了“联系电话”字段回头又去改表结构还牵扯到前端表单非常麻烦。2. 技术选型与SpringBoot Vue组合优势分析2.1 为什么用SpringBoot而不是SSH或SSM现在再回过头去做SSHStruts2 Spring Hibernate或者纯SSMSpring SpringMVC MyBatis结构的毕设其实有点跟不上时代节奏了。SpringBoot最大的价值在于“约定大于配置”内嵌Tomcat、自动装配、Starter机制几乎把以前S SM项目里大量繁琐的XML配置全部干掉。对于毕设这种开发周期只有几个月、团队通常就一个人的项目来说省下来的配置调试时间可以全部放到业务逻辑实现上。Spring Boot 2.x版本的自动配置机制会读取spring.factories中的配置类按条件装配所需的Bean。比如引入了spring-boot-starter-web后项目自动获得SpringMVC全套能力引入spring-boot-starter-security后默认的登录校验链路就生效了。这种“动手即能用”的体验对没有太多企业项目经验的同学非常友好。我在做登录模块时甚至不需要手动注册拦截器只需要实现UserDetailsService接口并配置SecurityFilterChain就能完成JWT无状态认证。当然如果用SpringBoot也有一个需要提前适应的点版本选择。我当时遇到过一个很典型的问题SpringBoot 2.7和MyBatis-Plus的兼容性没问题但如果顺手把JDK从8升到17某些老版本数据库驱动就会在连接池初始化时报警告。所以这里建议直接用Java 8 SpringBoot 2.7.x这套组合相关资料最多踩坑后也最容易搜到解决方案。2.2 Vue版本选择Vue 2还是Vue 3前端技术栈上Vue 3 Element Plus其实是目前更主流的选择Vue 3的Composition API在逻辑复用方面比Vue 2的Options API舒服很多。但这里有一个现实问题Element Plus只支持Vue 3而很多高校的Java Web课程和毕业设计参考资料还停留在Vue 2 Element UI。如果时间比较紧又需要大量借鉴学长项目那么Vue 2反而是稳妥的选择。我自己倒没有纠结太久直接用了Vue 3原因是我做这套系统时Element Plus稳定版已经比较成熟而且Vue 3的setup语法配合ref、reactive写业务代码数据响应的思路比Options API更接近原生JavaScript思维。Vue环境配置本身没有太多坑。先装Node.js建议装16以上的LTS版本然后用npm或pnpm创建工程。如果用Vite作为构建工具开发服务器启动非常快热更新体验比Webpack时代强太多。需要注意的一点是Vite默认要求Node版本不能太低如果本机还是Node 14建议先升级Node再继续操作。我自己搭建时用到的核心命令大致如下。# 使用Vite创建Vue 3工程 npm create vitelatest quarantine-admin -- --template vue # 进入项目并安装依赖 cd quarantine-admin npm install # 安装路由、状态管理和UI组件库 npm install vue-router4 pinia element-plus axios # 启动开发服务器 npm run dev2.3 前后端分离与接口联调的核心逻辑这套系统采用前后端分离架构前端运行在Vite提供的开发服务器默认5173端口后端运行在SpringBoot内嵌的Tomcat默认8080端口。两者独立部署通过HTTP接口通信。既然是跨域访问开发阶段就需要在后端做跨域配置否则浏览器会拦截所有Ajax请求。我当时写了一个全局CORS配置类实现WebMvcConfigurer接口允许本地开发地址跨域并开放所有HTTP方法。后端接口统一返回ResultT结构包含code、message、data三个字段。前端在axios封装中增加请求拦截器自动携带Authorization请求头响应拦截器则统一处理后端返回的错误码。这样每个页面的业务代码只需要关心成功后的数据不需要每处都写错误处理逻辑代码量直接少三分之一代码规范度也大大提升。3. 数据库设计与SQL脚本准备思路3.1 核心数据表与关系模型数据库设计是管理系统的地基。我一开始画ER图就确定了用户、角色、菜单权限、隔离人员档案、房间、健康记录、隔离记录、解除审批、消息通知这九张核心表。下面重点讲几张表的字段设计思路这些直接关系到接口好不好写。用户表sys_user和角色表sys_role之间通过用户角色关联表建立多对多关系。隔离人员档案表quarantine_person单独存放姓名、身份证号、联系电话、来源地、入住时间、预计解除时间等字段不直接复用用户表。原因很简单医护人员和管理人员也是用户但他们不需要进入隔离人员档案列表如果强行复用一张表会导致查询时必须额外维护用户类型标记逻辑很绕。房间表quarantine_room里除了房间号和楼层外必须有当前状态字段空闲、已占用、消杀中这样前端展示房间占用情况时只需一条列表查询。健康记录表health_record是数据量最大的一张表。考虑到每人每天可能产生多条记录我特意加了record_date、record_type字段分别记录填报日期和填报来源本人填报/医护人员代填。体温字段使用decimal(4,1)保留一位小数症状描述用varchar(500)。异常标记字段通过一个is_abnormal的tinyint控制便于后期做统计时通过一条SELECT COUNT(*) ... WHERE is_abnormal 1快速拿到异常数量。隔离记录表isolation_record的核心价值是记录每一次隔离周期的完整生命周期。字段包括人员ID、房间ID、开始时间、计划结束时间、实际结束时间、状态、解除原因。审批表approval_record则记录了申请人和审批人信息以及审批状态、审批意见和操作时间。把业务主表和审批流水表分开好处是每一笔操作都有清晰的审计路径答辩时关于“数据可追溯性”的问题也能从容回答。3.2 初始化SQL的编写技巧项目的SQL脚本我分了三个文件schema.sql负责建库建表、data.sql负责初始化管理员账号和基础字典数据、test_data.sql生成一批模拟的人员、健康记录和审批数据。分文件拆分后部署到新环境时可以先执行前两个脚本测试阶段再执行第三个脚本非常灵活。建表时我统一使用InnoDB引擎和utf8mb4字符集。utf8mb4和utf8最核心的区别在于前者能正确存储Emoji字符和部分生僻字既然后端框架已经支持就没有必要在数据库层面给自己埋雷。每张表都带create_time和update_time两个审计字段MyBatis-Plus里可以通过TableField(fill FieldFill.INSERT)和TableField(fill FieldFill.INSERT_UPDATE)配合MetaObjectHandler自动填充不用在业务代码里手动维护这一点在写插入和更新操作时会省非常多事。初始化管理员密码不要直接存明文。我用BCrypt加密后写入脚本具体密文可以在SpringBoot启动时通过一个简单的测试类打印出来也可以直接用在线工具生成BCrypt串。需要注意同一明文每次生成的BCrypt串不同但校验结果一致所以不必纠结两次生成的串是否一样。3.3 SQL窗口函数在统计模块的妙用统计看板模块里有一个需求是展示近14天每日新增隔离人数。如果直接用GROUP BY record_date查询缺数据的那几天会出现空档前端折线图会断开。我改用了MySQL 8.0的递归CTE生成一段连续日期序列再通过左连接补全每日数据。具体思路是先递归生成14天的日期列表再关联统计每天的新增人数。核心SQL大致长这样。WITH RECURSIVE date_range AS ( SELECT CURDATE() - INTERVAL 13 DAY AS date_point UNION ALL SELECT date_point INTERVAL 1 DAY FROM date_range WHERE date_point CURDATE() ) SELECT d.date_point, IFNULL(t.cnt, 0) AS cnt FROM date_range d LEFT JOIN ( SELECT DATE(create_time) AS create_date, COUNT(*) AS cnt FROM isolation_record WHERE create_time CURDATE() - INTERVAL 13 DAY GROUP BY DATE(create_time) ) t ON d.date_point t.create_date ORDER BY d.date_point;如果数据库是MySQL 5.7递归CTE不可用可以退而求其次在前端循环补齐日期或者创建一张日期辅助表。不过我建议毕设升级到MySQL 8.0因为8.0还自带窗口函数很多复杂统计场景的处理会简便很多。4. 核心功能实现与关键代码解析4.1 Spring Boot后端架构与接口实现后端我采用了经典的分层架构controller、service、mapper三层。controller只负责接收参数和返回统一结果结构service层承载具体业务规则mapper层通过MyBatis-Plus提供的BaseMapper完成基础单表操作复杂多表查询则写在XML文件里。这个分层的好处是代码可读性强写的时候脑子也比较清晰不会出现一个类上千行的恐怖场景。以“登记隔离人员”这个核心流程为例controller接收前端传过来的JSON对象service层先做参数校验判断身份证号是否已在隔离中然后分配房间并同时修改房间状态最后插入隔离记录。整个过程必须加Transactional事务注解保证人员档案、房间状态、隔离记录三张表要么同时成功、要么同时回滚。当时我故意测试过一次在service中抛出一个运行时异常观察数据库中的房间状态是否还是“已占用”结果事务生效状态正确回滚这一点是可以在答辩时当亮点讲的。关于认证授权我这里用的是Spring Security JWT方案。用户登录成功后后端生成一个包含用户ID和角色编码的JWT Token前端存储到localStorage并在后续请求中携带。Spring Security的过滤器链会解析Token、加载用户权限并在接口方法上通过PreAuthorize(hasRole(ADMIN))这类注解做细粒度控制。配置里有一个非常关键的点必须放行登录接口和验证码接口否则会出现前端能调通登录、却一直报401的情况。这个坑我折腾了整整一个晚上最后检查SecurityConfig才发现忘了在permitAll()列表里加登录路径。4.2 Vue前端页面与接口对接前端路由分成两部分不需要登录就能访问的页面登录页和必须登录才能访问的Layout主框架。在router/index.js里配置全局前置守卫每次跳转时检查localStorage中是否存在Token。如果访问受保护页面且没有Token直接重定向到登录页。这样从入口处就把未认证请求挡住了后端即便不加额外校验安全性也多了一层。真正规范的开发当然应该后端也校验但前端守卫解决的是“无谓的请求发送”和“页面闪烁”问题。以“隔离人员列表”页面为例页面加载时调用人员分页查询接口后端接收pageNum、pageSize、keyword、status等参数通过MyBatis-Plus的分页插件返回IPageT对象。前端拿到分页数据后把记录填充到el-table中再把total值赋给el-pagination。房间分配、状态变更等操作通过el-dialog弹窗交互完成。表单提交之后调用刷新接口重新拉取列表保证页面展示与数据库同步。关于axios封装有一个值得分享的细节在响应拦截器里判断HTTP状态码和后端业务码。若后端业务码是401或Token过期就直接清除本地登录信息并跳回登录页。如果是403权限不足则弹出友好提示“抱歉你没有该操作的权限”。这比后端返回一堆堆栈让前端白屏要人性化得多。实现代码大概如下service.interceptors.response.use( (response) { const res response.data if (res.code 200) { return res } if (res.code 401 || res.code 403) { localStorage.removeItem(token) router.push(/login) } ElMessage.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) }, (error) { ElMessage.error(error.message || 网络异常) return Promise.reject(error) } )4.3 审批流程与消息提醒的进阶处理作为加分项隔离解除审批没有做成简单的“状态字段直接更新”而是单独建了一张审批表。申请人提交前先判断是否满足隔离天数要求提交后对应管理人员的待办列表里就会出现待审批记录。管理人员点击审批时看到完整的健康记录、体温曲线和申请理由填写审批意见后流程结束。每一步操作在审批表里留一行记录支持全程回溯。消息提醒模块我用的是站内信方案没有引入WebSocket和消息队列。因为毕设场景下实时性要求并没有那么高轮询接口或者登录后拉取未读列表完全够用。后端在人员健康数据异常、解除申请提交这两个节点自动生成一条消息并关联到接收人ID前端导航栏显示未读角标。这样就足够了。真要引入RabbitMQ或者WebSocket反而会增加部署复杂度而且在毕设答辩里如果没有实际通消息场景的压力很难体现价值。5. 联调部署阶段容易踩的坑与排查清单5.1 跨域、端口与网络配置问题前后端分离项目最常遇到的就是跨域问题。现象很典型前端页面打开了后端接口也确认在Postman里能调通但浏览器里的Ajax请求就是报错。解决思路有两种一是在后端加CORS全局配置二是在前端Vite配置server.proxy代理。开发阶段我建议用Vite代理方案因为代理方式会让浏览器以为请求同源不需要后端额外开放跨域上线后由Nginx统一转发配置管理比较干净。Vite代理配置代码如下。export default defineConfig({ server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, // 如果后端接口统一有 /api 前缀可以去掉重写没有则去掉这行 rewrite: (path) path.replace(/^\/api/, ) } } } })部署上线时传统做法是把前端npm run build生成的dist目录放进后端src/main/resources/static下这样后端启动后可直接访问前端页面无需单独部署Nginx。但更接近企业实践的方式是后端打jar包运行在8080端口前端dist目录由Nginx托管Nginx配置接口反向代理转发到后端。虽然毕设阶段不是非做不可但如果你有余力建议自己配一遍Nginx掌握静态资源托管和反向代理的基本操作这对毕业后的面试很加分。5.2 环境版本兼容性排查我把自己在实际部署过程中碰到的问题归类整理了一下做成一张速查表方便大家直接对照排查。问题现象大概率原因处理办法启动报Invalid character found in the request targetTomcat版本对URL特殊字符限制严格前端对请求参数做encodeURIComponent数据库中文乱码连接串没加useUnicodetruecharacterEncodingutf8在JDBC URL中补充参数接口返回时间格式错误Jackson默认序列化格式不满足需求yml中配置时间格式或使用JsonFormat注解Vue打包后白屏publicPath路径不对vite.config中设置base: ./SpringBoot打包后无法找到静态资源前后端未合并部署确定dist目录是否拷贝到classes/static下上传文件大小受限SpringBoot默认单文件1MB限制在配置文件中调大max-file-size和max-request-size数据库连接池初始化报错MySQL驱动版本与MySQL版本不匹配统一使用mysql-connector-j8.0.x版本5.3 一个完整的部署操作示例在项目交付时我习惯写一份部署文档保证在任意一台带Java和MySQL的机器上都能跑起来。最常用的部署方式是把后端打成jar包运行前端dist目录直接用Nginx或直接合并到后端静态目录。假设你采用传统jar包运行模式核心流程如下。# 1. 后端打包跳过测试 mvn clean package -DskipTests # 2. 初始化数据库 mysql -u root -p schema.sql mysql -u root -p data.sql # 3. 启动后端 java -jar target/quarantine-server.jar --spring.profiles.activeprod # 4. 前端构建并将产物复制到后端静态资源目录 cd frontend npm run build cp -r dist/* ../src/main/resources/static/ # 5. 重新打包并启动 cd .. mvn clean package -DskipTests java -jar target/quarantine-server.jar不管用哪种部署方式都要记得在配置文件中区分开发环境dev和生产环境prod数据库连接、日志级别、文件上传路径分开设置。用--spring.profiles.activeprod指定环境即可这样本地测试和生产发布互不干扰。配置文件管理这块虽然简单但在答辩时能讲清楚也是一种加分的工程素养。6. 接口文档、测试数据与答辩展示准备6.1 接口文档怎么组织才实用很多同学的毕设只有代码没有文档答辩老师想看接口规范就得自己翻代码印象分直线下降。这套项目里我额外整理了接口文档没有用Swagger在线生成而是手写了一份Markdown文档把所有接口按模块分组标明请求方式、请求路径、请求参数名称、类型、是否必填、说明、返回结果示例和错误码说明。接口文档中需要特别注意鉴权信息、分页参数和日期格式。在“需要Token的接口”中标注请求头必须包含Authorization: Bearer token这一条实际开发中非常重要我见过不少同学前后端联调时因为请求头没带Token接口一直401却不知道怎么排查。返回结果示例最好直接贴上真实的JSON响应不要凭感觉写否则前端对接人员会一头雾水。6.2 演示数据的准备思路为了让系统在演示时“有东西可看”test_data.sql里的数据不能随便造要符合业务语义。我生成了一批模拟数据40个不同来源地的待隔离人员分布在1至3号楼的房间中健康记录覆盖近14天其中随机插入几个体温超过37.3℃的异常记录隔离记录里包含部分已完成和部分正在隔离中的数据。这些数据让统计看板上的趋势图、占比图以及异常预警列表都有内容可展示。生成测试数据的SQL写起来很机械。可以借助存储过程批量插入也可以用Excel生成Insert语句后批量导入。如果图省事直接写死几十条insert但要注意时间字段尽量相对当前日期动态生成例如DATE_SUB(CURDATE(), INTERVAL 3 DAY)表示三天前这样数据表不会因为时间推移变得“全部过期”演示效果要好很多。6.3 毕设答辩中的加分展示点我个人认为答辩环节不需要把每个功能的代码细节都讲一遍老师想听的是你能不能用简洁的话把项目从需求到实现的完整链路讲清楚。建议重点准备三块内容第一项目背景和角色痛点分析解释为什么需要隔离管理系统解决哪些手动管理场景的问题第二技术架构图讲解讲清前后端分离、数据库设计、认证授权流程这部分可以配合手绘结构图展示第三核心流程演示从登录到人员登记、健康上报、解除审批、统计查看走通一条完整链路即可。打开系统演示之前先登录后台把测试账号准备好避免现场忘记密码或者数据表被人改乱。演示时优先走“异常健康数据触发预警”这个路径因为这条链路既展示提交和审批流程又能展示消息通知和统计报表模块一个流程能同时体现多个功能点老师会更直观地感受到系统不是纯页面堆砌。7. 常见问题速查与经验小结7.1 开发高频问题清单开发周期中遇到的高频问题按后端、前端、数据库三个维度整理如下。后端方面最常遇到的是Spring Security放行路径设置不正确导致部分公开接口无法访问其次是用MyBatis-Plus的saveOrUpdate时因主键策略配置不当导致插入失败。使用ASSIGN_ID雪花算法时一般没问题但如果使用AUTO自增策略需要确保数据库表主键确实自增。事务失效也很常见本质原因是同类内部方法调用时Transactional注解不生效因此事务方法最好在service实现里通过外部调用触发。前端方面最大的坑是跨域配置没生效时页面白屏、数据加载失败。排查思路是先看浏览器Network面板确认请求是否发送、响应状态码和具体错误内容再看控制台的报错信息越具体越好搜。其次是Vue 3组件中使用reactive包裹数组时如果直接通过下标修改元素可能不会触发视图更新需要用ref或者使用数组的splice方法替换。Element Plus表单校验时如果prop名称和表单model的字段名不一致校验会静默失效也是一个很容易忽略的问题。数据库方面最容易踩的是忘记给外键或查询条件字段加索引在测试数据不多时没感觉一旦test_data脚本生成几百条记录列表查询和统计查询就明显变慢。SQL做表关联时建议使用LEFT JOIN而非INNER JOIN防止因关联表无数据导致主表记录被过滤掉。分组统计时如果结果字段不在GROUP BY子句中MySQL的ONLY_FULL_GROUP_BY模式下会直接报错这种情况下要么把字段加入分组要么改用聚合函数包一层。7.2 时间规划与代码管理建议做毕设项目最怕虎头蛇尾前期热情高涨后期赶工导致质量崩塌。按我的经验一个中等复杂度的管理系统项目建议把时间分成四个阶段需求与数据库设计约一到两周、后端接口开发约三周、前端页面联调约三周、测试与文档整理约一到两周。在进入编码阶段之前数据库设计文档和接口清单必须定稿中途改表结构牵一发动全身代价很高。代码管理方面哪怕只是一个人开发也建议从第一天就用Git管理项目。至少每天提交一次写清楚commit信息比如feat: 完成隔离人员登记接口、fix: 修复健康记录分页查询总数错误。这样做的好处并不仅仅是防丢代码更关键的是回滚时可以精确定位到某个功能节点。如果前期没有做任何版本管理后期改坏了一个模块却找不到问题引入点只能靠肉眼逐行找bug痛苦的体验谁试谁知道。7.3 写在最后的经验心得这套SpringBoot Vue的隔离管理系统本质上是一个标准的“前后端分离管理系统”范式业务场景和管理人员、被管理人员这套模式一旦吃透往后迁移到其他管理类项目比如访客预约系统、宿舍管理系统、志愿者管理系统核心骨架完全可以直接复用只需要替换业务表和页面文案即可。我在实际操作中最深的体会有三点。第一点先把数据表关系画清楚再写代码比上来就敲Controller靠谱一百倍表关系理顺了接口设计几乎是水到渠成。第二点前后端联调时要尽早开始不要等后端所有接口都写完再写前端最好每完成一个模块就前后端走一遍这样发现问题时上下文还热着修复成本非常低。第三点文档不是给老师看的而是给自己留的。一个月后再打开这个项目你会发现只有当时认真记录的接口文档和部署说明才能帮你快速回忆起每个模块的设计意图。