基于Spring Boot和Vue的养老院管理系统设计与实现

简介本资源是一套完整的养老院信息化管理毕业设计项目面向计算机专业本科生及Java全栈初学者聚焦智慧养老场景下的业务数字化落地。系统采用Spring Boot构建后端微服务架构Vue.js开发响应式前端界面涵盖用户管理、老人档案、房间调度、日常护理、膳食计划、文娱活动、消息通知、财务结算与安防监控等九大核心模块并支持数据导入导出与多维统计报表生成。压缩包共含若干文件具体数量未提供主体为Java源码、Vue前端工程、MySQL建库建表脚本及详细说明文档整体大小19.85MB结构清晰、注释完整便于理解MVC分层逻辑与前后端分离协作流程。目前已有91人学习下载适合用于课程设计参考、毕设快速启动或Spring BootVue技术栈的综合实践训练。 养老院管理系统算是Spring Boot Vue技术栈里特别经典的一类选题网上能搜到的资料和开源项目也不少但这恰恰是个陷阱很多同学拿到一个所谓“前后端源码数据库脚本说明文档”的完整包之后反而不知道怎么下手。数据库脚本导入报错、前端依赖装不上、后端一启动就端口冲突、答辩被老师问两句就卡壳——这些情况我见得太多。这篇东西不打算只介绍项目本身我干脆把这类系统的设计思路、代码结构、数据库要点以及拿到源码包之后怎么跑通、怎么改、怎么答辩一次说清楚。尽量讲得直接一点能抄作业的地方绝不绕弯子。1. 为什么毕业设计选“养老院管理系统”是安全牌先聊选题这件事。毕设选题最重要的不是花哨而是“答辩的时候你能讲清楚”。养老院管理系统在这一点上有天然优势。1.1 业务场景足够清晰养老院管理系统服务的对象非常明确养老院里的管理人员、护理人员、老人以及家属。业务核心就是围绕老人的入住、生活、健康、费用这几个维度展开。比起网上那些“校园二手交易平台”“在线考试系统”这类同质化严重的选题养老院管理系统的业务场景自带温度能让评委老师一眼看懂你在做什么也容易在答辩时讲出业务价值。1.2 技术栈对齐主流招聘需求前后端分离是目前企业开发的主流形态。Spring Boot负责后端接口Vue负责前端页面二者通过JSON格式的数据进行交互。这套技术栈不仅适合做毕设也和市面上大量Java开发岗位的日常工作是吻合的。选这个方向你写在简历上的“Spring Boot Vue MySQL”项目经验是能被面试官认可的。1.3 功能边界可控不至于做不完毕设最大的坑是“想做的太多最后什么都交付不了”。养老院管理系统虽然听起来功能很多但只要把角色权限、老人档案、健康记录、费用管理这几个核心模块做好就已经能满足毕设要求了。剩下的功能可以做成锦上添花比如用药提醒、护工排班时间不够完全可以简化处理。2. 功能模块拆解养老院业务如何落到系统里搞清楚系统要做什么比急着写代码重要得多。我建议先画业务流程图把角色和操作理清楚再设计功能和数据表。2.1 角色权限设计养老院管理系统一般分成三个角色系统管理员负责整个系统的配置包括部门管理、员工账号管理、角色权限分配、基础数据维护。养老院工作人员护工/护士/前台负责老人的日常管理操作包括入住登记、健康记录录入、用药提醒处理、费用登记、来访登记等。家属可选角色查看老人的基本信息、健康记录、费用明细但不能进行修改操作。这三个角色对应着系统的权限边界。在Spring Boot后端我用的是JWTJSON Web Token做身份认证配合拦截器校验请求的token角色权限则通过自定义注解的方式在需要控制权限的接口上加一个RequirePermission(admin)之类的标记。这样接口层面就锁死了不同角色的操作范围。2.2 核心业务模块以下是我认为这套系统必须具备的核心模块老人档案管理老人基本信息、家属联系方式、入住日期、紧急联系人、既往病史。这里要有“新增-编辑-查看-停用/退住”的完整状态管理。床位管理养老院的床位是核心资源。床位状态需要区分空闲、已入住、维修中。这个模块适合做简单的可视化布局用卡片形式展示楼层和房间。健康记录管理护工定期录入老人的体温、血压、心率、血糖等数据形成趋势记录。这块页面适合用表格折线图展示后端提供按时间范围查询的接口。用药提醒为老人建立用药计划包括药品名称、剂量、频次、开始和结束日期。系统根据当前时间自动判断是否有需要提醒的用药任务。费用管理包括床位费、护理费、餐费等。每个老人每月自动生成费用账单支持查看缴费状态。来访登记登记到访人员信息维护访客记录这是养老院安全管理的常见需求。2.3 模块之间的关系老人是整个系统的主线。以老人信息表为核心床位表、健康记录表、用药计划表、费用表、家属绑定表都通过老人ID关联到老人身上。这套关系理清了数据库设计就完成了一大半。3. Spring Boot后端接口设计与权限控制的全貌后端的核心任务是把业务逻辑转化为RESTful API。我用Spring Boot 2.7.x版本说明因为目前大部分毕设项目的依赖版本都基于这个版本不易踩坑。3.1 项目结构规范后端源码一般建议按这种结构分包com.example.eldercare ├── controller # 控制层接收前端请求 ├── service # 业务逻辑层接口实现类 ├── mapper # MyBatis-Plus数据访问层 ├── entity # 数据库实体类 ├── dto # 数据传输对象用于接收前端参数 ├── config # 配置类跨域、拦截器、MyBatis-Plus配置 ├── common # 通用类统一返回结果、异常处理、工具类 └── ElderCareApplication.java # 启动类这种分包方式是后端项目最标准的做法。controller里只做参数接收和结果返回业务逻辑全部放到service层mapper只跟数据库打交道。分层清晰了答辩的时候讲代码结构也更容易。3.2 统一返回结果设计前后端分离项目里接口的返回格式必须统一。我一般定义一个Result类包含三个字段code状态码、message提示信息、data具体数据。正常返回格式如下{ code: 200, message: 操作成功, data: { userId: 1, userName: 张三 } }如果出现异常则交给全局异常处理器统一拦截返回类似{ code: 500, message: 服务器内部错误 }的格式。这样做的好处是前端axios响应拦截器只需要判断code是否为200就能统一处理所有请求的结果不需要每个接口单独判断。3.3 登录认证与JWT登录接口的处理逻辑是接收用户名和密码通过MyBatis-Plus的selectOne查询用户表再用MD5或BCrypt对密码做校验。校验通过后生成JWT令牌返回给前端。JWT相关的核心依赖是jjwt在pom.xml中加入dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.9.1/version /dependency生成token的代码大致如下String token Jwts.builder() .setSubject(user.getUsername()) .claim(role, user.getRole()) .setExpiration(new Date(System.currentTimeMillis() 3600_000)) .signWith(SignatureAlgorithm.HS256, secretKey) .compact();前端登录成功后将token存储到localStorage之后每次请求都在请求头Authorization字段中带上这个token。后端通过拦截器统一校验校验不通过就返回401状态码。提示如果项目要求做密码加密不要用MD5做简单哈希至少用BCrypt加密Spring Security Crypto工具包里有现成的BCryptPasswordEncoder。3.4 接口设计简表接口路径尽量用RESTful风格我选了几个典型接口列出来功能请求方式接口路径说明登录POST/api/user/login接受用户名密码返回token获取老人列表GET/api/elder/page分页查询老人信息新增老人POST/api/elder添加老人档案修改老人PUT/api/elder更新老人资料离职/退住PUT/api/elder/status修改老人状态为退住录入健康记录POST/api/health新增一条健康测量记录查询健康趋势GET/api/health/list/{elderId}按老人ID查历史记录生成费用账单POST/api/fee/generate根据月份生成费用查询费用流水GET/api/fee/list分页查询费用4. Vue前端页面组织、路由守卫和数据联调说完后端前端是这套系统最容易让新手卡住的地方。Vue的项目结构、路由配置、axios封装这三样东西搞定前端就不会出大问题。4.1 技术选型这一套系统我在实测中推荐使用Vue 2 Element UI或者Vue 3 Element Plus。毕设项目用Vue 2的居多因为网上教程多遇到问题好搜。Vue 3虽然新但部分旧组件库插件的兼容性需要额外处理对新手不算友好。如果代码包里的前端代码用Vue 2写那package.json里的关键依赖一般长这样dependencies: { axios: ^0.21.1, core-js: ^3.6.5, element-ui: ^2.15.6, vue: ^2.6.11, vue-router: ^3.2.0, vuex: ^3.4.0 }4.2 路由配置与权限守卫前端路由可以分成两类不需要登录就能访问的比如登录页以及必须登录后才能访问的比如首页、老人管理、费用管理。用vue-router的beforeEach全局前置守卫来控制。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { next() } else { if (!token) { next(/login) } else { next() } } })这个逻辑很简单去登录页直接放行去其他页面时先检查有没有token没有token就强制跳回登录页。这是最常见的路由权限控制方案也是毕设答辩时老师最爱问的点务必能自己讲出来。4.3 axios封装与请求拦截axios需要统一封装否则每个页面都写一堆重复代码。封装时主要做两件事一是设置baseURL让所有请求都指向同一个后端地址二是在请求拦截器里给每个请求自动加上token。import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization token } return config }) request.interceptors.response.use(response { const res response.data if (res.code 200) { return res } else { // 统一处理业务异常 return Promise.reject(new Error(res.message)) } })这样封装完成后页面里的调用就变得非常简洁const res await request({ url: /elder/page, method: get, params: params }) this.tableData res.data.records4.4 前端页面结构页面可以按模块分成这样几类登录页账号密码表单。首页布局左侧菜单栏右侧内容区用组件布局。老人管理表格展示老人列表包含搜索、分页、新增弹窗、编辑抽屉。健康记录按老人查看健康记录用ECharts做数据趋势图。费用管理列表展示账单支持按月份筛选。个人中心修改密码和个人信息。开发顺序建议先做登录和首页框架再按模块从简单到复杂逐步实现。注意前后端联调时最容易遇到的问题就是跨域。后端必须开启跨域配置。最简单的处理办法是在config里加一个CorsConfig配置类或者在Controller上加CrossOrigin注解。如果前后端都放在同一台机器上开发也可以在前端vue.config.js里配置代理。5. 数据库设计11张核心表如何支撑整个业务数据库脚本是很多同学打开代码包后第一个会去看的东西也是最容易出问题的部分。我见过太多人一导入脚本就报错。其实只要理解整个数据库的结构脚本出问题也能快速定位。5.1 核心表清单养老院管理系统建议设计以下这些表表名用途关键字段sys_user系统用户表user_id, username, password, real_name, role, statuselder_info老人信息表elder_id, elder_name, gender, birth_date, id_card, phone, check_in_date, bed_id, statusbed_info床位信息表bed_id, bed_no, room_no, statushealth_record健康记录表record_id, elder_id, temperature, blood_pressure, heart_rate, record_date, create_bymedication_plan用药计划表plan_id, elder_id, drug_name, dosage, frequency, start_date, end_datefee_record费用记录表fee_id, elder_id, fee_type, amount, status, fee_month, create_timevisit_record来访登记表visit_id, elder_id, visitor_name, visitor_phone, visit_time, remarkdept_info部门表dept_id, dept_namesys_role角色表role_id, role_name, role_codefamily_bind家属绑定表bind_id, elder_id, relation, phone5.2 表关系解析老人信息表elder_info是整个系统的核心。健康记录表、用药计划表、费用记录表、来访登记表都通过elder_id外键关联到老人表。床位表bed_info和老人表通过bed_id关联一个床位同一时间只能入住一位老人。sys_user表存储的是系统账号为了简化权限模型可以直接在表里加一个role字段用字符串区分管理员和普通工作人员。如果项目要求更正规再引入角色表和多对多关系。5.3 数据库脚本关键点导入脚本遇到报错大部分情况是MySQL版本或者字符集设置的问题。导入前注意几个关键配置数据库编码建议使用utf8mb4不然后期存emoji或者生僻字容易出问题创建数据库时建议加一句SET NAMES utf8mb4;表结构中的主键建议用自增整型也可以用雪花ID但对毕设系统来说自增主键最简单实用外键约束、索引、初始化数据都包含在脚本里注意脚本中插入的初始密码一般是MD5加密后的值记得确认好再导入。提示如果导入的时候报错不要慌。先检查MySQL版本是否低于脚本要求再检查脚本开头的建库语句是否包含CREATE DATABASE IF NOT EXISTS。把报错信息复制到搜索引擎一般都能解决。6. 拿到源码后的实操路线跑通、改造与答辩代码包拿到手第一件事不是打开IDE狂看代码而是先花十分钟把项目结构、技术栈版本、数据库脚本、说明文档都过一遍心里有数了再动手。6.1 本地启动步骤按我平时帮人排查项目的经验一个完整的Spring Boot Vue项目跑起来需要以下几个步骤安装JDK 1.8或11、Maven 3.6、Node.js 14、MySQL 5.7或8.0。用Navicat或命令行创建数据库导入项目提供的eldercare.sql数据库脚本。打开后端项目修改application.yml中的数据库连接信息改成自己的用户名和密码。在项目根目录执行mvn spring-boot:run或者在IDE里直接运行启动类。前端打开命令行执行npm install安装依赖。注意如果npm install特别慢建议切换为国内镜像源执行npm config set registry https://registry.npmmirror.com装依赖的速度会快很多。执行npm run serve启动前端开发服务器访问http://localhost:8080。前端默认端口一般在8080后端默认端口如果也是8080就会冲突。这时需要改前端的vue.config.js里的devServer.port或者改后端application.yml里的server.port保证两者不冲突。6.2 演示路径设计答辩演示环节最容易踩的坑是“乱点一通没有逻辑”。建议演示时按业务故事线走第一步打开浏览器输入地址进入登录页用管理员账号登录系统。第二步展示首页的整体布局简单介绍左侧菜单包含哪些功能模块。第三步进入老人档案管理演示添加一位新老人包括填写基本信息、分配床位。然后演示编辑老人信息和退住操作。第四步进入健康记录模块给刚才添加的老人录一条体温、血压数据展示表格和趋势图表。第五步进入费用管理演示按月生成费用账单、修改缴费状态。第六步演示权限控制退出登录用一个普通护理员账号重新登录展示没有权限的功能是隐藏或不可操作的。这套流程走完答辩老师基本对你的系统功能有了全面的了解。6.3 可能被问到的问题答辩的问题万变不离其宗主要集中在三个方面为什么选Spring Boot——为了快速构建独立的微服务应用简化配置内置Tomcat生态丰富。JWT和传统Session有什么区别——JWT无状态不需要在服务端保存会话信息适合前后端分离和分布式部署。如果老人数量增长到一万系统会怎么优化——可以用Redis做缓存加速查询、用索引优化慢SQL、考虑分库分表、引入消息队列等。这类问题不需要答得多深但一定要展现出你认真思考过系统的不足和优化方向。6.4 二次改造建议如果时间充裕建议在源码基础上有针对性地改一两个地方既能体现工作量也能避免和班上其他同学重题。好做的方向有三个新增数据可视化大屏页面用ECharts展示老人年龄分布、入住率、缴费情况等图表或者加入导出Excel功能用EasyPOI或Apache POI实现老人信息、费用清单的导出如果做养老院管理系统还可以加一个简单的护工排班模块用日历的形式展示每周排班表。改动不需要太大加一个有亮点的功能就足够让老师觉得你有独立思考能力。7. 常见踩坑记录与排查技巧最后把测试过程中最常见的几个坑集中写一下每一个都是实际会出现的问题提前预防可以省下大量时间。7.1 数据库时区问题连接MySQL时如果application.yml里的url没有加serverTimezoneAsia/Shanghai启动时容易报时区错误或者查询出来的时间和本地时间相差8小时。解决办法url: jdbc:mysql://localhost:3306/eldercare?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8mb4allowPublicKeyRetrievaltrue7.2 前端端口被占用使用npm run serve启动时如果提示端口被占用可以直接在vue.config.js里改端口devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }这里同时配置了代理把/api开头的请求转发到后端地址可以绕开跨域问题。7.3 后端启动时MyBatis-Plus报错如果是用MyBatis-Plus框架启动报错里出现“Invalid bound statement”之类的问题多半是mapper.xml文件没有正确扫描到。需要在启动类加MapperScan(com.example.eldercare.mapper)注解或者检查mapper.xml的namespace路径是否和接口全类名一致。7.4 前后端联调请求404页面上请求后端接口404原因一般有两种一是后端服务的端口不是前端代理指向的端口二是接口实际路径和前端请求路径不一致。排查时先直接在后端地址栏访问接口地址比如访问http://localhost:8080/api/elder/page如果返回数据说明后端正常再从前端network面板看请求是否被正确代理。7.5 修改代码后不生效后端的修改需要重新启动Spring Boot应用才会生效前端修改代码后热更新一般会自动生效但偶尔Vue会卡在缓存上这种情况刷新浏览器页面或者重启npm run serve即可。这些坑看起来很多但本质都是环境配置问题。只要你在动手前把环境变量、数据库连接、端口配置这三样核对清楚90%的问题都不会遇到。养老院管理系统这个选题在工作量上足够覆盖一套完整的毕业设计需求在技术上也正好踩在主流技术栈上。关键在于你要真正把它跑通、改顺、讲明白而不只是停留在“下载了一个源码包”这个层面。动手前多花点时间把系统结构和业务流程理清楚后面每一步都会顺利很多。本文还有配套的精品资源点击获取