SpringBoot+Vue养老院管理系统：从数据库到前后端联调实战

简介这套基于 Java、Spring Boot、Vue 与 MySQL 的养老院管理系统是一套面向高校毕业设计、课程设计与期末大作业的完整项目。系统围绕养老院日常运营场景设计包含老人入住登记、健康档案、家属信息管理、员工排班与考勤、财务缴费退费统计、日常活动安排及健康监测记录等功能模块前端采用 Vue 构建响应式界面后端基于 Spring Boot 提供稳定接口MySQL 负责数据持久化前后端代码齐全、界面直观、操作便捷可直接导入 IDEA 等开发工具运行也可按需定制扩展。资源压缩包共 591 个文件以 Java 源码、Vue 组件、SVG 图标、JPG/PNG 图片和 SQL 数据库脚本为主同时包含 Maven 配置、XML/YML 配置文件及常用软件工具整体仅 20.4MB下载后借助数据库脚本即可快速初始化系统。目前已有 49 人学习浏览适合需要完成毕业设计、课程设计或期末大作业的学生参考借鉴对于开发者来说也是一份结构完整、便于二次开发的企业级前后端分离案例能够帮助理解数据库设计、接口开发与项目部署的完整流程整体具有较高的实际应用价值。1. 养老院管理系统落地架构选型与工程快拆拿到这份基于 Java SpringBoot Vue MySQL 的养老院管理系统源码时我第一反应是看它的启动脚本——项目根目录下躺着run.bat、build.bat和3-build.bat这说明它不是那种只丢给你一堆源码的敷衍工程。养老院管理系统的核心痛点是数据分散老人档案、员工排班、财务流水、健康监测各记各的管理者想看一眼全局得翻三个 Excel。这套系统用 SpringBoot 做后端接口层Vue 做前端交互层MySQL 存业务数据把「老人-员工-财务-活动-健康」五条线拧成了一张可查询、可统计、可追溯的表。它适合两类人一类是拿它做毕业设计或课程设计的学生代码结构完整、能跑通、有数据库脚本另一类是确实需要给中小型养老机构搭信息化底座的开发者前端有.vue.bak备份文件可以对比改版痕迹后端 Maven 依赖清晰二次开发改起来不费劲。2. 数据库模型设计与 SpringBoot 后端分层奠基2.1 核心表结构与关联关系打开sql目录下的建表脚本能看到这套系统的表设计没有过度抽象而是贴着业务场景走的。最核心的五张表elderly_info存老人基本信息字段包括姓名、身份证号、床位号、家属联系方式、入住时间、护理等级employee_info存员工档案含工种、排班时间段、入职状态finance_records存收支流水每条记录带收支类型收入/支出、金额、分类伙食费/护理费/药品费/工资/维修、经办人health_check存健康监测数据每次测量记录体温、血压、心率、血氧、测量时间和关联的老人 IDdaily_activity存活动安排含活动主题、时间、地点、参与人数上限。这些表通过外键或者逻辑外键关联比如health_check表的elderly_id指向elderly_info表的主键。从设计角度来看这套表结构没有做过度范式化拆分finance_records直接冗余了elderly_id和employee_id字段目的很明确财务统计的时候不需要连表查询一次SELECT就能按条件把流水拉出来。如果你打算自己建库可以参考下面的表结构脚本CREATE TABLE elderly_info ( id INT NOT NULL AUTO_INCREMENT, name VARCHAR(50) NOT NULL COMMENT 老人姓名, id_card VARCHAR(18) DEFAULT NULL COMMENT 身份证号, bed_no VARCHAR(20) DEFAULT NULL COMMENT 床位号, care_level TINYINT DEFAULT 1 COMMENT 护理等级 1-3级, family_phone VARCHAR(20) DEFAULT NULL COMMENT 家属电话, entry_date DATE DEFAULT NULL COMMENT 入住日期, status TINYINT DEFAULT 1 COMMENT 1在住 0退住, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT老人信息表;字段设计上有两个容易被忽视的细节。status字段是逻辑删除标记老人退住后数据保留而不是物理删除这样财务模块统计历史入住记录时不会丢数据健康档案也能追溯——这个设计决策让报表模块的SUM聚合不会因为记录被删而出错。care_level用了TINYINT而不是VARCHAR因为护理等级在业务层是固定枚举1 级、2 级、3 级用数字存储可以减少无效字符开销查询走索引也更快。2.2 Maven 工程结构与依赖配置上一篇观察到的pom.xml用的是 SpringBoot 2.x 系列父依赖通过spring-boot-starter-parent统一管理版本号避免了手动维护一堆 jar 版本冲突。pom.xml里必然引入了spring-boot-starter-webSpringMVC 内嵌 Tomcat、mybatis-plus-boot-starterORM 层、mysql-connector-javaJDBC 驱动、lombok减少实体类 getter/setter 样板代码、spring-boot-starter-validation后端参数校验。这套依赖组合的好处是MyBatis-Plus 自带的BaseMapper提供了selectPage、selectList、insert等通用方法写 CRUD 接口时不用重复手写 SQL 映射。工程内部按controller - service - mapper三层分包controller层只负责接收参数和返回结果service层写业务逻辑mapper层通过 MyBatis-Plus 的Wrapper构造查询条件。比如老人列表的分页查询代码骨架长这样RestController RequestMapping(/api/elderly) public class ElderlyController { Autowired private ElderlyService elderlyService; GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer limit, RequestParam(required false) String keyword) { PageElderlyInfo pageParam new Page(page, limit); LambdaQueryWrapperElderlyInfo wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.isNotBlank(keyword), ElderlyInfo::getName, keyword) .orderByDesc(ElderlyInfo::getEntryDate); return Result.success(elderlyService.page(pageParam, wrapper)); } }这段代码的关键在LambdaQueryWrapper—— 它是 MyBatis-Plus 的条件构造器like方法第一个参数传布尔表达式为false时自动跳过该条件避免手写if (keyword ! null)的冗长判断orderByDesc按入住日期倒序排列保证新入住的老人排在列表最前面。如果你从这套源码上做二次开发最常用的就是在这个Controller里新增接口然后Service层调BaseMapper的selectCount、selectMaps这类方法完成聚合统计。2.3 配置文件的数据库连接与环境隔离application.yml是启动的关键里面配置了数据源、端口和 MyBatis-Plus 的日志级别。默认配置里数据库地址是jdbc:mysql://localhost:3306/yanglao?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai其中serverTimezone必须显式指定否则高版本 MySQL 驱动会报时区错误。另一个容易踩坑的点是allowMultiQueriestrue如果项目里有批量插入或批量更新的 SQL不加这个参数会被 MySQL 默认拦截。建议你在本地跑的时候加一行spring: datasource: url: jdbc:mysql://localhost:3306/yanglao?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiallowMultiQueriestrueuseSSLfalse username: root password: 123456 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImplStdOutImpl会让每条 SQL 打印到控制台调试阶段建议开着排查ORM映射问题时能直接复制控制台的 SQL 语句到 Navicat 里跑一遍确认是数据问题还是 SQL 问题。等上了生产环境再把log-impl换成org.apache.ibatis.logging.slf4j.Slf4jImpl或直接注释掉。3. Vue 前端模块构建与 API 联调实战3.1 前端工程结构与路由设计前端部分用的是 Vue 2.6.x Element UI工程目录下可以看到IndexMain.vue.bak、IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak这些备份文件说明原始开发者对侧边栏菜单、头部面包屑、主内容区布局有过版本调整。路由配置用的是vue-router的懒加载方式比如const routes [ { path: /dashboard, name: Dashboard, component: () import(../views/Dashboard.vue), meta: { title: 首页概览, icon: el-icon-data-line } }, { path: /elderly, component: () import(../layout/IndexMain.vue), children: [ { path: list, name: ElderlyList, component: () import(../views/elderly/List.vue), meta: { title: 老人管理 } }, { path: health, name: HealthRecord, component: () import(../views/elderly/Health.vue), meta: { title: 健康监测 } } ] } ];路由按业务模块做了嵌套/elderly路径下挂list和health两个子页面访问路径分别是/elderly/list和/elderly/health顶部导航和侧边栏的高亮状态通过$route.path自动匹配。meta.title字段在BreadCrumbs.vue组件里被读取并渲染成面包屑文本。懒加载的关键在于() import()这种写法——它让每个路由组件独立被打包成单独的 chunk 文件首屏加载只拉当前页面需要的 JS体积小很多。3.2 axios 封装与前后端联调前端和 SpringBoot 后端的数据交互通过 axios 完成源码里utils/request.js做了统一封装拦截器里处理了请求超时时间和登录态 token 注入import axios from axios; const service axios.create({ baseURL: /api, timeout: 15000 }); service.interceptors.request.use(config { const token localStorage.getItem(admin-token); if (token) { config.headers[Authorization] Bearer token; } return config; }); service.interceptors.response.use( response { const res response.data; if (res.code ! 200) { this.$message.error(res.msg || 请求失败); return Promise.reject(new Error(res.msg)); } return res.data; }, error { this.$message.error(error.message); return Promise.reject(error); } );baseURL: /api配合 Vue CLI 的 devServer 代理把前端的/api路径转发到后端 8080 端口绕开了跨域限制。实际开发中我一般会在vue.config.js里这样写module.exports { devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } };联调阶段用接口测试工具把列表页验证一遍打开老人管理页面观察 Network 面板列出接口返回的数据结构是{ code, msg, data }三层其中data里包含records、total、current、size四个字段——records是当前页的数据数组total是总数前端表格组件用total计算分页总页数。这套结构是 MyBatis-Plus 分页插件的默认输出形状后端如果没有手动改写前端拿到的就是这个格式。4. 健康监测与财务统计模块的实战细节4.1 健康预警与趋势图的实现逻辑养老院管理系统里的健康监测模块不是简单记录数据就完事它需要有一层「判断逻辑」。源码中HealthController暴露了两个核心接口一个是新增健康检查记录另一个是查询最近 30 天的监测历史。新增记录的接口做了一件事——异常值自动标记PostMapping(/add) public Result addHealthRecord(RequestBody HealthCheck record) { if (record.getBloodPressure() 140 || record.getBloodPressure() 90) { record.setIsAbnormal(1); record.setAbnormalDesc(血压超出正常范围); } if (record.getHeartRate() 100 || record.getHeartRate() 60) { record.setIsAbnormal(1); record.setAbnormalDesc(record.getAbnormalDesc() ;心率异常); } healthService.save(record); return Result.success(); }这里判断阈值的思路是「高压 140 或 90」视为异常心率超过100或低于60也标记isAbnormal字段用0/1表示正常和异常abnormalDesc用字符串拼接异常原因。统计报表页面上有个趋势折线图查的就是health_check表按时间倒序取的heart_rate字段前端ECharts组件直接消费后端返回的ListInteger渲染曲线。如果你要扩展这个模块常见的做法是把阈值抽到数据库配置表让护士在系统设置页能调整而不改代码更进一步可以用 AOP 切面在记录插入后异步推送预警短信。4.2 财务流水统计的 SQL 聚合技巧财务模块的报表页需要展示「本月收入」「本月支出」「本月结余」三个核心指标源代码的实现逻辑没有用 Java 循环去内存汇总而是在 Mapper 层直接用 SQL 聚合SELECT SUM(CASE WHEN type income THEN amount ELSE 0 END) AS total_income, SUM(CASE WHEN type expense THEN amount ELSE 0 END) AS total_expense, SUM(CASE WHEN type income THEN amount ELSE -amount END) AS net_balance FROM finance_records WHERE create_time BETWEEN #{startDate} AND #{endDate}CASE WHEN是这段 SQL 的核心它把同一列的数据按照业务含义拆成三路聚合一次查询就把三个指标拿全。net_balance用SUM 条件判断收入记为正数、支出记为负数最终数值就是结余。这套写法的优势是数据库层面的聚合计算比在 Java 内存里 for 循环遍历几千条流水快一个数量级而且减少了内存占用。传参的时候要注意日期边界如果前端传的是2025-05-01到2025-05-31后端要用LocalDateTime把结束日期补上23:59:59否则BETWEEN会把 5 月 31 号当天的数据漏掉。这个细节很容易被忽略但恰恰是财务统计准确性的关键。5. 启动排错与二次开发扩展点拿到源码后第一件事不是看代码而是先把run.bat打开检查里面的启动命令。正常情况下这个脚本内容类似于echo off cd /d %~dp0 mvn spring-boot:run如果本地 Maven 没有配置阿里云镜像第一次构建会非常慢甚至卡死。我通常会把settings.xml里的mirror换成阿里云仓库然后执行mvn clean install -DskipTests先打一遍包确认依赖解析无误后再用java -jar target/xxx.jar启动后端。启动过程中最容易报的三个错是端口被占用、数据库连接失败、MyBatis-Plus 的 SQL 执行异常。端口被占用时用netstat -ano | findstr 8080看进程号然后taskkill /PID 进程号 /F解决数据库连接失败则检查application.yml里的账号密码和 Navicat 连的是不是同一个库。前端启动命令是npm install然后npm run serve如果npm install报 ERESOLVE 错误那是依赖树冲突建议直接用npm install --legacy-peer-deps跳过校验。前端编译完成后看控制台输出的端口默认是 3000浏览器访问http://localhost:3000登录页验证码能出来说明联调通了。那堆.vue.bak文件是半成品备份不用管它们不影响构建。二次开发如果想加「家属端查看」功能路由和菜单是现成的在IndexAsideStatic.vue的动态菜单配置里加一个菜单项声明新建一个FamilyView.vue页面放在views/family目录下然后在router/index.js的 children 数组里注册对应路由即可。后端只需要提供一组只读接口——老人基本信息、最近健康记录、活动公告——并在Controller上加PreAuthorize注解控制访问权限。这套源码的扩展点设计得比较常规顺着controller-service-mapper三层路径往下走不绕弯子。本文还有配套的精品资源点击获取