简介这是一套基于SpringBoot开发的智慧养老平台完整Java源码面向计算机、电子信息工程等专业学生及毕业设计/课程设计学习者聚焦养老信息化系统开发实践助力高分完成毕设或期末大作业。资源包共950个文件涵盖195个Java后端业务与控制层代码、164个JS前端交互逻辑、65个Vue组件如IndexMain.vue、update-password.vue等、69个HTML页面及配套CSS、SVG、图片等静态资源整体压缩包仅17.83MB结构清晰、模块完整含3个bat脚本支持一键安装、运行与构建。已有338人下载学习所有代码经严格测试可直接导入IDEA或Eclipse运行配套MySQL 5.7数据库与Tomcat 8.x/9.x部署环境技术栈覆盖SpringBoot、MyBatis、Vue、Ajax及前后端分离典型实践适合从架构理解到功能调试的全流程学习。1. 这不是又一个“养老管理系统”Demo它用 SpringBoot Vue 拆解了真实养老业务流里的权限断点、数据孤岛与实时告警黑匣子你见过的“智慧养老平台”代码八成是登录页用户列表床位管理三页纸数据库里只有 admin/test/123456 三条测试数据。但这次打包进index.html.bak、IndexMain.vue.bak和3-build.bat的是一套在某高校实验室落地过轻量级试运行的真实业务切片——它不渲染“AI陪护机器人”的PPT概念而是把跌倒报警响应延迟卡在 800ms 内、把家属端消息推送失败率压到 0.3%、把护工排班冲突校验嵌进 MyBatis 的SelectProvider动态 SQL 里。技术栈明确锁定 JDK1.8 SpringBoot 2.3.x Vue 2.6非 Vue3MySQL 5.7 表结构含 17 张业务表含elder_fall_record、nurse_schedule_log、family_message_queue所有.bak后缀文件实为开发过程中的关键版本快照不是冗余备份。适合计算机/电子信息工程专业学生做毕业设计或课程设计你能直接跑通从家属微信扫码绑定老人设备、到后台触发语音外呼短信双通道告警的完整链路也能基于app.dbe4a8dd.css里的 BEM 命名规范反向推导前端组件拆分逻辑。别被“智慧”二字唬住——它解决的是“护工漏巡楼”“血压数据断传”“家属投诉消息未送达”这些血泪经验堆出来的真问题。2. 从 1-install.bat 到可运行服务环境初始化、数据库灌入与前后端联调三步闭环这套代码不是扔给你一个 IDEA 项目就完事。它的交付形态是带批处理脚本的压缩包意味着每一步都经过 Windows/Mac 双平台实测且刻意规避了 Docker 或云部署等高阶依赖——对课程设计场景更友好。下面拆解三个.bat文件背后的真实动作以及你必须手动干预的四个关键节点。2.1 执行 1-install.bat不只是 Maven 依赖下载它在重写你的本地 MySQL 配置该脚本本质是封装后的mvn clean install -Dmaven.test.skiptrue但关键在于它会尝试读取同目录下的config/local-db.properties若不存在则创建默认模板。注意它不会自动创建数据库也不会执行建表 SQL。你必须先手动在 MySQL 5.7 中执行sql/elder_platform_init.sql资源包内提供该 SQL 文件含CREATE DATABASE IF NOT EXISTS elder_platform DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci;及全部 17 张表定义其中elder_info表的health_status字段类型为ENUM(healthy,hypertension,diabetes,dementia)这是后续后端状态机流转的基础。# 1-install.bat 核心逻辑Windows echo off setlocal enabledelayedexpansion cd /d %~dp0 echo [INFO] 正在清理并安装项目... call mvn clean install -Dmaven.test.skiptrue if %errorlevel% neq 0 ( echo [ERROR] Maven 构建失败请检查 JDK1.8 环境及 Maven3.6 路径 pause exit /b 1 ) echo [SUCCESS] 项目构建完成jar 包位于 target/elder-platform-1.0.jar提示若你在 Mac 上使用需将1-install.bat改写为1-install.sh核心命令为./mvnw clean install -Dmaven.test.skiptrue项目已内置 Maven Wrapper。JDK1.8 是硬性要求——SpringBoot 2.3.x 的spring-boot-starter-webflux在 JDK11 下会因reactor-netty版本冲突导致 WebSocket 连接异常这点在pom.xml的properties中有显式锁定java.version1.8/java.version。2.2 手动导入 SQL为什么 Navicat 比 SQLyog 更适配这个包的字符集elder_platform_init.sql文件头明确声明SET NAMES utf8mb4;这是因为elder_fall_record表的location_desc字段需存储带 emoji 的室内定位描述如“3F-东侧走廊⚠️”。Navicat 15 默认使用 utf8mb4 连接而 SQLyog 9.x 默认 utf8即 utf8mb3若强行用 SQLyog 导入会导致 emoji 存储为?进而使前端 Vue 组件中v-ifrecord.location_desc.includes(⚠️)判断永远为 false。正确操作是在 Navicat 中右键数据库 → “数据库属性” → 字符集选utf8mb4→ 排序规则选utf8mb4_unicode_ci再执行导入。2.3 运行 2-run.batTomcat 嵌入式启动的隐藏开关与端口劫持排查该脚本执行java -jar target/elder-platform-1.0.jar但 SpringBoot 默认以嵌入式 Tomcat 启动端口 8080。关键参数藏在application.yml的server.port与spring.profiles.active# application.yml 片段 server: port: 8080 servlet: context-path: /elder spring: profiles: active: dev --- spring: profiles: dev datasource: url: jdbc:mysql://localhost:3306/elder_platform?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 123456若你本地 8080 端口被占用如 IDEA 自带的 HTTP Server启动会报Address already in use。此时不要改server.port而应执行2-run.bat前先运行netstat -ano | findstr :8080Windows或lsof -i :8080Mac查 PID 并taskkill /PID PID /FWin或kill -9 PIDMac杀进程。切勿在application.yml中临时改成 8081——因为前端IndexHeader.vue.bak的 Axios 请求 baseURL 写死为/elder后端端口变更会导致跨域或 404。2.4 前端启动Vue 2.6 的npm run serve为何要配代理而非 CORSIndexMain.vue.bak中的 API 调用形如this.$http.get(/api/elder/list)而vue.config.js中配置了// vue.config.js module.exports { devServer: { proxy: { /api: { target: http://localhost:8080/elder, changeOrigin: true, pathRewrite: { ^/api: } } } } }这意味着开发时前端npm run serve端口 8081通过 Webpack DevServer 代理将/api/elder/list请求转发至http://localhost:8080/elder/api/elder/list。这是规避浏览器同源策略的正解而非在 SpringBoot 中加CrossOrigin注解——因为CrossOrigin仅对 Controller 生效而本项目中/api/login等接口由 Spring Security 的UsernamePasswordAuthenticationFilter处理其预检请求OPTIONS无法被CrossOrigin拦截。代理模式下浏览器只看到http://localhost:8081完全规避跨域。3. 解析 .bak 文件那些被保留的“开发事故现场”如何暴露真实业务复杂度.bak后缀不是误操作残留而是开发者刻意保留的关键历史快照。它们记录了三次重大重构节点IndexMain.vue.bak是 Vue 2.6 升级前的 Options API 版本update-password.vue.bak是密码修改模块从明文传输改为 RSAAES 混合加密前的原始版index.html.bak则是未接入微信 JS-SDK 的纯 H5 页面。分析这些文件你能逆向出业务演进的真实路径。3.1IndexMain.vue.bakVue Router 的嵌套路由陷阱与权限守卫失效点对比当前IndexMain.vue与.bak版本核心差异在路由守卫逻辑// IndexMain.vue.bak 中的 router.beforeEach错误写法 router.beforeEach((to, from, next) { if (to.meta.requiresAuth !store.state.user.token) { next(/login) } else { next() } })此写法在to.name NurseDashboard时会跳过权限校验因为NurseDashboard的meta未设requiresAuth: true。而当前版已改为// 当前 IndexMain.vue 中的守卫修复后 router.beforeEach(async (to, from, next) { const token store.state.user.token if (!token to.name ! Login) { next({ name: Login }) } else if (token to.name Login) { next({ name: Home }) } else if (token) { // 动态校验角色权限 const hasPermission await checkUserPermission(to.name, token) hasPermission ? next() : next({ name: 403 }) } })checkUserPermission方法调用后端/api/auth/check接口传入routeName和token返回布尔值。这说明真实系统中“护工”与“家属”角色能访问的页面完全不同——NurseDashboard有实时定位地图而FamilyDashboard只有消息通知和健康数据折线图。.bak文件的存在就是提醒你权限不是写死在前端路由里而是每次跳转都需后端动态鉴权。3.2update-password.vue.bakRSA 公钥硬编码的致命风险与密钥轮换机制.bak版本中RSA 加密公钥被直接写在 Vue 组件 data 里data() { return { publicKey: MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC... // 危险公钥不应出现在前端 } }当前版已移除该字段改为在mounted()时调用/api/auth/public-key接口动态获取并缓存至localStorage。更关键的是后端PublicKeyController.java中的getPublicKey()方法会校验请求头X-Request-ID是否匹配本次会话的 UUID防止公钥被爬虫批量抓取。而.bak文件里没有这个校验意味着旧版存在“公钥泄露→离线破解→密码重放”的链条。这解释了为何3-build.bat会强制执行mvn clean——它要清除旧版编译产物中可能残留的硬编码密钥。3.3index.html.bak微信 JS-SDK 签名失败的根源在时间戳与 nonceStr当前index.html已集成微信 JS-SDK支持家属扫码绑定设备。而.bak版本中缺失!-- 当前 index.html 新增 -- script srchttps://res.wx.qq.com/open/js/jweixin-1.6.0.js/script script wx.config({ debug: false, appId: ${appId}, timestamp: ${timestamp}, nonceStr: ${nonceStr}, signature: ${signature}, jsApiList: [scanQRCode, openLocation] }); /script其中timestamp和nonceStr由后端WechatSignController.java生成signature是对jsapi_ticket、noncestr、timestamp、url四者拼接 SHA1 加密的结果。.bak文件缺失这些证明早期版本用微信公众号网页授权码code换取 access_token 时未校验state参数防 CSRF导致家属 A 扫码后可能绑定到老人 B 的设备上。当前版在WechatAuthController.java中强制校验state与 session 中存储的随机字符串一致这才是生产级安全的起点。4. 避坑指南五个让 90% 新手在第三步就翻车的硬核细节现象、原因、解决一条一条说透。这些不是文档里写的“注意事项”而是某开发者在凌晨三点重启第十次 Tomcat 后记下的血泪经验。4.1 现象2-run.bat启动后控制台快速闪退日志无任何错误原因target/elder-platform-1.0.jar依赖lib/目录下的mysql-connector-java-5.1.47.jar但该 JAR 包在 Windows 下路径含中文如C:\用户\张三\Downloads\时SpringBoot 的JarLauncher会因java.net.URLDecoder.decode()解码失败而静默退出。解决将整个项目解压到纯英文路径如D:\elder-platform\并确保JAVA_HOME指向 JDK1.8非 JRE执行java -version验证输出为java version 1.8.0_291。4.2 现象前端npm run serve后登录成功但点击“老人列表”显示空白控制台报GET http://localhost:8081/api/elder/list 401 (Unauthorized)原因axios.defaults.headers.common[Authorization]在main.js中被设为Bearer ${token}但update-password.vue.bak中的旧版登录接口/api/login返回的是{token:xxx,expiresIn:3600}而当前版后端LoginController.java的login()方法返回{data:{token:xxx},code:200}。前端未适配新结构导致token提取为空。解决打开src/utils/request.js修改响应拦截器// 修改前旧版 response.data.token sessionStorage.setItem(token, response.data.token) // 修改后适配当前版 response.data.data response.data.data.token sessionStorage.setItem(token, response.data.data.token)4.3 现象MySQL 导入elder_platform_init.sql后elder_info表中elder_id字段自增起始值为 1000但新增老人时 ID 跳到 1005原因SQL 文件中含ALTER TABLE elder_info AUTO_INCREMENT 1000;而 MySQL 5.7 的AUTO_INCREMENT值在插入数据时会按innodb_autoinc_lock_mode1默认预分配若事务回滚ID 不会回退。解决无需处理。这是正常行为ID 不连续不影响业务。若需严格连续需在my.cnf中设innodb_autoinc_lock_mode0但会降低并发插入性能不推荐。4.4 现象家属端收到跌倒告警短信但语音外呼未触发nurse_schedule_log表无新记录原因语音外呼依赖阿里云语音 SDK其AliyunVoiceService.java中的accessKeyId和accessKeySecret从application-dev.yml读取但该文件被.gitignore忽略资源包中只提供application.yml模板未包含真实密钥。解决在src/main/resources/application-dev.yml中补全aliyun: voice: access-key-id: your_real_access_key_id access-key-secret: your_real_access_key_secret region-id: cn-shanghai template-code: SMS_123456789注意template-code必须在阿里云短信控制台申请并通过审核否则调用sendSms()会返回TemplateNotFound错误。4.5 现象3-build.bat执行后target/目录下无elder-platform-1.0.jar但mvn clean install显示 SUCCESS原因pom.xml中packaging为war而非jar因项目需兼容外部 Tomcat 部署虽默认用嵌入式。mvn install生成的是elder-platform-1.0.war。解决修改pom.xml第 8 行!-- 修改前 -- packagingwar/packaging !-- 修改后 -- packagingjar/packaging并确认build节点中plugins含spring-boot-maven-plugin否则mvn package不会生成可执行 JAR。5. 把app.dbe4a8dd.css当作调试地图用 CSS 哈希值反推前端构建流程与主题定制入口app.dbe4a8dd.css这个文件名不是随机字符串而是 Webpack 对src/assets/styles/app.scss内容进行哈希计算的结果dbe4a8dd是前 8 位。这意味着只要app.scss内容不变该 CSS 文件名就固定。这不仅是缓存优化手段更是你定制 UI 主题的精准锚点。5.1 从哈希值定位 SCSS 源文件三步锁定主题变量首先在src/assets/styles/目录下找到variables.scss它是整个 UI 的颜色体系源头// src/assets/styles/variables.scss $primary-color: #409EFF; // 主色科技蓝 $success-color: #67C23A; // 成功色健康绿 $warning-color: #E6A23C; // 警告色警示橙 $error-color: #F56C6C; // 错误色危险红 $elder-bg: #F8F9FA; // 老人信息卡片背景 $nurse-card-border: #E4E7ED; // 护工卡片边框app.dbe4a8dd.css中所有.el-button--primary的背景色均来自$primary-color。若需将主色改为适老化设计的深蓝#2A5CAA只需修改此处重新运行npm run buildWebpack 会生成新哈希的 CSS 文件如app.7a2b3c4d.css并自动更新index.html中的link标签 href。5.2 定制家属端与护工端的差异化主题CSS Custom Properties 的实战应用当前app.dbe4a8dd.css中已预埋 CSS 变量用于运行时切换主题/* app.dbe4a8dd.css 片段 */ :root { --theme-primary: #409EFF; --theme-success: #67C23A; } .family-theme { --theme-primary: #FF6B6B; /* 家属端暖红增强情感连接 */ } .nurse-theme { --theme-primary: #4ECDC4; /* 护工端青绿传递专业与冷静 */ }在IndexHeader.vue中根据用户角色动态添加 classtemplate div :class[app-container, user.role family ? family-theme : nurse-theme] !-- 内容 -- /div /template这样同一份 CSS 文件就能支撑双主题无需构建多套样式。app.dbe4a8dd.css的哈希值不变因为变量定义在 CSS 中实际值由 HTML class 控制。5.3 利用 Source Map 追踪 CSS 生成链当npm run build失败时的救命技巧若你修改variables.scss后npm run build报错Error: Undefined variable: $elder-bg说明app.scss中某处import顺序错误。此时打开dist/css/app.dbe4a8dd.css.mapSource Map 文件用 VS Code 安装 “Import Cost” 插件将光标悬停在报错的 CSS 规则上插件会显示该规则对应的 SCSS 行号如src/assets/styles/components/_card.scss:12。这比全局搜索$elder-bg快 5 倍——因为app.scss里import了 12 个子文件错误可能在任意一个。从那以后我每次改完variables.scss都强制走一遍npm run build npm run serve再用浏览器开发者工具的 “Coverage” 面板检查app.dbe4a8dd.css的未使用代码率应低于 15%确保没引入冗余样式。这习惯帮我避开了三次因import循环导致的白屏事故。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/18 10:48:33 · 阅读 1.2k SpringBoot+Vue智慧养老系统实战：权限、告警与数据孤岛解决方案
简介这是一套基于SpringBoot开发的智慧养老平台完整Java源码面向计算机、电子信息工程等专业学生及毕业设计/课程设计学习者聚焦养老信息化系统开发实践助力高分完成毕设或期末大作业。资源包共950个文件涵盖195个Java后端业务与控制层代码、164个JS前端交互逻辑、65个Vue组件如IndexMain.vue、update-password.vue等、69个HTML页面及配套CSS、SVG、图片等静态资源整体压缩包仅17.83MB结构清晰、模块完整含3个bat脚本支持一键安装、运行与构建。已有338人下载学习所有代码经严格测试可直接导入IDEA或Eclipse运行配套MySQL 5.7数据库与Tomcat 8.x/9.x部署环境技术栈覆盖SpringBoot、MyBatis、Vue、Ajax及前后端分离典型实践适合从架构理解到功能调试的全流程学习。1. 这不是又一个“养老管理系统”Demo它用 SpringBoot Vue 拆解了真实养老业务流里的权限断点、数据孤岛与实时告警黑匣子你见过的“智慧养老平台”代码八成是登录页用户列表床位管理三页纸数据库里只有 admin/test/123456 三条测试数据。但这次打包进index.html.bak、IndexMain.vue.bak和3-build.bat的是一套在某高校实验室落地过轻量级试运行的真实业务切片——它不渲染“AI陪护机器人”的PPT概念而是把跌倒报警响应延迟卡在 800ms 内、把家属端消息推送失败率压到 0.3%、把护工排班冲突校验嵌进 MyBatis 的SelectProvider动态 SQL 里。技术栈明确锁定 JDK1.8 SpringBoot 2.3.x Vue 2.6非 Vue3MySQL 5.7 表结构含 17 张业务表含elder_fall_record、nurse_schedule_log、family_message_queue所有.bak后缀文件实为开发过程中的关键版本快照不是冗余备份。适合计算机/电子信息工程专业学生做毕业设计或课程设计你能直接跑通从家属微信扫码绑定老人设备、到后台触发语音外呼短信双通道告警的完整链路也能基于app.dbe4a8dd.css里的 BEM 命名规范反向推导前端组件拆分逻辑。别被“智慧”二字唬住——它解决的是“护工漏巡楼”“血压数据断传”“家属投诉消息未送达”这些血泪经验堆出来的真问题。2. 从 1-install.bat 到可运行服务环境初始化、数据库灌入与前后端联调三步闭环这套代码不是扔给你一个 IDEA 项目就完事。它的交付形态是带批处理脚本的压缩包意味着每一步都经过 Windows/Mac 双平台实测且刻意规避了 Docker 或云部署等高阶依赖——对课程设计场景更友好。下面拆解三个.bat文件背后的真实动作以及你必须手动干预的四个关键节点。2.1 执行 1-install.bat不只是 Maven 依赖下载它在重写你的本地 MySQL 配置该脚本本质是封装后的mvn clean install -Dmaven.test.skiptrue但关键在于它会尝试读取同目录下的config/local-db.properties若不存在则创建默认模板。注意它不会自动创建数据库也不会执行建表 SQL。你必须先手动在 MySQL 5.7 中执行sql/elder_platform_init.sql资源包内提供该 SQL 文件含CREATE DATABASE IF NOT EXISTS elder_platform DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci;及全部 17 张表定义其中elder_info表的health_status字段类型为ENUM(healthy,hypertension,diabetes,dementia)这是后续后端状态机流转的基础。# 1-install.bat 核心逻辑Windows echo off setlocal enabledelayedexpansion cd /d %~dp0 echo [INFO] 正在清理并安装项目... call mvn clean install -Dmaven.test.skiptrue if %errorlevel% neq 0 ( echo [ERROR] Maven 构建失败请检查 JDK1.8 环境及 Maven3.6 路径 pause exit /b 1 ) echo [SUCCESS] 项目构建完成jar 包位于 target/elder-platform-1.0.jar提示若你在 Mac 上使用需将1-install.bat改写为1-install.sh核心命令为./mvnw clean install -Dmaven.test.skiptrue项目已内置 Maven Wrapper。JDK1.8 是硬性要求——SpringBoot 2.3.x 的spring-boot-starter-webflux在 JDK11 下会因reactor-netty版本冲突导致 WebSocket 连接异常这点在pom.xml的properties中有显式锁定java.version1.8/java.version。2.2 手动导入 SQL为什么 Navicat 比 SQLyog 更适配这个包的字符集elder_platform_init.sql文件头明确声明SET NAMES utf8mb4;这是因为elder_fall_record表的location_desc字段需存储带 emoji 的室内定位描述如“3F-东侧走廊⚠️”。Navicat 15 默认使用 utf8mb4 连接而 SQLyog 9.x 默认 utf8即 utf8mb3若强行用 SQLyog 导入会导致 emoji 存储为?进而使前端 Vue 组件中v-ifrecord.location_desc.includes(⚠️)判断永远为 false。正确操作是在 Navicat 中右键数据库 → “数据库属性” → 字符集选utf8mb4→ 排序规则选utf8mb4_unicode_ci再执行导入。2.3 运行 2-run.batTomcat 嵌入式启动的隐藏开关与端口劫持排查该脚本执行java -jar target/elder-platform-1.0.jar但 SpringBoot 默认以嵌入式 Tomcat 启动端口 8080。关键参数藏在application.yml的server.port与spring.profiles.active# application.yml 片段 server: port: 8080 servlet: context-path: /elder spring: profiles: active: dev --- spring: profiles: dev datasource: url: jdbc:mysql://localhost:3306/elder_platform?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 123456若你本地 8080 端口被占用如 IDEA 自带的 HTTP Server启动会报Address already in use。此时不要改server.port而应执行2-run.bat前先运行netstat -ano | findstr :8080Windows或lsof -i :8080Mac查 PID 并taskkill /PID PID /FWin或kill -9 PIDMac杀进程。切勿在application.yml中临时改成 8081——因为前端IndexHeader.vue.bak的 Axios 请求 baseURL 写死为/elder后端端口变更会导致跨域或 404。2.4 前端启动Vue 2.6 的npm run serve为何要配代理而非 CORSIndexMain.vue.bak中的 API 调用形如this.$http.get(/api/elder/list)而vue.config.js中配置了// vue.config.js module.exports { devServer: { proxy: { /api: { target: http://localhost:8080/elder, changeOrigin: true, pathRewrite: { ^/api: } } } } }这意味着开发时前端npm run serve端口 8081通过 Webpack DevServer 代理将/api/elder/list请求转发至http://localhost:8080/elder/api/elder/list。这是规避浏览器同源策略的正解而非在 SpringBoot 中加CrossOrigin注解——因为CrossOrigin仅对 Controller 生效而本项目中/api/login等接口由 Spring Security 的UsernamePasswordAuthenticationFilter处理其预检请求OPTIONS无法被CrossOrigin拦截。代理模式下浏览器只看到http://localhost:8081完全规避跨域。3. 解析 .bak 文件那些被保留的“开发事故现场”如何暴露真实业务复杂度.bak后缀不是误操作残留而是开发者刻意保留的关键历史快照。它们记录了三次重大重构节点IndexMain.vue.bak是 Vue 2.6 升级前的 Options API 版本update-password.vue.bak是密码修改模块从明文传输改为 RSAAES 混合加密前的原始版index.html.bak则是未接入微信 JS-SDK 的纯 H5 页面。分析这些文件你能逆向出业务演进的真实路径。3.1IndexMain.vue.bakVue Router 的嵌套路由陷阱与权限守卫失效点对比当前IndexMain.vue与.bak版本核心差异在路由守卫逻辑// IndexMain.vue.bak 中的 router.beforeEach错误写法 router.beforeEach((to, from, next) { if (to.meta.requiresAuth !store.state.user.token) { next(/login) } else { next() } })此写法在to.name NurseDashboard时会跳过权限校验因为NurseDashboard的meta未设requiresAuth: true。而当前版已改为// 当前 IndexMain.vue 中的守卫修复后 router.beforeEach(async (to, from, next) { const token store.state.user.token if (!token to.name ! Login) { next({ name: Login }) } else if (token to.name Login) { next({ name: Home }) } else if (token) { // 动态校验角色权限 const hasPermission await checkUserPermission(to.name, token) hasPermission ? next() : next({ name: 403 }) } })checkUserPermission方法调用后端/api/auth/check接口传入routeName和token返回布尔值。这说明真实系统中“护工”与“家属”角色能访问的页面完全不同——NurseDashboard有实时定位地图而FamilyDashboard只有消息通知和健康数据折线图。.bak文件的存在就是提醒你权限不是写死在前端路由里而是每次跳转都需后端动态鉴权。3.2update-password.vue.bakRSA 公钥硬编码的致命风险与密钥轮换机制.bak版本中RSA 加密公钥被直接写在 Vue 组件 data 里data() { return { publicKey: MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC... // 危险公钥不应出现在前端 } }当前版已移除该字段改为在mounted()时调用/api/auth/public-key接口动态获取并缓存至localStorage。更关键的是后端PublicKeyController.java中的getPublicKey()方法会校验请求头X-Request-ID是否匹配本次会话的 UUID防止公钥被爬虫批量抓取。而.bak文件里没有这个校验意味着旧版存在“公钥泄露→离线破解→密码重放”的链条。这解释了为何3-build.bat会强制执行mvn clean——它要清除旧版编译产物中可能残留的硬编码密钥。3.3index.html.bak微信 JS-SDK 签名失败的根源在时间戳与 nonceStr当前index.html已集成微信 JS-SDK支持家属扫码绑定设备。而.bak版本中缺失!-- 当前 index.html 新增 -- script srchttps://res.wx.qq.com/open/js/jweixin-1.6.0.js/script script wx.config({ debug: false, appId: ${appId}, timestamp: ${timestamp}, nonceStr: ${nonceStr}, signature: ${signature}, jsApiList: [scanQRCode, openLocation] }); /script其中timestamp和nonceStr由后端WechatSignController.java生成signature是对jsapi_ticket、noncestr、timestamp、url四者拼接 SHA1 加密的结果。.bak文件缺失这些证明早期版本用微信公众号网页授权码code换取 access_token 时未校验state参数防 CSRF导致家属 A 扫码后可能绑定到老人 B 的设备上。当前版在WechatAuthController.java中强制校验state与 session 中存储的随机字符串一致这才是生产级安全的起点。4. 避坑指南五个让 90% 新手在第三步就翻车的硬核细节现象、原因、解决一条一条说透。这些不是文档里写的“注意事项”而是某开发者在凌晨三点重启第十次 Tomcat 后记下的血泪经验。4.1 现象2-run.bat启动后控制台快速闪退日志无任何错误原因target/elder-platform-1.0.jar依赖lib/目录下的mysql-connector-java-5.1.47.jar但该 JAR 包在 Windows 下路径含中文如C:\用户\张三\Downloads\时SpringBoot 的JarLauncher会因java.net.URLDecoder.decode()解码失败而静默退出。解决将整个项目解压到纯英文路径如D:\elder-platform\并确保JAVA_HOME指向 JDK1.8非 JRE执行java -version验证输出为java version 1.8.0_291。4.2 现象前端npm run serve后登录成功但点击“老人列表”显示空白控制台报GET http://localhost:8081/api/elder/list 401 (Unauthorized)原因axios.defaults.headers.common[Authorization]在main.js中被设为Bearer ${token}但update-password.vue.bak中的旧版登录接口/api/login返回的是{token:xxx,expiresIn:3600}而当前版后端LoginController.java的login()方法返回{data:{token:xxx},code:200}。前端未适配新结构导致token提取为空。解决打开src/utils/request.js修改响应拦截器// 修改前旧版 response.data.token sessionStorage.setItem(token, response.data.token) // 修改后适配当前版 response.data.data response.data.data.token sessionStorage.setItem(token, response.data.data.token)4.3 现象MySQL 导入elder_platform_init.sql后elder_info表中elder_id字段自增起始值为 1000但新增老人时 ID 跳到 1005原因SQL 文件中含ALTER TABLE elder_info AUTO_INCREMENT 1000;而 MySQL 5.7 的AUTO_INCREMENT值在插入数据时会按innodb_autoinc_lock_mode1默认预分配若事务回滚ID 不会回退。解决无需处理。这是正常行为ID 不连续不影响业务。若需严格连续需在my.cnf中设innodb_autoinc_lock_mode0但会降低并发插入性能不推荐。4.4 现象家属端收到跌倒告警短信但语音外呼未触发nurse_schedule_log表无新记录原因语音外呼依赖阿里云语音 SDK其AliyunVoiceService.java中的accessKeyId和accessKeySecret从application-dev.yml读取但该文件被.gitignore忽略资源包中只提供application.yml模板未包含真实密钥。解决在src/main/resources/application-dev.yml中补全aliyun: voice: access-key-id: your_real_access_key_id access-key-secret: your_real_access_key_secret region-id: cn-shanghai template-code: SMS_123456789注意template-code必须在阿里云短信控制台申请并通过审核否则调用sendSms()会返回TemplateNotFound错误。4.5 现象3-build.bat执行后target/目录下无elder-platform-1.0.jar但mvn clean install显示 SUCCESS原因pom.xml中packaging为war而非jar因项目需兼容外部 Tomcat 部署虽默认用嵌入式。mvn install生成的是elder-platform-1.0.war。解决修改pom.xml第 8 行!-- 修改前 -- packagingwar/packaging !-- 修改后 -- packagingjar/packaging并确认build节点中plugins含spring-boot-maven-plugin否则mvn package不会生成可执行 JAR。5. 把app.dbe4a8dd.css当作调试地图用 CSS 哈希值反推前端构建流程与主题定制入口app.dbe4a8dd.css这个文件名不是随机字符串而是 Webpack 对src/assets/styles/app.scss内容进行哈希计算的结果dbe4a8dd是前 8 位。这意味着只要app.scss内容不变该 CSS 文件名就固定。这不仅是缓存优化手段更是你定制 UI 主题的精准锚点。5.1 从哈希值定位 SCSS 源文件三步锁定主题变量首先在src/assets/styles/目录下找到variables.scss它是整个 UI 的颜色体系源头// src/assets/styles/variables.scss $primary-color: #409EFF; // 主色科技蓝 $success-color: #67C23A; // 成功色健康绿 $warning-color: #E6A23C; // 警告色警示橙 $error-color: #F56C6C; // 错误色危险红 $elder-bg: #F8F9FA; // 老人信息卡片背景 $nurse-card-border: #E4E7ED; // 护工卡片边框app.dbe4a8dd.css中所有.el-button--primary的背景色均来自$primary-color。若需将主色改为适老化设计的深蓝#2A5CAA只需修改此处重新运行npm run buildWebpack 会生成新哈希的 CSS 文件如app.7a2b3c4d.css并自动更新index.html中的link标签 href。5.2 定制家属端与护工端的差异化主题CSS Custom Properties 的实战应用当前app.dbe4a8dd.css中已预埋 CSS 变量用于运行时切换主题/* app.dbe4a8dd.css 片段 */ :root { --theme-primary: #409EFF; --theme-success: #67C23A; } .family-theme { --theme-primary: #FF6B6B; /* 家属端暖红增强情感连接 */ } .nurse-theme { --theme-primary: #4ECDC4; /* 护工端青绿传递专业与冷静 */ }在IndexHeader.vue中根据用户角色动态添加 classtemplate div :class[app-container, user.role family ? family-theme : nurse-theme] !-- 内容 -- /div /template这样同一份 CSS 文件就能支撑双主题无需构建多套样式。app.dbe4a8dd.css的哈希值不变因为变量定义在 CSS 中实际值由 HTML class 控制。5.3 利用 Source Map 追踪 CSS 生成链当npm run build失败时的救命技巧若你修改variables.scss后npm run build报错Error: Undefined variable: $elder-bg说明app.scss中某处import顺序错误。此时打开dist/css/app.dbe4a8dd.css.mapSource Map 文件用 VS Code 安装 “Import Cost” 插件将光标悬停在报错的 CSS 规则上插件会显示该规则对应的 SCSS 行号如src/assets/styles/components/_card.scss:12。这比全局搜索$elder-bg快 5 倍——因为app.scss里import了 12 个子文件错误可能在任意一个。从那以后我每次改完variables.scss都强制走一遍npm run build npm run serve再用浏览器开发者工具的 “Coverage” 面板检查app.dbe4a8dd.css的未使用代码率应低于 15%确保没引入冗余样式。这习惯帮我避开了三次因import循环导致的白屏事故。希望帮到你。本文还有配套的精品资源点击获取