简介这套基于Spring Boot与Vue框架的智慧社区居家养老健康管理系统是面向计算机相关专业毕业设计的完整源码与论文资料。系统围绕老人、家属、医生和社区工作人员四类用户覆盖老人档案、健康管理、在线问诊、服务预约、公告发布、轮播图配置等核心模块解决居家养老场景下信息分散、服务对接不便的问题前端采用Vue后端基于Spring Boot数据存储使用MySQL。压缩包内共878个文件包括128个Java后端源码、69个Vue前端页面、56个HTML页面及配套JS/CSS样式、1个SQL数据库脚本同时提供安装部署的bat命令文件和论文doc/docx文档整体大小39.68MB。目前已有140人浏览学习适合用来快速搭建毕设框架、理解前后端交互逻辑或在此基础上扩展功能模块。1. 智慧社区居家养老健康管理系统毕业设计从选题到落地的完整路径每年做毕业设计的人都会在选题阶段反复拉扯又要工作量能撑起论文篇幅又要自己能写完答辩时还得讲得明白。基于 Springboot 的智慧社区居家养老健康管理系统恰恰是这几个条件都能满足的成熟方向。它围绕社区养老的真实场景把老人档案、健康监测、异常预警、服务工单、家属通知这几条核心链路串起来技术栈就是 Springboot Vue MySQL 这一套最主流的组合。下面我按自己实际做过这类项目的思路从架构设计讲到前后端联调再把最容易翻车的几个坑一次说清楚适合准备拿这个题目做毕业设计的人照着复现。2. 技术选型与系统架构为什么SpringbootVue最适合这类毕业设计2.1 后端选型Springboot版本选择的取舍常见做法是选 Springboot 2.7.x而不是 3.x。原因很现实3.x 强制要求 JDK 17很多学校的机器还停在 JDK 8答辩现场环境不匹配直接启动失败。另外 3.x 把 javax 包改名成 jakarta网上大量教程和代码片段还是 javax 写法你照着抄大概率报“包不存在”。我一般把 parent 版本固定在 2.7.18这个版本同时兼容 JDK 8 和 JDK 11生态最稳。parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version relativePath/ /parent把 version 写死有两个作用一是保证 Maven 依赖解析不会因为网络波动拉到不兼容的快照版本二是让子模块的依赖版本统一由 parent 管理不用每个依赖都手写版本号。如果你后面想引入 Redis 或 RabbitMQ2.7.18 都有对应的 starter不会出现版本黑洞——这种“版本太高导致配置方式全变”的坑在 springboot 项目里实在太常见了。2.2 前端选型Vue 2还是Vue 3标题里只写了 Vue 框架没限定版本。我的建议是如果刚学 Vue 没多久选 Vue 2 Element UI资料多、报错好搜、组件用法稳定如果已经熟悉 Composition API选 Vue 3 Element Plus答辩时能讲清楚响应式原理的升级这是加分项。但有一条红线不能碰——Vue 3 不能配 Element UIVue 2 也不能配 Element Plus组件库和框架版本不匹配时页面渲染会出各种莫名其妙的样式错乱。管理后台这类页面用 Element 系组件库是最优解表格、表单、分页、弹窗都是现成的省下的工作量比你想象的多。尤其对于毕业生来说时间应该花在业务逻辑上而不是调试一个按钮的居中样式。2.3 系统功能模块划分老人档案、健康监测、工单流转、亲属通知做这类系统的第一步不是写代码而是把功能模块拆清楚。我习惯拆成四个核心模块老人档案管理基本信息、居住信息、紧急联系人、既往病史健康监测管理血压、血糖、心率、体温的录入与趋势展示异常值预警服务工单管理社区工作人员上门服务的派单、接单、完成闭环亲属通知管理老人健康数据异常时通过站内信或短信通知家属四个模块拆完后前端菜单、后端接口、数据库表就能一一对应。论文里画系统功能结构图时这个层级刚好是两层结构看起来饱满又不散。数据库表我一般建这些sys_user登录用户、elder_info老人档案、health_record健康记录、service_order服务工单、notice_log通知记录、sys_role角色。表之间用逻辑关联不建议加物理外键——删除操作会被约束缠住代码里控制逻辑关系就好。3. 后端动手实现Springboot核心代码与关键配置3.1 项目初始化与分层结构用 IDEA 新建 Springboot 项目时勾选 Web、MyBatis、MySQL Driver 这几个起步依赖就够了。如果是在线生成项目记得把 Group 和 Artifact 改成自己的命名别留 com.example 的默认值——答辩时老师看到这个包名印象分先扣一截。后端我习惯做四层结构controller、service、mapper、entity再额外建 config、common、dto、vo 几个包。entity 对应数据库表字段dto 接收前端参数vo 返回给前端展示。不要嫌类多毕业设计就需要这种看得见的层级论文的软件设计章节才好写。RestController RequestMapping(/api/health) public class HealthRecordController { Autowired private HealthRecordService healthRecordService; PostMapping(/record) public Result saveRecord(RequestBody HealthRecordDTO dto) { healthRecordService.saveRecord(dto); return Result.success(); } }这是健康数据上报的最外层入口。RestController 让接口直接返回 JSONRequestBody 把前端传来的 JSON 自动绑定到 DTO 对象上。注意这里用的是 dto 而不是 entity因为前端可能额外传了上传人的登录名或备注字段这些不需要落库用 DTO 做参数隔离更干净。Result 是统一返回体包含 code、msg、data 三个字段前端拦截器靠 code 值判断请求是否成功。3.2 健康数据上报接口从Controller到Mapper的完整链路一个健康记录接口要经过四个环节Controller 接收参数、Service 做业务校验、Mapper 做数据落库、VO 返回结果。Service 层的校验逻辑至少要覆盖两点老人 ID 是否存在、健康数值是否在合理范围内。比如血压高出 300/200 这种明显是误录入的数据应该直接拒绝而不是落库。Service public class HealthRecordServiceImpl implements HealthRecordService { Override public void saveRecord(HealthRecordDTO dto) { // 校验老人是否存在 ElderInfo elder elderInfoMapper.selectById(dto.getElderId()); if (elder null) { throw new ServiceException(老人档案不存在); } // 校验血压数值范围 if (dto.getSystolicPressure() 300 || dto.getDiastolicPressure() 200) { throw new ServiceException(血压数值超出合理范围); } HealthRecord record new HealthRecord(); BeanUtils.copyProperties(dto, record); record.setCreateTime(LocalDateTime.now()); healthRecordMapper.insert(record); // 异步触发异常预警 healthWarningService.checkAndWarn(record); } }BeanUtils.copyProperties 是 Spring 自带的属性拷贝工具字段名一致的属性会自动复制能省掉十几行手写 getter/setter 的枯燥代码。注意 checkAndWarn 放到 insert 之后调用而且应该在 Service 内部做异步处理比如用 Async 注解标注方法。这样前端感知到的就是“保存成功立即返回”不会被预警逻辑拖慢。MyBatis 层我一般直接用 MyBatis-Plus单表操作完全不用写 XMLselectById、insert、selectPage 都是现成方法。如果论文里需要体现 SQL 能力再挑两三个统计查询改成自定义 SQL。比如按月统计健康数据平均值这个结果直接供给前端折线图select idselectMonthlyAvg resultTypemap SELECT DATE_FORMAT(record_time, %Y-%m) AS month, AVG(systolic_pressure) AS avg_systolic, AVG(diastolic_pressure) AS avg_diastolic FROM health_record WHERE elder_id #{elderId} AND record_time #{startTime} GROUP BY DATE_FORMAT(record_time, %Y-%m) ORDER BY month /select这段 SQL 的逻辑是按月份分组计算收缩压和舒张压的平均值折线图的每个数据点就来自这一行。DATE_FORMAT 是 MySQL 的日期格式化函数这里有个隐藏坑如果表里 record_time 是 datetime 类型前端传时间范围时一定要把时区对齐否则统计结果会偏移 8 小时这是做健康趋势图最容易踩坑的地方后面避坑章节细说。3.3 基于定时任务的异常预警实现健康数据异常不能依赖用户刷新页面才被看到系统应该主动扫描并通知。Springboot 自带的 Scheduled 注解就能做定时任务不需要额外引入 Quartz 这种重量级框架。Component public class HealthWarnScheduler { Scheduled(cron 0 0/30 * * * ?) public void scanAbnormalRecords() { ListHealthRecord abnormalList healthRecordMapper.selectRecentAbnormal(30); for (HealthRecord record : abnormalList) { if (!noticeLogMapper.existsByRecordId(record.getId())) { notifyFamily(record); } } } }cron 表达式0 0/30 * * * ?表示每 30 分钟执行一次扫描。注意最后一位是?而不是*Spring 的 cron 语法里星期位用?表示不指定写成*在某些版本会直接启动报错。扫描只查最近 30 分钟的数据超过这个窗口的异常值已经失去预警意义。这个定时任务有个设计细节它必须是无状态的。应用重启后不能把重启前已经通知过的记录再通知一遍。我在代码里用 notice_log 表做幂等判断——记录 ID 和通知类型做联合唯一索引重复插入直接失败。这样即使定时任务重复执行也不会给家属重复发通知血泪经验告诉你这一点不做的话演示现场很容易出现“一条异常弹出五条消息”的尴尬。3.4 JWT登录鉴权与角色权限控制智慧社区养老系统里至少有管理员、护理员、家属三种角色后端接口不能裸奔。权限框架最常见的选择是 Spring Security但它对毕业生来说学习曲线太陡了——过滤器链、UserDetailsService、SecurityContext 这些概念能把人绕晕好几周。我推荐用 Sa-TokenAPI 简单直接毕业设计阶段完全够用。Configuration public class SaTokenConfigure implements WebMvcConfigurer { Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new SaInterceptor(handle - { StpUtil.checkLogin(); })).addPathPatterns(/**) .excludePathPatterns(/api/auth/login, /api/auth/register); } }这段配置的含义是除了登录和注册接口其他所有接口都要经过登录校验。StpUtil.checkLogin() 会从请求头里读取 token 并校验有效期校验失败直接抛出未登录异常前端响应拦截器统一处理后跳转登录页。如果需要更细的权限控制可以在方法上加 SaCheckRole(admin) 注解比如只有管理员能删除老人档案护理员只能录入和查看。权限这里最容易翻车的不是后端拦截逻辑而是前端路由没有做同步控制。很多同学的代码只是后端加了权限前端菜单依然所有人可见用户点进去才报 401。正确做法是登录时后端返回角色标识前端根据角色动态渲染菜单和数据按钮这个在下一章的 Vue 部分会详细展开。4. 前端落地Vue页面与后端联调的关键细节4.1 Vue项目创建与路由配置前端用 Vue CLI 还是 Vite 创建都行我推荐 Vite启动速度快、配置更直观。项目创建完后的第一件事是配置 devServer 代理把 /api 开头的请求转发到后端 8080 端口这样在开发阶段能彻底绕开跨域问题不用在后端写 CrossOrigin。// vite.config.js export default defineConfig({ plugins: [vue()], server: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })changeOrigin 必须设为 true这样后端拿到的请求头 Host 就是 localhost:8080不会因为 Host 不匹配被后端虚拟主机配置拦截。如果代理配置不对现象就是前端请求能发出去、后端日志也能看到请求但响应一直报跨域错误调试起来特别恶心。Vue Router 的路由配置里重点是给需要登录的页面加 meta 标记然后通过全局前置守卫统一校验router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } })这段守卫逻辑很直白目标页面要求登录而本地又没有 token就踢回登录页。token 存 localStorage 有 XSS 风险这点在答辩时主动提出来反而是加分项说明你考虑过安全问题。更稳的做法是存到 sessionStorage但刷新页面会丢登录态体验差一些。4.2 axios封装与接口对接axios 一定要统一封装。不要在页面组件里到处 new axios 实例那样接口地址和错误处理会散落得到处都是后端接口路径一变前端翻车的地方恨不得有十处。封装要做三件事统一 baseURL、请求头注入 token、响应拦截器统一处理错误码。// request.js import axios from axios import { ElMessage } from element-plus import router from ../router const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.msg || 请求失败) return Promise.reject(new Error(res.msg)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } ElMessage.error(网络异常请稍后重试) return Promise.reject(error) } ) export default request这段封装里最关键的是响应拦截器对 401 的处理后端返回未登录时前端立刻清理本地 token 并跳转登录页。否则用户停留在页面里所有操作都报错但自己不知道已经掉登录了这种“黑匣子”状态特别容易出现在答辩演示现场你不想当着老师的面翻这个车。timeout 设置成 10 秒是因为健康数据上报偶尔会有大字段默认的 5 秒超时在弱网环境容易误判失败。4.3 健康大屏可视化ECharts在Vue中的集成健康管理系统里最能出效果的模块是一个数据可视化页面展示血压、心率随时间的趋势变化。ECharts 是我的首选没有之一。template div refchartRef stylewidth: 100%; height: 400px/div /template script setup import { ref, onMounted, onBeforeUnmount } from vue import * as echarts from echarts const chartRef ref(null) let chartInstance null const loadChartData async () { const { data } await request.get(/health/trend, { params: { elderId: 1, days: 30 } }) chartInstance.setOption({ xAxis: { type: category, data: data.months }, yAxis: { type: value, name: 血压(mmHg) }, series: [ { name: 收缩压, type: line, data: data.systolicList }, { name: 舒张压, type: line, data: data.diastolicList } ] }) } onMounted(() { chartInstance echarts.init(chartRef.value) loadChartData() window.addEventListener(resize, handleResize) }) onBeforeUnmount(() { window.removeEventListener(resize, handleResize) chartInstance chartInstance.dispose() }) /script这段代码里有两个必须处理的坑。第一ECharts 实例在组件卸载时必须调用 dispose否则会有内存泄漏长时间切换页面后浏览器会越来越卡。第二监听 resize 事件是为了容器大小变化时图表自适应这个监听在组件卸载时也要移除。还有一个 Vue 特有的问题echarts.init 必须等 DOM 挂载完成后才能调用所以要写在 onMounted 里你要是把它写在 setup 函数体里chartRef.value 还是 null页面上白屏但控制台不报错排查起来非常浪费时间的。5. 避坑指南智慧社区养老系统开发中常见的5个翻车现场5.1 前后端联调时接口 404但不是路径写错了现象前端请求 POST /api/health/record后端明明写了 PostMapping(/api/health/record)请求仍然 404。原因Controller 类上加了 RequestMapping(/api)方法上又写了完整的 /api/health/record两段拼接变成 /api/api/health/record。这种问题在前后端分离开发时极其常见特别是从网上摘了代码后没检查注解拼接规则。解决统一规范。类上只写模块前缀 /api/health方法上只写 /record两段拼起来才是完整路径。与此同时前端 axios 的 baseURL 保持 /api不要请求时再拼一层 api 前缀两边关于“哪里写 /api”的约定必须完全一致。5.2 数据库时报错或凌晨数据诡异现象系统启动后数据库连接失败报错信息含有 time zone 关键词。有些情况是启动不报错但趋势图凌晨时段的数据对不上看起来像乱码或者偏移了几个小时。原因MySQL 8 的 JDBC 驱动要求明确指定时区不指定时它读取系统默认时区中文系统环境下可能解析失败。即使不失败时区不对也会导致 datetime 字段写入和读取相差 8 小时。解决在 application.yml 里把 JDBC URL 补上 serverTimezone 参数spring: datasource: url: jdbc:mysql://localhost:3306/smart_elder?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai写上这个参数后时间读写就统一了。注意 MySQL 8 的驱动类名是 com.mysql.cj.jdbc.Driver旧版的 com.mysql.jdbc.Driver 在新驱动版本里已经废弃写错了应用启动直接失败。5.3 Vue打包后路由白屏刷新后404现象npm run build 之后把 dist 目录丢进 Springboot 的 static 目录访问首页正常点击路由跳转或直接刷新子页面就白屏或 404。原因Vue Router 用的是 history 模式路由切换由前端 history API 模拟后端没有对应路径的页面映射。Springboot 收到 /health/trend 这种请求时找不到对应的控制器只能返回 404。解决两个方案选一个就行。要么把路由模式改成 hashURL 带 # 前缀刷新页面不会向服务器发起新请求要么在后端加一个前向控制器Controller public class ViewController { RequestMapping(value /{path:[^\\.]*}, method RequestMethod.GET) public String forward() { return forward:/index.html; } }这段配置的含义是所有不带文件后缀的路径都转发到 index.html交给 Vue Router 接管。我习惯直接用 hash 模式省事且不容易出幺蛾子论文里也能讲清楚两种模式的取舍。5.4 MyBatis-Plus分页查询不生效返回全量数据现象使用 selectPage 方法传入当前页和每页条数返回结果却是全表数据total 也不对。原因MyBatis-Plus 从 3.4 版本开始分页插件必须显式注册。没注册 PaginationInnerInterceptor 时分页参数会被静默忽略查询退化成无 LIMIT 的全表查询。解决在配置类里加分页拦截器Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }分页插件这个坑几乎每个做 springboot MyBatis-Plus 的人都踩过一次。配置时注意 DbType 要和你实际用的数据库一致MySQL 就写 DbType.MYSQL写成别家的数据库类型生成的 LIMIT 语法会错乱。5.5 接口返回字段是字符串ECharts画图显示NaN现象从后端接口拿到的气温、心率字段被画到 ECharts 里图形区域空白或显示 NaN。原因数据库字段类型是 varchar或者后端 entity 里把数值字段定义成了 String。ECharts 折线图的 series 数据必须是 number 类型字符串会被当成 category 处理画出来的图形完全不对。解决前端在拿到接口数据后统一做 Number 转换或者后端 VO 里把类型定义为 BigDecimal。我一般在前端做转换因为这类系统里不只一个字段需要处理血压、心率、体温都可能从接口返回字符串写一个公共转换函数统一处理const toNumber (val) { const num Number(val) return isNaN(num) ? 0 : num }五个坑覆盖了接口路径、数据库时区、前端路由、分页插件、数据类型五个方向。记住一个判断原则现象是“数据不对但没报错”优先排查类型和时区现象是“白屏但控制台没报错”优先排查生命周期和路由模式。这套排查思路能帮你省掉大量“瞎调参数、碰运气修好”的无效时间。6. 部署验证与论文包装毕业设计的最后一公里6.1 本地打包与部署验证后端打包直接交给 Maven前端构建用 npm run build。构件完成后把 dist 目录整个复制到 Springboot 项目的 src/main/resources/static 下再重新打包后端打出来的 jar 包同时包含接口和页面。mvn clean package -DskipTests java -jar target/smart-elder-0.0.1-SNAPSHOT.jar启动后访问 http://localhost:8080 就能看到登录页面不用再单独启动前端 dev server。验证时重点看三个场景登录后 token 是否写入 localStorage、刷新浏览器页面是否仍保持登录态、退出登录后跳转是否干净。这三个点没问题核心链路就稳了。6.2 答辩演示的完整业务链答辩演示前我习惯用一条贯通业务链来彩排管理员创建老人档案 → 护理员录入一条异常血压数据 → 系统触发预警 → 家属登录看到通知 → 管理员派发上门服务工单 → 护理员接单并完成。这条链走完系统五个核心模块全部覆盖比打开菜单逐个点击要有说服力得多。数据库里要准备好几组像样的演示数据老人档案至少 10 条健康记录每个老人至少 30 条时间跨度覆盖最近三个月。数值要有明显波动比如某位老人某几天血压明显偏高这样 ECharts 的趋势图和预警记录才有展示素材不要让图表呈现一条平缓的直线。6.3 论文写作中的图表与数据呈现论文里两个东西最加分系统架构图和健康数据大屏截图。架构图不用画得太复杂三层结构就够——表现层 Vue、业务层 Springboot、数据层 MySQL把每层的职责写清楚即可。大屏截图一定要用真实数据跑出来的效果别拿模拟数据糊弄答辩老师会追问数据的来源和业务含义回答不上来比不做更扣分。我个人的血泪经验是把“开发中遇到的问题与解决方案”单独写成论文的一章把上面五条踩坑记录用“问题现象 → 排查过程 → 解决方案”的结构写进去。这比罗列功能点更能体现真实的开发工作量也是答辩时老师最愿意听的内容——他们要确认这些代码确实是你自己一行一行写出来的。希望这篇笔记能帮你把毕业设计从“跑得起来”推进到“答得上来”。回头看我当年做类似项目最大的教训就是时间分配失衡——大部分时间砸在堆功能上反而没有留够时间把每个接口为何这样设计、每张表为什么这样建梳理清楚答辩场上老师追问设计动机时我支支吾吾的样子至今记忆犹新。系统写完只是个开始把背后的取舍理由想明白才能让论文和演示经得起追问。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/30 16:54:39 · 阅读 1.2k Springboot+Vue智慧社区居家养老健康管理系统毕业设计指南
简介这套基于Spring Boot与Vue框架的智慧社区居家养老健康管理系统是面向计算机相关专业毕业设计的完整源码与论文资料。系统围绕老人、家属、医生和社区工作人员四类用户覆盖老人档案、健康管理、在线问诊、服务预约、公告发布、轮播图配置等核心模块解决居家养老场景下信息分散、服务对接不便的问题前端采用Vue后端基于Spring Boot数据存储使用MySQL。压缩包内共878个文件包括128个Java后端源码、69个Vue前端页面、56个HTML页面及配套JS/CSS样式、1个SQL数据库脚本同时提供安装部署的bat命令文件和论文doc/docx文档整体大小39.68MB。目前已有140人浏览学习适合用来快速搭建毕设框架、理解前后端交互逻辑或在此基础上扩展功能模块。1. 智慧社区居家养老健康管理系统毕业设计从选题到落地的完整路径每年做毕业设计的人都会在选题阶段反复拉扯又要工作量能撑起论文篇幅又要自己能写完答辩时还得讲得明白。基于 Springboot 的智慧社区居家养老健康管理系统恰恰是这几个条件都能满足的成熟方向。它围绕社区养老的真实场景把老人档案、健康监测、异常预警、服务工单、家属通知这几条核心链路串起来技术栈就是 Springboot Vue MySQL 这一套最主流的组合。下面我按自己实际做过这类项目的思路从架构设计讲到前后端联调再把最容易翻车的几个坑一次说清楚适合准备拿这个题目做毕业设计的人照着复现。2. 技术选型与系统架构为什么SpringbootVue最适合这类毕业设计2.1 后端选型Springboot版本选择的取舍常见做法是选 Springboot 2.7.x而不是 3.x。原因很现实3.x 强制要求 JDK 17很多学校的机器还停在 JDK 8答辩现场环境不匹配直接启动失败。另外 3.x 把 javax 包改名成 jakarta网上大量教程和代码片段还是 javax 写法你照着抄大概率报“包不存在”。我一般把 parent 版本固定在 2.7.18这个版本同时兼容 JDK 8 和 JDK 11生态最稳。parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version relativePath/ /parent把 version 写死有两个作用一是保证 Maven 依赖解析不会因为网络波动拉到不兼容的快照版本二是让子模块的依赖版本统一由 parent 管理不用每个依赖都手写版本号。如果你后面想引入 Redis 或 RabbitMQ2.7.18 都有对应的 starter不会出现版本黑洞——这种“版本太高导致配置方式全变”的坑在 springboot 项目里实在太常见了。2.2 前端选型Vue 2还是Vue 3标题里只写了 Vue 框架没限定版本。我的建议是如果刚学 Vue 没多久选 Vue 2 Element UI资料多、报错好搜、组件用法稳定如果已经熟悉 Composition API选 Vue 3 Element Plus答辩时能讲清楚响应式原理的升级这是加分项。但有一条红线不能碰——Vue 3 不能配 Element UIVue 2 也不能配 Element Plus组件库和框架版本不匹配时页面渲染会出各种莫名其妙的样式错乱。管理后台这类页面用 Element 系组件库是最优解表格、表单、分页、弹窗都是现成的省下的工作量比你想象的多。尤其对于毕业生来说时间应该花在业务逻辑上而不是调试一个按钮的居中样式。2.3 系统功能模块划分老人档案、健康监测、工单流转、亲属通知做这类系统的第一步不是写代码而是把功能模块拆清楚。我习惯拆成四个核心模块老人档案管理基本信息、居住信息、紧急联系人、既往病史健康监测管理血压、血糖、心率、体温的录入与趋势展示异常值预警服务工单管理社区工作人员上门服务的派单、接单、完成闭环亲属通知管理老人健康数据异常时通过站内信或短信通知家属四个模块拆完后前端菜单、后端接口、数据库表就能一一对应。论文里画系统功能结构图时这个层级刚好是两层结构看起来饱满又不散。数据库表我一般建这些sys_user登录用户、elder_info老人档案、health_record健康记录、service_order服务工单、notice_log通知记录、sys_role角色。表之间用逻辑关联不建议加物理外键——删除操作会被约束缠住代码里控制逻辑关系就好。3. 后端动手实现Springboot核心代码与关键配置3.1 项目初始化与分层结构用 IDEA 新建 Springboot 项目时勾选 Web、MyBatis、MySQL Driver 这几个起步依赖就够了。如果是在线生成项目记得把 Group 和 Artifact 改成自己的命名别留 com.example 的默认值——答辩时老师看到这个包名印象分先扣一截。后端我习惯做四层结构controller、service、mapper、entity再额外建 config、common、dto、vo 几个包。entity 对应数据库表字段dto 接收前端参数vo 返回给前端展示。不要嫌类多毕业设计就需要这种看得见的层级论文的软件设计章节才好写。RestController RequestMapping(/api/health) public class HealthRecordController { Autowired private HealthRecordService healthRecordService; PostMapping(/record) public Result saveRecord(RequestBody HealthRecordDTO dto) { healthRecordService.saveRecord(dto); return Result.success(); } }这是健康数据上报的最外层入口。RestController 让接口直接返回 JSONRequestBody 把前端传来的 JSON 自动绑定到 DTO 对象上。注意这里用的是 dto 而不是 entity因为前端可能额外传了上传人的登录名或备注字段这些不需要落库用 DTO 做参数隔离更干净。Result 是统一返回体包含 code、msg、data 三个字段前端拦截器靠 code 值判断请求是否成功。3.2 健康数据上报接口从Controller到Mapper的完整链路一个健康记录接口要经过四个环节Controller 接收参数、Service 做业务校验、Mapper 做数据落库、VO 返回结果。Service 层的校验逻辑至少要覆盖两点老人 ID 是否存在、健康数值是否在合理范围内。比如血压高出 300/200 这种明显是误录入的数据应该直接拒绝而不是落库。Service public class HealthRecordServiceImpl implements HealthRecordService { Override public void saveRecord(HealthRecordDTO dto) { // 校验老人是否存在 ElderInfo elder elderInfoMapper.selectById(dto.getElderId()); if (elder null) { throw new ServiceException(老人档案不存在); } // 校验血压数值范围 if (dto.getSystolicPressure() 300 || dto.getDiastolicPressure() 200) { throw new ServiceException(血压数值超出合理范围); } HealthRecord record new HealthRecord(); BeanUtils.copyProperties(dto, record); record.setCreateTime(LocalDateTime.now()); healthRecordMapper.insert(record); // 异步触发异常预警 healthWarningService.checkAndWarn(record); } }BeanUtils.copyProperties 是 Spring 自带的属性拷贝工具字段名一致的属性会自动复制能省掉十几行手写 getter/setter 的枯燥代码。注意 checkAndWarn 放到 insert 之后调用而且应该在 Service 内部做异步处理比如用 Async 注解标注方法。这样前端感知到的就是“保存成功立即返回”不会被预警逻辑拖慢。MyBatis 层我一般直接用 MyBatis-Plus单表操作完全不用写 XMLselectById、insert、selectPage 都是现成方法。如果论文里需要体现 SQL 能力再挑两三个统计查询改成自定义 SQL。比如按月统计健康数据平均值这个结果直接供给前端折线图select idselectMonthlyAvg resultTypemap SELECT DATE_FORMAT(record_time, %Y-%m) AS month, AVG(systolic_pressure) AS avg_systolic, AVG(diastolic_pressure) AS avg_diastolic FROM health_record WHERE elder_id #{elderId} AND record_time #{startTime} GROUP BY DATE_FORMAT(record_time, %Y-%m) ORDER BY month /select这段 SQL 的逻辑是按月份分组计算收缩压和舒张压的平均值折线图的每个数据点就来自这一行。DATE_FORMAT 是 MySQL 的日期格式化函数这里有个隐藏坑如果表里 record_time 是 datetime 类型前端传时间范围时一定要把时区对齐否则统计结果会偏移 8 小时这是做健康趋势图最容易踩坑的地方后面避坑章节细说。3.3 基于定时任务的异常预警实现健康数据异常不能依赖用户刷新页面才被看到系统应该主动扫描并通知。Springboot 自带的 Scheduled 注解就能做定时任务不需要额外引入 Quartz 这种重量级框架。Component public class HealthWarnScheduler { Scheduled(cron 0 0/30 * * * ?) public void scanAbnormalRecords() { ListHealthRecord abnormalList healthRecordMapper.selectRecentAbnormal(30); for (HealthRecord record : abnormalList) { if (!noticeLogMapper.existsByRecordId(record.getId())) { notifyFamily(record); } } } }cron 表达式0 0/30 * * * ?表示每 30 分钟执行一次扫描。注意最后一位是?而不是*Spring 的 cron 语法里星期位用?表示不指定写成*在某些版本会直接启动报错。扫描只查最近 30 分钟的数据超过这个窗口的异常值已经失去预警意义。这个定时任务有个设计细节它必须是无状态的。应用重启后不能把重启前已经通知过的记录再通知一遍。我在代码里用 notice_log 表做幂等判断——记录 ID 和通知类型做联合唯一索引重复插入直接失败。这样即使定时任务重复执行也不会给家属重复发通知血泪经验告诉你这一点不做的话演示现场很容易出现“一条异常弹出五条消息”的尴尬。3.4 JWT登录鉴权与角色权限控制智慧社区养老系统里至少有管理员、护理员、家属三种角色后端接口不能裸奔。权限框架最常见的选择是 Spring Security但它对毕业生来说学习曲线太陡了——过滤器链、UserDetailsService、SecurityContext 这些概念能把人绕晕好几周。我推荐用 Sa-TokenAPI 简单直接毕业设计阶段完全够用。Configuration public class SaTokenConfigure implements WebMvcConfigurer { Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new SaInterceptor(handle - { StpUtil.checkLogin(); })).addPathPatterns(/**) .excludePathPatterns(/api/auth/login, /api/auth/register); } }这段配置的含义是除了登录和注册接口其他所有接口都要经过登录校验。StpUtil.checkLogin() 会从请求头里读取 token 并校验有效期校验失败直接抛出未登录异常前端响应拦截器统一处理后跳转登录页。如果需要更细的权限控制可以在方法上加 SaCheckRole(admin) 注解比如只有管理员能删除老人档案护理员只能录入和查看。权限这里最容易翻车的不是后端拦截逻辑而是前端路由没有做同步控制。很多同学的代码只是后端加了权限前端菜单依然所有人可见用户点进去才报 401。正确做法是登录时后端返回角色标识前端根据角色动态渲染菜单和数据按钮这个在下一章的 Vue 部分会详细展开。4. 前端落地Vue页面与后端联调的关键细节4.1 Vue项目创建与路由配置前端用 Vue CLI 还是 Vite 创建都行我推荐 Vite启动速度快、配置更直观。项目创建完后的第一件事是配置 devServer 代理把 /api 开头的请求转发到后端 8080 端口这样在开发阶段能彻底绕开跨域问题不用在后端写 CrossOrigin。// vite.config.js export default defineConfig({ plugins: [vue()], server: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })changeOrigin 必须设为 true这样后端拿到的请求头 Host 就是 localhost:8080不会因为 Host 不匹配被后端虚拟主机配置拦截。如果代理配置不对现象就是前端请求能发出去、后端日志也能看到请求但响应一直报跨域错误调试起来特别恶心。Vue Router 的路由配置里重点是给需要登录的页面加 meta 标记然后通过全局前置守卫统一校验router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } })这段守卫逻辑很直白目标页面要求登录而本地又没有 token就踢回登录页。token 存 localStorage 有 XSS 风险这点在答辩时主动提出来反而是加分项说明你考虑过安全问题。更稳的做法是存到 sessionStorage但刷新页面会丢登录态体验差一些。4.2 axios封装与接口对接axios 一定要统一封装。不要在页面组件里到处 new axios 实例那样接口地址和错误处理会散落得到处都是后端接口路径一变前端翻车的地方恨不得有十处。封装要做三件事统一 baseURL、请求头注入 token、响应拦截器统一处理错误码。// request.js import axios from axios import { ElMessage } from element-plus import router from ../router const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.msg || 请求失败) return Promise.reject(new Error(res.msg)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } ElMessage.error(网络异常请稍后重试) return Promise.reject(error) } ) export default request这段封装里最关键的是响应拦截器对 401 的处理后端返回未登录时前端立刻清理本地 token 并跳转登录页。否则用户停留在页面里所有操作都报错但自己不知道已经掉登录了这种“黑匣子”状态特别容易出现在答辩演示现场你不想当着老师的面翻这个车。timeout 设置成 10 秒是因为健康数据上报偶尔会有大字段默认的 5 秒超时在弱网环境容易误判失败。4.3 健康大屏可视化ECharts在Vue中的集成健康管理系统里最能出效果的模块是一个数据可视化页面展示血压、心率随时间的趋势变化。ECharts 是我的首选没有之一。template div refchartRef stylewidth: 100%; height: 400px/div /template script setup import { ref, onMounted, onBeforeUnmount } from vue import * as echarts from echarts const chartRef ref(null) let chartInstance null const loadChartData async () { const { data } await request.get(/health/trend, { params: { elderId: 1, days: 30 } }) chartInstance.setOption({ xAxis: { type: category, data: data.months }, yAxis: { type: value, name: 血压(mmHg) }, series: [ { name: 收缩压, type: line, data: data.systolicList }, { name: 舒张压, type: line, data: data.diastolicList } ] }) } onMounted(() { chartInstance echarts.init(chartRef.value) loadChartData() window.addEventListener(resize, handleResize) }) onBeforeUnmount(() { window.removeEventListener(resize, handleResize) chartInstance chartInstance.dispose() }) /script这段代码里有两个必须处理的坑。第一ECharts 实例在组件卸载时必须调用 dispose否则会有内存泄漏长时间切换页面后浏览器会越来越卡。第二监听 resize 事件是为了容器大小变化时图表自适应这个监听在组件卸载时也要移除。还有一个 Vue 特有的问题echarts.init 必须等 DOM 挂载完成后才能调用所以要写在 onMounted 里你要是把它写在 setup 函数体里chartRef.value 还是 null页面上白屏但控制台不报错排查起来非常浪费时间的。5. 避坑指南智慧社区养老系统开发中常见的5个翻车现场5.1 前后端联调时接口 404但不是路径写错了现象前端请求 POST /api/health/record后端明明写了 PostMapping(/api/health/record)请求仍然 404。原因Controller 类上加了 RequestMapping(/api)方法上又写了完整的 /api/health/record两段拼接变成 /api/api/health/record。这种问题在前后端分离开发时极其常见特别是从网上摘了代码后没检查注解拼接规则。解决统一规范。类上只写模块前缀 /api/health方法上只写 /record两段拼起来才是完整路径。与此同时前端 axios 的 baseURL 保持 /api不要请求时再拼一层 api 前缀两边关于“哪里写 /api”的约定必须完全一致。5.2 数据库时报错或凌晨数据诡异现象系统启动后数据库连接失败报错信息含有 time zone 关键词。有些情况是启动不报错但趋势图凌晨时段的数据对不上看起来像乱码或者偏移了几个小时。原因MySQL 8 的 JDBC 驱动要求明确指定时区不指定时它读取系统默认时区中文系统环境下可能解析失败。即使不失败时区不对也会导致 datetime 字段写入和读取相差 8 小时。解决在 application.yml 里把 JDBC URL 补上 serverTimezone 参数spring: datasource: url: jdbc:mysql://localhost:3306/smart_elder?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai写上这个参数后时间读写就统一了。注意 MySQL 8 的驱动类名是 com.mysql.cj.jdbc.Driver旧版的 com.mysql.jdbc.Driver 在新驱动版本里已经废弃写错了应用启动直接失败。5.3 Vue打包后路由白屏刷新后404现象npm run build 之后把 dist 目录丢进 Springboot 的 static 目录访问首页正常点击路由跳转或直接刷新子页面就白屏或 404。原因Vue Router 用的是 history 模式路由切换由前端 history API 模拟后端没有对应路径的页面映射。Springboot 收到 /health/trend 这种请求时找不到对应的控制器只能返回 404。解决两个方案选一个就行。要么把路由模式改成 hashURL 带 # 前缀刷新页面不会向服务器发起新请求要么在后端加一个前向控制器Controller public class ViewController { RequestMapping(value /{path:[^\\.]*}, method RequestMethod.GET) public String forward() { return forward:/index.html; } }这段配置的含义是所有不带文件后缀的路径都转发到 index.html交给 Vue Router 接管。我习惯直接用 hash 模式省事且不容易出幺蛾子论文里也能讲清楚两种模式的取舍。5.4 MyBatis-Plus分页查询不生效返回全量数据现象使用 selectPage 方法传入当前页和每页条数返回结果却是全表数据total 也不对。原因MyBatis-Plus 从 3.4 版本开始分页插件必须显式注册。没注册 PaginationInnerInterceptor 时分页参数会被静默忽略查询退化成无 LIMIT 的全表查询。解决在配置类里加分页拦截器Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }分页插件这个坑几乎每个做 springboot MyBatis-Plus 的人都踩过一次。配置时注意 DbType 要和你实际用的数据库一致MySQL 就写 DbType.MYSQL写成别家的数据库类型生成的 LIMIT 语法会错乱。5.5 接口返回字段是字符串ECharts画图显示NaN现象从后端接口拿到的气温、心率字段被画到 ECharts 里图形区域空白或显示 NaN。原因数据库字段类型是 varchar或者后端 entity 里把数值字段定义成了 String。ECharts 折线图的 series 数据必须是 number 类型字符串会被当成 category 处理画出来的图形完全不对。解决前端在拿到接口数据后统一做 Number 转换或者后端 VO 里把类型定义为 BigDecimal。我一般在前端做转换因为这类系统里不只一个字段需要处理血压、心率、体温都可能从接口返回字符串写一个公共转换函数统一处理const toNumber (val) { const num Number(val) return isNaN(num) ? 0 : num }五个坑覆盖了接口路径、数据库时区、前端路由、分页插件、数据类型五个方向。记住一个判断原则现象是“数据不对但没报错”优先排查类型和时区现象是“白屏但控制台没报错”优先排查生命周期和路由模式。这套排查思路能帮你省掉大量“瞎调参数、碰运气修好”的无效时间。6. 部署验证与论文包装毕业设计的最后一公里6.1 本地打包与部署验证后端打包直接交给 Maven前端构建用 npm run build。构件完成后把 dist 目录整个复制到 Springboot 项目的 src/main/resources/static 下再重新打包后端打出来的 jar 包同时包含接口和页面。mvn clean package -DskipTests java -jar target/smart-elder-0.0.1-SNAPSHOT.jar启动后访问 http://localhost:8080 就能看到登录页面不用再单独启动前端 dev server。验证时重点看三个场景登录后 token 是否写入 localStorage、刷新浏览器页面是否仍保持登录态、退出登录后跳转是否干净。这三个点没问题核心链路就稳了。6.2 答辩演示的完整业务链答辩演示前我习惯用一条贯通业务链来彩排管理员创建老人档案 → 护理员录入一条异常血压数据 → 系统触发预警 → 家属登录看到通知 → 管理员派发上门服务工单 → 护理员接单并完成。这条链走完系统五个核心模块全部覆盖比打开菜单逐个点击要有说服力得多。数据库里要准备好几组像样的演示数据老人档案至少 10 条健康记录每个老人至少 30 条时间跨度覆盖最近三个月。数值要有明显波动比如某位老人某几天血压明显偏高这样 ECharts 的趋势图和预警记录才有展示素材不要让图表呈现一条平缓的直线。6.3 论文写作中的图表与数据呈现论文里两个东西最加分系统架构图和健康数据大屏截图。架构图不用画得太复杂三层结构就够——表现层 Vue、业务层 Springboot、数据层 MySQL把每层的职责写清楚即可。大屏截图一定要用真实数据跑出来的效果别拿模拟数据糊弄答辩老师会追问数据的来源和业务含义回答不上来比不做更扣分。我个人的血泪经验是把“开发中遇到的问题与解决方案”单独写成论文的一章把上面五条踩坑记录用“问题现象 → 排查过程 → 解决方案”的结构写进去。这比罗列功能点更能体现真实的开发工作量也是答辩时老师最愿意听的内容——他们要确认这些代码确实是你自己一行一行写出来的。希望这篇笔记能帮你把毕业设计从“跑得起来”推进到“答得上来”。回头看我当年做类似项目最大的教训就是时间分配失衡——大部分时间砸在堆功能上反而没有留够时间把每个接口为何这样设计、每张表为什么这样建梳理清楚答辩场上老师追问设计动机时我支支吾吾的样子至今记忆犹新。系统写完只是个开始把背后的取舍理由想明白才能让论文和演示经得起追问。希望帮到你。本文还有配套的精品资源点击获取