简介一款采用前后端分离架构的养老院管理系统毕业设计项目基于Spring Boot构建后端接口、Vue构建前端页面适合计算机相关专业学生、养老机构信息化人员以及需要快速搭建管理后台的工程师。系统围绕养老院日常运营设计功能覆盖用户管理工作人员/家属/老人多角色注册登录与信息维护、老人档案健康状况、入住情况、紧急联系人及数据导入导出、房间管理空余床位实时查看与分配调度、日常护理定期预约、特殊需求处理与健康记录、膳食管理菜单规划、食材采购与配餐、活动娱乐文化活动、健身课程与参与记录、通知消息药品提醒、活动通知等实时推送、财务管理费用收取与账单查询、安全监控区域进出与访客权限和数据分析报表健康分析、满意度调查等核心模块形成完整业务闭环。资源压缩包约19.85MB内含前后端源码、数据库脚本与说明文档导入数据库后即可运行调试项目结构清晰、注释规范便于二次开发与功能扩展。目前已有92人学习适合作为毕业设计参考、课程项目实践或中小型管理系统快速开发的基础模板。1. 养老院管理系统用 Spring Boot Vue 做毕业设计这条路线到底值不值得走拿到“基于 springbootvue 的养老院管理系统前后端源码数据库脚本说明文档毕业设计.zip”这个压缩包很多人第一反应是解压、启动、截图、写论文但实际动手后才发现真正拦路的不是业务代码而是“数据库脚本怎么导入”“前端和后端怎么连起来”“登录接口为什么一直报错”这类环境问题。这个标题所指的项目本质是一个典型的前后端分离管理系统后端用 Spring Boot 提供 REST API前端用 Vue 做页面交互数据库脚本负责把初始表结构和测试数据一次性建好。它能解决的是毕业设计里最耗时间的“从零搭框架”问题也适合想快速理解企业级 CRUD 全流程的人照着复现。如果你正愁选题或者已经下载了类似的包但不知道从哪下手这篇笔记就是按一线工程师的习惯把这个方案拆开揉碎讲清楚。2. 项目骨架与选型前后端分离的养老院管理系统是怎么组织代码的2.1 从压缩包目录反推项目结构先看懂文件再动手拿到压缩包先别点“一键启动”我一般会先解压用系统的文件管理器把目录树拉出来。常见的结构是这样的后端文件夹里是 Spring Boot 的 Maven 工程有 pom.xml、src/main/java 下的启动类和 controller/service/mapper 包src/main/resources 下是 application.yml 和 mapper 的 XML 文件前端文件夹是 Vue 工程有 package.json 和 node_modules 可自行生成源码在 src 目录下包含 views、router、api 等模块剩下的就是数据库脚本目录通常是一个 .sql 文件或按功能拆分的多个 .sql加上一个 word 格式的说明文档。提示压缩包解压后如果发现前端没有 node_modules 目录是正常的体积太大一般不会打进去。执行npm install重新安装依赖即可。不要直接拷贝别人的 node_modules本机系统和 Node 版本不一致会埋雷。先看清楚目录再对照说明文档里的“系统架构图”和“功能模块图”把整个项目的地图在脑子里画出来。这一步很关键因为后面无论是改 bug 还是写论文里的“系统设计”章节你都得知道哪段代码干哪件事。我见过不少人浪费一整天在 Spring Boot 启动报错上回头才发现是数据库没建——就是没先看明白目录里那个 database 文件夹的作用。2.2 为什么毕业设计爱用 Spring Boot Vue技术选型的真实理由很多同学纠结要不要用 SSM要不要用 JSP要不要上微服务但养老院管理系统这类单体业务系统Spring Boot Vue 是当前最稳妥的组合不建议换。原因有三条第一Spring Boot 简化了 Spring 的配置内嵌 Tomcat一个java -jar就能跑写论文时讲“约定优于配置”也有的聊第二Vue 做管理后台效率高Element UI 或 Element Plus 的表格、表单、弹窗组件直接套三天能把页面搭完第三这套组合在招聘市场上是 Java 后端岗位的必备技能答辩时老师问“你怎么理解前后端分离”你能答到点子上就已经赢了。版本选择上Spring Boot 2.7.x 是比较稳妥的JDK 1.8 兼容性最好网上遇到的报错基本都是这个版本范围内的。Spring Boot 3.x 也可以做但如果你手头的源码是按 2.x 写的升级可能带来 javax 到 jakarta 的包名迁移范不着毕设阶段给自己加餐。Vue 2 Element UI 和 Vue 3 Element Plus 都行看源码里的依赖写的是什么。工具方面后端用 IDEA 打开 Maven 工程前端用 VS Code 打开 Vue 工程IDEA 里装 Lombok 插件和 Vue.js 插件基本就能跑通。对比项Spring Boot 2.7 Vue 2Spring Boot 3 Vue 3JDK 要求1.8 及以上17 及以上API 包名javax.*jakarta.*组件库Element UIElement Plus学习成本低中本机部署稳需要额外调环境选 2.7 Vue 2理由是网上踩坑案例最多搜一个报错基本能找到对应的解决方案这本身就是一种确定性。3. 数据库脚本落库建库建表脚本的阅读顺序与关键字段设计3.1 把 SQL 脚本跑起来导入顺序比脚本内容更先被忽略数据库脚本是这个项目里最先要处理的实物因为 Spring Boot 启动时如果连不上数据库后端直接起不来。操作顺序是先在 MySQL 里创建一个空库名字照脚本里写的来一般是elderly_care或nursing_home之类然后用 IDEA 的 Database 面板或 Navicat 打开脚本文件选中后执行或者用命令行mysql -u root -p elder_care db.sql导入。执行顺序要遵循脚本内部的注释通常先建表再插入数据如果脚本里已经写了 DROP TABLE IF EXISTS说明允许重复执行不用怕建到一半报错。-- 建库如果脚本里没有这行手动执行 CREATE DATABASE IF NOT EXISTS elderly_care DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; -- 切换数据库 USE elderly_care; -- 核心表老人信息表 CREATE TABLE elder ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT 主键, name VARCHAR(50) NOT NULL COMMENT 老人姓名, gender TINYINT DEFAULT 1 COMMENT 1男 0女, bed_no VARCHAR(20) COMMENT 床位号, health_status VARCHAR(200) COMMENT 健康状态描述, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间 ) ENGINEInnoDB COMMENT老人信息表;导入成功后用SHOW TABLES确认表清单用SELECT COUNT(*) FROM elder确认有数据。这里有个容易被忽略的点脚本文件如果编码不对中文注释和初始数据会乱码。用 IDEA 打开脚本时右下角编码要选 UTF-8导入时连接 URL 里加characterEncodingutf8。这一步不做后面页面里看到的中文全是问号你会以为是前端的问题其实是数据源就脏了。3.2 读懂表结构访问记录、护理记录、费用表为什么是这种建法养老院管理系统的业务表通常围绕“老人”这个核心实体展开常见的有 elder老人信息、employee员工、user系统账号、visit_record家属探访记录、health_record健康档案、fee_record费用流水、room房间房间和床位等。建表脚本里出现频率高的设计手法有这么几种理解它们就能看懂整个库。外键约束在老项目里常见但这个项目里很多表故意不建物理外键而是在 service 层用代码做逻辑关联。原因是毕业设计文档里“数据表设计”部分要体现规范化但物理外键在插入数据时容易报错特别是初始数据里有孤儿记录时。所以你会看到elder_id这样的字段它对应 elder 表的 id但没有 FOREIGN KEY 子句这叫逻辑外键是实际项目里的常态写法。日期字段一般用 DATETIME 而不是 TIMESTAMP且默认值写成CURRENT_TIMESTAMP。这么做的好处是插入时不用显式传值MyBatis-Plus 的自动填充功能也能省掉 create_time 的赋值。费用字段用 DECIMAL(10,2) 而不是 FLOAT因为金额做加法时 FLOAT 有精度丢失问题答辩时你能说出这一点比背概念强得多。-- 费用记录表关注 decimal 和逻辑外键的用法 CREATE TABLE fee_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, elder_id BIGINT NOT NULL COMMENT 逻辑外键 - elder.id, amount DECIMAL(10,2) NOT NULL COMMENT 费用金额, fee_type VARCHAR(20) COMMENT 费用类型护理费/伙食费/医疗费, charge_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 计费时间 ) ENGINEInnoDB COMMENT费用流水表;建表脚本里的字段注释写得越全你的数据字典文档就越省力。写论文时直接把这些 COMMENT 复制进表格“字段名、类型、含义、约束”四列就齐了。所以拿到脚本先别急着执行花十分钟把字段扫一遍等于把业务模型过了一遍后面调接口时你知道fee_type传什么值而不是猜。3.3 初始数据里的三个隐雷密码字段、日期字面量、状态字段的口语化陷阱第一个雷是用户表的密码。初始数据里通常有一行admin用户密码字段存的是明文123456很多同学导入后直接登录成功答辩时老师问“密码安全怎么做的”答不上来。实际上正规做法是 BCrypt 加密登录时用BCryptPasswordEncoder的matches方法比对。如果你的脚本里是明文要么后续改造成加密校验要么在论文里如实写“出于演示目的使用明文”至少不心虚。第二个雷是日期字面量的格式。MySQL 脚本里的日期一般写成2025-03-15 10:30:00但如果你把脚本导到 SQL Server 或者改了 sql_mode可能因为日期格式不严格而失败。严格模式下2025-3-5也是合法的但为了百分百兼容保持两位数的写法更稳。第三个雷是状态字段的可读性。比如 elder 表的 gender 用 1 和 0 表示room 表的 status 用 0 表示空闲、1 表示已入住这些字段的值没有注释或枚举说明你只能看后端代码里写的常量类才能明白。建议先搜代码里的ELDER_GENDER_MALE之类的常量定义或者看 mapper XML 里的WHERE status 1再回填到脚本的注释里。这一步补上你论文的“数据字典”就是全的。4. Spring Boot 后端从启动到接口返回的完整链路4.1 后端启动三板斧Maven 依赖、application.yml、MyBatis-Plus 分页插件拿 IDEA 打开后端工程等待 Maven 自动下载依赖。如果下载慢或者失败检查 Maven 仓库配置的是阿里云镜像。这一步常见报错是Cannot resolve symbol SpringApplication原因是依赖没导进来用 Maven 面板点刷新重新 import 即可。依赖稳定后看 resources 下的 application.yml这是整个后端的心脏。核心配置就这几处数据源spring.datasource.url指向本地 MySQL 的库名账号密码改成你自己的server.port一般是 8080前端代理会指到这里mybatis-plus.global-config.db-config.logic-delete-field如果配了deleted那所有表都得有 deleted 字段否则查询时会莫名其妙过滤掉数据。启动类里通常加了MapperScan注解扫描的是com.example.mapper这类包名。如果你把脚本里的表前缀改了得同步修改实体类上的TableName注解不然启动不报错但查询全表空指针。用一段代码把关键配置串起来看// Spring Boot 启动类 SpringBootApplication MapperScan(com.eldercare.mapper) // 扫描 Mapper 接口 public class ElderCareApplication { public static void main(String[] args) { SpringApplication.run(ElderCareApplication.class, args); } }# application.yml 关键配置 server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/elderly_care?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password mybatis-plus: mapper-locations: classpath*:mapper/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImplmapper-locations指向 XML 文件位置log-impl是调接口时把 SQL 打到控制台。这两个配置直接影响你排错的速度SQL 打出来了你就知道是不是查询条件拼错了XML 扫描不到你自定义的 SQL 会报 Invalid bound statement 错误。分页插件在配置类里注册写成MybatisPlusInterceptor加PaginationInnerInterceptor不注册的话Page对象查出来的数据只有一条记录这是 MyBatis-Plus 的经典翻车现场。4.2 登录认证的实际链路拦截器、JWT 和 ThreadLocal 的配合养老院管理系统的登录模块是整个项目里含金量最高的部分答辩时老师爱问。常见实现是用户提交账号密码到/api/login后端用 MyBatis-Plus 的selectOne查用户表比对密码成功后生成 JWT token 返回前端。前端把 token 存在 localStorage 或 Vuex 里后续所有请求在 axios 拦截器里加上Authorization: Bearer token头。后端用一个拦截器或过滤器拦截/api/**下的非 login 请求校验 token 合法性把解析出来的用户 id 存在 ThreadLocal 里供 Controller 使用。// 登录接口简化版 PostMapping(/login) public Result login(RequestBody LoginDTO dto) { LambdaQueryWrapperUser wrapper new LambdaQueryWrapper(); wrapper.eq(User::getUsername, dto.getUsername()); User user userMapper.selectOne(wrapper); if (user null || !passwordEncoder.matches(dto.getPassword(), user.getPassword())) { return Result.error(用户名或密码错误); } String token JwtUtil.createToken(user.getId(), user.getUsername()); return Result.success(token); }这里的passwordEncoder.matches是核心如果你脚本里是明文密码比对的是dto.getPassword().equals(user.getPassword())代码看起来也对但答辩时会被追问“加密在哪”。建议直接用BCryptPasswordEncoder初始数据可以用BCryptPasswordEncoder().encode(123456)生成的哈希字符串更新到脚本里。拦截器校验 token 的部分重点是放行规则。常见配置是登录接口、验证码接口不需要 token其余接口都要。用HandlerInterceptor的preHandle方法方法里返回 false 则请求被拦截。注意 Swagger 或者 Knife4j 的接口地址也要放行否则本地调接口工具时全报 401。// JWT 拦截器核心代码 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { if (OPTIONS.equals(request.getMethod())) return true; // 跨域预检直接放行 String token request.getHeader(Authorization); if (token ! null token.startsWith(Bearer )) { token token.substring(7); if (JwtUtil.validateToken(token)) { Long userId JwtUtil.getUserId(token); UserContext.set(userId); // ThreadLocal 保存 return true; } } response.setStatus(401); return false; }初学者最容易漏的是跨域预检 OPTIONS 请求被拦截器拦掉导致前端发实际请求前先收到 401页面看起来就是“登录成功了但列表加载不出来”。在处理拦截器时先放行 OPTIONS是顺手但极其关键的一行代码。4.3 分页查询与统一返回体CRUD 的工程化标准管理系统里一半以上的页面是表格页表格页都要后端分页。常见写法是前端传pageNum和pageSize两个参数后端用 MyBatis-Plus 的Page对象接收返回IPage结果集。统一返回体的标准格式是{code: 200, message: success, data: ...}Controller 里输出的是 Result 对象前端 axios 的 response 拦截器判断 code 不等于 200 时弹出错误消息。// 分页查询老人列表 GetMapping(/elder/page) public Result page(RequestParam Integer pageNum, RequestParam Integer pageSize, RequestParam(required false) String name) { PageElder page new Page(pageNum, pageSize); LambdaQueryWrapperElder wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(name), Elder::getName, name); wrapper.orderByDesc(Elder::getCreateTime); IPageElder result elderService.page(page, wrapper); return Result.success(result); }wrapper.like的第一个参数是boolean conditionname 为空就不拼接这个条件这是 MyBatis-Plus 的条件构造器精髓。orderByDesc按创建时间倒序保证新添加的记录排在最前面。这两行代码写好了所有列表接口的搜索和排序逻辑都是同一套模板改字段名即可复用。初次做后端的人容易在 service 层手写循环翻页或者把 list 全部查出来再内存分页数据量一上去性能就崩。5. 前端 Vue 联调与部署绕不开的四个避坑记录5.1 坑一npm install 卡死或报 ERESOLVE 错误现象前端工程目录下执行npm install进度条半天不动或者直接抛出ERESOLVE unable to resolve dependency tree。原因Node 版本和 package.json 里的依赖版本不兼容尤其 Vue 2 项目搭配新版 Node 18/20依赖树解析规则变严了。网络源也常有影响默认 registry 在墙外拉包速度不稳定。解决先确认 Node 版本Vue 2 项目建议 Node 14 或 16执行npm config set registry https://registry.npmmirror.com换源出现 ERESOLVE 时加--legacy-peer-deps跳过依赖树严格校验。npm 里加一个.npmrc文件写入registryhttps://registry.npmmirror.com和legacy-peer-depstrue一劳永逸。5.2 坑二页面能打开但接口 404vue.config.js 的代理没配好现象前端页面正常渲染登录却报POST http://localhost:8080/api/login 404或跨域报错CORS policy: No Access-Control-Allow-Origin。原因前后端分离启动后是两个端口前端 8080Vue 默认端口直接用 axios 发请求到后端 3000 或 8081等于跨域了。要么后端加 CORS 全局配置要么前端做代理。解决推荐前端代理方式在 vue.config.js 里配置 devServer.proxy把/api开头的请求转发到后端真实地址。前端的 axios baseURL 写成/api代理规则如下// vue.config.js module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, // 后端地址 changeOrigin: true, pathRewrite: { ^/api: } } } } };pathRewrite把/api前缀去掉再转发后端接口的真实路径是/login而不是/api/login。如果后端接口本身就带/api就不用重写。这一行配置错了你排查两三个小时都不一定找得到问题在哪这是前端联调最常见的坑。5.3 坑三登录成功后请求仍 401路由守卫和响应拦截器互相打架现象登录成功token 也存到了 localStorage刷新页面后跳转回登录页或者请求列表接口时后端返回 401。原因一种原因是刷新时 Vuex 状态丢了当前用户信息从 store 里读不到了路由守卫判断“未登录”强制去登录页。另一种是 axios 请求拦截器没在每次请求时把 token 从 localStorage 重新取出来而是用的 store 里的 state刷新后 store 还没回填就发请求了。解决路由守卫里判断 token 要用localStorage.getItem(token)不要从 Vuex 里读axios 请求拦截器也从 localStorage 取值再把 token 塞进 header。userInfo 可以在刷新后重新调接口/api/user/info获取不要指望页面刷新后 store 还在。5.4 坑四启动后大量 XSS 报错或上传 PDF 被拦截现象前端编译报错xss相关警告或后端配置了全局过滤器处理上传 PDF 时报错页面上传功能不可用。原因Vue 项目一般自带 XSS 过滤机制如果代码里用了v-html渲染后端返回的富文本内容会被识别为风险代码后端如果加了全局 XSS 过滤器上传 PDF 二进制数据时过滤器也会把请求体读一遍导致文件流被消费后续解析文件失败。这是标题相关热搜里“springboot 项目全局过滤器处理上传 pdf 文件时 xss 攻击”的真实场景。解决前端尽量避免v-html如果必须用先做白名单过滤或把富文本字段换成纯文本存储。后端处理方式是配置过滤器时设置excludeUrls把/api/file/upload、/api/pdf/upload这类接口排除在 XSS 过滤之外或者只过滤 JSON 格式的请求体不处理multipart/form-data类型。否则你会看到上传接口第一次报流已被关闭第二次直接 400极难定位。6. 前后端联调提速用“日志 Network”组合定位接口问题的三个动作联调阶段最怕的是“前端报错、后端没反应、数据库没数据”三方各说各话。我手里有一套组合打法先把问题快速收敛到某一层再精准修理。这个打法不玄学人人可以复现但大多数人没按顺序做。第一个动作是打开后端控制台确认 SQL 日志有没有打出来。application.yml 里配了StdOutImpl后每次请求都会打印完整 SQL 和参数。如果接口被调用了但 SQL 没出现说明拦截器就把请求拦了或者 Controller 根本没进到 service 层如果 SQL 出现但结果集是空说明查询条件有问题比如elder表里没有name 张三的记录那就回 MySQL 用同一条 SQL 手动再查一遍。这一步能把问题从“前端报错”快速拆成“后端逻辑错误”或“数据问题”。第二个动作是看前端 Network 面板的请求和响应原文。按 F12 打开开发者工具切到 Network 标签页重新发一次请求。先看请求头里的 Authorization 有没有带 token再看响应体的 JSON 里的 code 和 message。如果响应是401说明 token 过期或拦截器没放行如果响应是500后端控制台一定有堆栈异常如果响应是200但 table 没数据那是前端渲染逻辑把data.records当成数组了多半是 IPage 返回结构里还有 total、size 字段取错了层级。第三个动作是改了前端代码不生效时清浏览器缓存和强制刷新。Vue 项目 webpack 默认有 Hot Module Replacement改了代码一般会热更新但偶尔编译出错后页面停在旧状态。强制刷新Ctrl F5能解决一半的“我明明改了什么没生效”问题。如果还是旧版看看是不是开了 service worker 或 PWA在 devtools 的 Application 面板清掉缓存。这三个动作做完90% 的联调问题都有明确归属了。不影响你进度也不背锅纯靠流程压缩排查时间这是我在多个项目里养成的最小但有效的联调习惯希望帮到你。本文还有配套的精品资源点击获取 Spring Boot+Vue养老院管理系统毕设：前后端分离实战解析
简介一款采用前后端分离架构的养老院管理系统毕业设计项目基于Spring Boot构建后端接口、Vue构建前端页面适合计算机相关专业学生、养老机构信息化人员以及需要快速搭建管理后台的工程师。系统围绕养老院日常运营设计功能覆盖用户管理工作人员/家属/老人多角色注册登录与信息维护、老人档案健康状况、入住情况、紧急联系人及数据导入导出、房间管理空余床位实时查看与分配调度、日常护理定期预约、特殊需求处理与健康记录、膳食管理菜单规划、食材采购与配餐、活动娱乐文化活动、健身课程与参与记录、通知消息药品提醒、活动通知等实时推送、财务管理费用收取与账单查询、安全监控区域进出与访客权限和数据分析报表健康分析、满意度调查等核心模块形成完整业务闭环。资源压缩包约19.85MB内含前后端源码、数据库脚本与说明文档导入数据库后即可运行调试项目结构清晰、注释规范便于二次开发与功能扩展。目前已有92人学习适合作为毕业设计参考、课程项目实践或中小型管理系统快速开发的基础模板。1. 养老院管理系统用 Spring Boot Vue 做毕业设计这条路线到底值不值得走拿到“基于 springbootvue 的养老院管理系统前后端源码数据库脚本说明文档毕业设计.zip”这个压缩包很多人第一反应是解压、启动、截图、写论文但实际动手后才发现真正拦路的不是业务代码而是“数据库脚本怎么导入”“前端和后端怎么连起来”“登录接口为什么一直报错”这类环境问题。这个标题所指的项目本质是一个典型的前后端分离管理系统后端用 Spring Boot 提供 REST API前端用 Vue 做页面交互数据库脚本负责把初始表结构和测试数据一次性建好。它能解决的是毕业设计里最耗时间的“从零搭框架”问题也适合想快速理解企业级 CRUD 全流程的人照着复现。如果你正愁选题或者已经下载了类似的包但不知道从哪下手这篇笔记就是按一线工程师的习惯把这个方案拆开揉碎讲清楚。2. 项目骨架与选型前后端分离的养老院管理系统是怎么组织代码的2.1 从压缩包目录反推项目结构先看懂文件再动手拿到压缩包先别点“一键启动”我一般会先解压用系统的文件管理器把目录树拉出来。常见的结构是这样的后端文件夹里是 Spring Boot 的 Maven 工程有 pom.xml、src/main/java 下的启动类和 controller/service/mapper 包src/main/resources 下是 application.yml 和 mapper 的 XML 文件前端文件夹是 Vue 工程有 package.json 和 node_modules 可自行生成源码在 src 目录下包含 views、router、api 等模块剩下的就是数据库脚本目录通常是一个 .sql 文件或按功能拆分的多个 .sql加上一个 word 格式的说明文档。提示压缩包解压后如果发现前端没有 node_modules 目录是正常的体积太大一般不会打进去。执行npm install重新安装依赖即可。不要直接拷贝别人的 node_modules本机系统和 Node 版本不一致会埋雷。先看清楚目录再对照说明文档里的“系统架构图”和“功能模块图”把整个项目的地图在脑子里画出来。这一步很关键因为后面无论是改 bug 还是写论文里的“系统设计”章节你都得知道哪段代码干哪件事。我见过不少人浪费一整天在 Spring Boot 启动报错上回头才发现是数据库没建——就是没先看明白目录里那个 database 文件夹的作用。2.2 为什么毕业设计爱用 Spring Boot Vue技术选型的真实理由很多同学纠结要不要用 SSM要不要用 JSP要不要上微服务但养老院管理系统这类单体业务系统Spring Boot Vue 是当前最稳妥的组合不建议换。原因有三条第一Spring Boot 简化了 Spring 的配置内嵌 Tomcat一个java -jar就能跑写论文时讲“约定优于配置”也有的聊第二Vue 做管理后台效率高Element UI 或 Element Plus 的表格、表单、弹窗组件直接套三天能把页面搭完第三这套组合在招聘市场上是 Java 后端岗位的必备技能答辩时老师问“你怎么理解前后端分离”你能答到点子上就已经赢了。版本选择上Spring Boot 2.7.x 是比较稳妥的JDK 1.8 兼容性最好网上遇到的报错基本都是这个版本范围内的。Spring Boot 3.x 也可以做但如果你手头的源码是按 2.x 写的升级可能带来 javax 到 jakarta 的包名迁移范不着毕设阶段给自己加餐。Vue 2 Element UI 和 Vue 3 Element Plus 都行看源码里的依赖写的是什么。工具方面后端用 IDEA 打开 Maven 工程前端用 VS Code 打开 Vue 工程IDEA 里装 Lombok 插件和 Vue.js 插件基本就能跑通。对比项Spring Boot 2.7 Vue 2Spring Boot 3 Vue 3JDK 要求1.8 及以上17 及以上API 包名javax.*jakarta.*组件库Element UIElement Plus学习成本低中本机部署稳需要额外调环境选 2.7 Vue 2理由是网上踩坑案例最多搜一个报错基本能找到对应的解决方案这本身就是一种确定性。3. 数据库脚本落库建库建表脚本的阅读顺序与关键字段设计3.1 把 SQL 脚本跑起来导入顺序比脚本内容更先被忽略数据库脚本是这个项目里最先要处理的实物因为 Spring Boot 启动时如果连不上数据库后端直接起不来。操作顺序是先在 MySQL 里创建一个空库名字照脚本里写的来一般是elderly_care或nursing_home之类然后用 IDEA 的 Database 面板或 Navicat 打开脚本文件选中后执行或者用命令行mysql -u root -p elder_care db.sql导入。执行顺序要遵循脚本内部的注释通常先建表再插入数据如果脚本里已经写了 DROP TABLE IF EXISTS说明允许重复执行不用怕建到一半报错。-- 建库如果脚本里没有这行手动执行 CREATE DATABASE IF NOT EXISTS elderly_care DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; -- 切换数据库 USE elderly_care; -- 核心表老人信息表 CREATE TABLE elder ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT 主键, name VARCHAR(50) NOT NULL COMMENT 老人姓名, gender TINYINT DEFAULT 1 COMMENT 1男 0女, bed_no VARCHAR(20) COMMENT 床位号, health_status VARCHAR(200) COMMENT 健康状态描述, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间 ) ENGINEInnoDB COMMENT老人信息表;导入成功后用SHOW TABLES确认表清单用SELECT COUNT(*) FROM elder确认有数据。这里有个容易被忽略的点脚本文件如果编码不对中文注释和初始数据会乱码。用 IDEA 打开脚本时右下角编码要选 UTF-8导入时连接 URL 里加characterEncodingutf8。这一步不做后面页面里看到的中文全是问号你会以为是前端的问题其实是数据源就脏了。3.2 读懂表结构访问记录、护理记录、费用表为什么是这种建法养老院管理系统的业务表通常围绕“老人”这个核心实体展开常见的有 elder老人信息、employee员工、user系统账号、visit_record家属探访记录、health_record健康档案、fee_record费用流水、room房间房间和床位等。建表脚本里出现频率高的设计手法有这么几种理解它们就能看懂整个库。外键约束在老项目里常见但这个项目里很多表故意不建物理外键而是在 service 层用代码做逻辑关联。原因是毕业设计文档里“数据表设计”部分要体现规范化但物理外键在插入数据时容易报错特别是初始数据里有孤儿记录时。所以你会看到elder_id这样的字段它对应 elder 表的 id但没有 FOREIGN KEY 子句这叫逻辑外键是实际项目里的常态写法。日期字段一般用 DATETIME 而不是 TIMESTAMP且默认值写成CURRENT_TIMESTAMP。这么做的好处是插入时不用显式传值MyBatis-Plus 的自动填充功能也能省掉 create_time 的赋值。费用字段用 DECIMAL(10,2) 而不是 FLOAT因为金额做加法时 FLOAT 有精度丢失问题答辩时你能说出这一点比背概念强得多。-- 费用记录表关注 decimal 和逻辑外键的用法 CREATE TABLE fee_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, elder_id BIGINT NOT NULL COMMENT 逻辑外键 - elder.id, amount DECIMAL(10,2) NOT NULL COMMENT 费用金额, fee_type VARCHAR(20) COMMENT 费用类型护理费/伙食费/医疗费, charge_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 计费时间 ) ENGINEInnoDB COMMENT费用流水表;建表脚本里的字段注释写得越全你的数据字典文档就越省力。写论文时直接把这些 COMMENT 复制进表格“字段名、类型、含义、约束”四列就齐了。所以拿到脚本先别急着执行花十分钟把字段扫一遍等于把业务模型过了一遍后面调接口时你知道fee_type传什么值而不是猜。3.3 初始数据里的三个隐雷密码字段、日期字面量、状态字段的口语化陷阱第一个雷是用户表的密码。初始数据里通常有一行admin用户密码字段存的是明文123456很多同学导入后直接登录成功答辩时老师问“密码安全怎么做的”答不上来。实际上正规做法是 BCrypt 加密登录时用BCryptPasswordEncoder的matches方法比对。如果你的脚本里是明文要么后续改造成加密校验要么在论文里如实写“出于演示目的使用明文”至少不心虚。第二个雷是日期字面量的格式。MySQL 脚本里的日期一般写成2025-03-15 10:30:00但如果你把脚本导到 SQL Server 或者改了 sql_mode可能因为日期格式不严格而失败。严格模式下2025-3-5也是合法的但为了百分百兼容保持两位数的写法更稳。第三个雷是状态字段的可读性。比如 elder 表的 gender 用 1 和 0 表示room 表的 status 用 0 表示空闲、1 表示已入住这些字段的值没有注释或枚举说明你只能看后端代码里写的常量类才能明白。建议先搜代码里的ELDER_GENDER_MALE之类的常量定义或者看 mapper XML 里的WHERE status 1再回填到脚本的注释里。这一步补上你论文的“数据字典”就是全的。4. Spring Boot 后端从启动到接口返回的完整链路4.1 后端启动三板斧Maven 依赖、application.yml、MyBatis-Plus 分页插件拿 IDEA 打开后端工程等待 Maven 自动下载依赖。如果下载慢或者失败检查 Maven 仓库配置的是阿里云镜像。这一步常见报错是Cannot resolve symbol SpringApplication原因是依赖没导进来用 Maven 面板点刷新重新 import 即可。依赖稳定后看 resources 下的 application.yml这是整个后端的心脏。核心配置就这几处数据源spring.datasource.url指向本地 MySQL 的库名账号密码改成你自己的server.port一般是 8080前端代理会指到这里mybatis-plus.global-config.db-config.logic-delete-field如果配了deleted那所有表都得有 deleted 字段否则查询时会莫名其妙过滤掉数据。启动类里通常加了MapperScan注解扫描的是com.example.mapper这类包名。如果你把脚本里的表前缀改了得同步修改实体类上的TableName注解不然启动不报错但查询全表空指针。用一段代码把关键配置串起来看// Spring Boot 启动类 SpringBootApplication MapperScan(com.eldercare.mapper) // 扫描 Mapper 接口 public class ElderCareApplication { public static void main(String[] args) { SpringApplication.run(ElderCareApplication.class, args); } }# application.yml 关键配置 server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/elderly_care?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password mybatis-plus: mapper-locations: classpath*:mapper/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImplmapper-locations指向 XML 文件位置log-impl是调接口时把 SQL 打到控制台。这两个配置直接影响你排错的速度SQL 打出来了你就知道是不是查询条件拼错了XML 扫描不到你自定义的 SQL 会报 Invalid bound statement 错误。分页插件在配置类里注册写成MybatisPlusInterceptor加PaginationInnerInterceptor不注册的话Page对象查出来的数据只有一条记录这是 MyBatis-Plus 的经典翻车现场。4.2 登录认证的实际链路拦截器、JWT 和 ThreadLocal 的配合养老院管理系统的登录模块是整个项目里含金量最高的部分答辩时老师爱问。常见实现是用户提交账号密码到/api/login后端用 MyBatis-Plus 的selectOne查用户表比对密码成功后生成 JWT token 返回前端。前端把 token 存在 localStorage 或 Vuex 里后续所有请求在 axios 拦截器里加上Authorization: Bearer token头。后端用一个拦截器或过滤器拦截/api/**下的非 login 请求校验 token 合法性把解析出来的用户 id 存在 ThreadLocal 里供 Controller 使用。// 登录接口简化版 PostMapping(/login) public Result login(RequestBody LoginDTO dto) { LambdaQueryWrapperUser wrapper new LambdaQueryWrapper(); wrapper.eq(User::getUsername, dto.getUsername()); User user userMapper.selectOne(wrapper); if (user null || !passwordEncoder.matches(dto.getPassword(), user.getPassword())) { return Result.error(用户名或密码错误); } String token JwtUtil.createToken(user.getId(), user.getUsername()); return Result.success(token); }这里的passwordEncoder.matches是核心如果你脚本里是明文密码比对的是dto.getPassword().equals(user.getPassword())代码看起来也对但答辩时会被追问“加密在哪”。建议直接用BCryptPasswordEncoder初始数据可以用BCryptPasswordEncoder().encode(123456)生成的哈希字符串更新到脚本里。拦截器校验 token 的部分重点是放行规则。常见配置是登录接口、验证码接口不需要 token其余接口都要。用HandlerInterceptor的preHandle方法方法里返回 false 则请求被拦截。注意 Swagger 或者 Knife4j 的接口地址也要放行否则本地调接口工具时全报 401。// JWT 拦截器核心代码 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { if (OPTIONS.equals(request.getMethod())) return true; // 跨域预检直接放行 String token request.getHeader(Authorization); if (token ! null token.startsWith(Bearer )) { token token.substring(7); if (JwtUtil.validateToken(token)) { Long userId JwtUtil.getUserId(token); UserContext.set(userId); // ThreadLocal 保存 return true; } } response.setStatus(401); return false; }初学者最容易漏的是跨域预检 OPTIONS 请求被拦截器拦掉导致前端发实际请求前先收到 401页面看起来就是“登录成功了但列表加载不出来”。在处理拦截器时先放行 OPTIONS是顺手但极其关键的一行代码。4.3 分页查询与统一返回体CRUD 的工程化标准管理系统里一半以上的页面是表格页表格页都要后端分页。常见写法是前端传pageNum和pageSize两个参数后端用 MyBatis-Plus 的Page对象接收返回IPage结果集。统一返回体的标准格式是{code: 200, message: success, data: ...}Controller 里输出的是 Result 对象前端 axios 的 response 拦截器判断 code 不等于 200 时弹出错误消息。// 分页查询老人列表 GetMapping(/elder/page) public Result page(RequestParam Integer pageNum, RequestParam Integer pageSize, RequestParam(required false) String name) { PageElder page new Page(pageNum, pageSize); LambdaQueryWrapperElder wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(name), Elder::getName, name); wrapper.orderByDesc(Elder::getCreateTime); IPageElder result elderService.page(page, wrapper); return Result.success(result); }wrapper.like的第一个参数是boolean conditionname 为空就不拼接这个条件这是 MyBatis-Plus 的条件构造器精髓。orderByDesc按创建时间倒序保证新添加的记录排在最前面。这两行代码写好了所有列表接口的搜索和排序逻辑都是同一套模板改字段名即可复用。初次做后端的人容易在 service 层手写循环翻页或者把 list 全部查出来再内存分页数据量一上去性能就崩。5. 前端 Vue 联调与部署绕不开的四个避坑记录5.1 坑一npm install 卡死或报 ERESOLVE 错误现象前端工程目录下执行npm install进度条半天不动或者直接抛出ERESOLVE unable to resolve dependency tree。原因Node 版本和 package.json 里的依赖版本不兼容尤其 Vue 2 项目搭配新版 Node 18/20依赖树解析规则变严了。网络源也常有影响默认 registry 在墙外拉包速度不稳定。解决先确认 Node 版本Vue 2 项目建议 Node 14 或 16执行npm config set registry https://registry.npmmirror.com换源出现 ERESOLVE 时加--legacy-peer-deps跳过依赖树严格校验。npm 里加一个.npmrc文件写入registryhttps://registry.npmmirror.com和legacy-peer-depstrue一劳永逸。5.2 坑二页面能打开但接口 404vue.config.js 的代理没配好现象前端页面正常渲染登录却报POST http://localhost:8080/api/login 404或跨域报错CORS policy: No Access-Control-Allow-Origin。原因前后端分离启动后是两个端口前端 8080Vue 默认端口直接用 axios 发请求到后端 3000 或 8081等于跨域了。要么后端加 CORS 全局配置要么前端做代理。解决推荐前端代理方式在 vue.config.js 里配置 devServer.proxy把/api开头的请求转发到后端真实地址。前端的 axios baseURL 写成/api代理规则如下// vue.config.js module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, // 后端地址 changeOrigin: true, pathRewrite: { ^/api: } } } } };pathRewrite把/api前缀去掉再转发后端接口的真实路径是/login而不是/api/login。如果后端接口本身就带/api就不用重写。这一行配置错了你排查两三个小时都不一定找得到问题在哪这是前端联调最常见的坑。5.3 坑三登录成功后请求仍 401路由守卫和响应拦截器互相打架现象登录成功token 也存到了 localStorage刷新页面后跳转回登录页或者请求列表接口时后端返回 401。原因一种原因是刷新时 Vuex 状态丢了当前用户信息从 store 里读不到了路由守卫判断“未登录”强制去登录页。另一种是 axios 请求拦截器没在每次请求时把 token 从 localStorage 重新取出来而是用的 store 里的 state刷新后 store 还没回填就发请求了。解决路由守卫里判断 token 要用localStorage.getItem(token)不要从 Vuex 里读axios 请求拦截器也从 localStorage 取值再把 token 塞进 header。userInfo 可以在刷新后重新调接口/api/user/info获取不要指望页面刷新后 store 还在。5.4 坑四启动后大量 XSS 报错或上传 PDF 被拦截现象前端编译报错xss相关警告或后端配置了全局过滤器处理上传 PDF 时报错页面上传功能不可用。原因Vue 项目一般自带 XSS 过滤机制如果代码里用了v-html渲染后端返回的富文本内容会被识别为风险代码后端如果加了全局 XSS 过滤器上传 PDF 二进制数据时过滤器也会把请求体读一遍导致文件流被消费后续解析文件失败。这是标题相关热搜里“springboot 项目全局过滤器处理上传 pdf 文件时 xss 攻击”的真实场景。解决前端尽量避免v-html如果必须用先做白名单过滤或把富文本字段换成纯文本存储。后端处理方式是配置过滤器时设置excludeUrls把/api/file/upload、/api/pdf/upload这类接口排除在 XSS 过滤之外或者只过滤 JSON 格式的请求体不处理multipart/form-data类型。否则你会看到上传接口第一次报流已被关闭第二次直接 400极难定位。6. 前后端联调提速用“日志 Network”组合定位接口问题的三个动作联调阶段最怕的是“前端报错、后端没反应、数据库没数据”三方各说各话。我手里有一套组合打法先把问题快速收敛到某一层再精准修理。这个打法不玄学人人可以复现但大多数人没按顺序做。第一个动作是打开后端控制台确认 SQL 日志有没有打出来。application.yml 里配了StdOutImpl后每次请求都会打印完整 SQL 和参数。如果接口被调用了但 SQL 没出现说明拦截器就把请求拦了或者 Controller 根本没进到 service 层如果 SQL 出现但结果集是空说明查询条件有问题比如elder表里没有name 张三的记录那就回 MySQL 用同一条 SQL 手动再查一遍。这一步能把问题从“前端报错”快速拆成“后端逻辑错误”或“数据问题”。第二个动作是看前端 Network 面板的请求和响应原文。按 F12 打开开发者工具切到 Network 标签页重新发一次请求。先看请求头里的 Authorization 有没有带 token再看响应体的 JSON 里的 code 和 message。如果响应是401说明 token 过期或拦截器没放行如果响应是500后端控制台一定有堆栈异常如果响应是200但 table 没数据那是前端渲染逻辑把data.records当成数组了多半是 IPage 返回结构里还有 total、size 字段取错了层级。第三个动作是改了前端代码不生效时清浏览器缓存和强制刷新。Vue 项目 webpack 默认有 Hot Module Replacement改了代码一般会热更新但偶尔编译出错后页面停在旧状态。强制刷新Ctrl F5能解决一半的“我明明改了什么没生效”问题。如果还是旧版看看是不是开了 service worker 或 PWA在 devtools 的 Application 面板清掉缓存。这三个动作做完90% 的联调问题都有明确归属了。不影响你进度也不背锅纯靠流程压缩排查时间这是我在多个项目里养成的最小但有效的联调习惯希望帮到你。本文还有配套的精品资源点击获取