基于Vue和Spring Boot的社区养老管理系统实战开发指南

简介一份基于JavaWeb的社区养老服务管理系统毕业设计论文文档面向计算机相关专业毕业生以及需要完成养老、智慧社区类课题的开发者。内容针对人口老龄化背景下传统养老管理方式受时空限制、效率不高的问题提出了基于B/S架构的完整解决方案前端采用Vue.js构建交互界面后端基于SpringBoot搭建轻量级服务并搭配Java运行环境、Tomcat服务器和MySQL数据库实现数据持久化。论文结构完整包含中文摘要、英文Abstract、目录以及绪论、相关技术概论、系统设计实现等章节可清晰看到从课题背景、研究意义、核心技术选型到系统落地的全过程也能为论文排版和行文提供参考。资源为1个docx文件压缩包大小7.55MB适合直接阅读、局部复用或按章节学习。目前已有38人学习对于准备社区养老服务管理系统、SpringBoot框架或Vue前端项目的同学具有一定借鉴价值。 又到了毕业设计选题的季节“社区养老管理系统”这套题年年都有不少人碰。原因其实很直白业务贴合实际场景、前端用Vue后端用Spring Boot正好踩在主流技术栈上、数据模型复杂度适中不会写两个月还交不了差。这套基于Vue和Spring Boot搭建的JavaWeb前后端分离项目核心要解决的无非三件事老人档案电子化、服务预约与工单流转、健康记录集中管理。如果你正准备复现或者二次开发一个同类系统这篇文章按实际开发顺序把这个项目从选型到部署的关键环节全部过一遍尤其是那些文档里从来不会写、但实操一定会踩的坑。1. 项目定位与整体技术选型1.1 这到底是什么业务系统社区养老服务管理系统本质上是给社区养老服务站做的一套业务流转工具。业务线一般是这样的老人或者老人的子女在平台上发起服务预约助餐、助洁、助医、陪聊、康复训练等社区管理员看到预约后分配护工护工上门完成服务后记录结果家属可以对服务进行评价同时系统里还维护着每个老人的基础档案和健康数据。这套业务看起来不复杂但实际落地时要处理的角色和状态却很考究。系统里至少要区分三种角色系统管理员、社区工作人员、护工。有的项目还要挂一个家属端也就是老人子女用的账号。论文里如果能把角色权限和状态流转讲清楚答辩的时候会顺畅很多。也正是因为角色多、流程有先后后端用Spring Boot来做接口权限控制和业务逻辑前端用Vue来做页面交互和状态展示就是一个非常合理的搭配。1.2 为什么不是JSP而是Vue Spring Boot很多老教材还在用JSPServlet那一套做JavaWeb项目毕业设计选这个方向当然不是不行但要是想兼顾“能落地”和“答辩有亮点”前后端分离几乎是目前更优的选择。原因有三第一职责清晰。前端只管渲染和交互后端只写接口返回JSON联调的时候开个Swagger或者postman就能单测接口不用再被JSP页面里的Java代码和HTML混在一起折磨。第二用人需求倒逼。现在招Java开发要求里几乎必写Vue或者ReactSpring Boot是标配。跟面试官说你会JSP跟说你会VueSpring Boot完全是两种印象分。第三部署灵活。前端打包成dist静态文件可以丢到Nginx里后端打成jar包独立运行前端挂了一个不影响后端接口维护起来省心。有人可能会纠结Vue2还是Vue3。如果论文模板对技术版本没有限制建议直接用Vue3 Element Plus Vite这套新栈如果导师比较保守或者学校提供的答辩环境只支持Node14以下那就老老实实Vue2 Element UI Vue CLI。代码上80%的内容是互通的无非是main.js挂载方式、路由创建方式、响应式API写法有差异后面如果遇到问题查Vue3官方文档基本都能解决。1.3 后端选型与数据表设计思路后端我建议用Spring Boot 2.7.x而不是3.x因为这个版本对JDK8的兼容性最好网上搜报错方案也最容易命中。持久层用MyBatis-Plus它自带分页插件、条件构造器和逻辑删除写CRUD能省掉大量重复的XML映射。如果你非要用原生MyBatis那你的Entity、Mapper、Service、Controller一套写下来代码量至少要翻一倍。数据库表设计是从一开始就要想清楚的不然做到服务预约模块就乱套了。一个最小可用的表结构大概包括用户表注意角色字段的冗余设计、老人信息表、服务项目表、预约订单表、工单表、健康档案表、评价表。老人信息和用户之间用老人ID关联预约订单和工单之间也要对应上一个预约单在派单后生成一个工单健康档案一人可以有多条按记录时间倒序取最新。至于前端页面有多少个功能后端就至少要有多少套接口顺序上我建议先把老人类、用户类的整套CRUD写完再做预约工单这条主线否则很容易被事务问题绕进去。2. 开发环境准备与工程初始化2.1 后端工程搭建和关键配置后端我用的是IDEA JDK8 Maven 3.6的组合。创建项目直接用Spring Initializr依赖上别一年选一堆够用就好。dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.9.1/version /dependency /dependencies依赖装好之后最容易被忽略的是application.yml里的配置。除了常规的数据源地址一定要把时区和编码问题一次性配好不然跑起来中文乱码、时间差8小时会来回折腾你半天。server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/community_care?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl map-underscore-to-camel-case: true global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0注意MyBatis-Plus版本别选太新部分高版本和Spring Boot 2.7搭配会出现奇怪的扫描问题。我当时就是因为自动建表的需求又去配了dynamic-datasource结果类冲突调到崩溃后来发现根本用不上动态数据源纯属自己给自己加戏。2.2 前端工程初始化与代理配置前端用Vite创建Vue3项目比Vue CLI快很多步骤也简单npm create vitelatest admin-web -- --template vue cd admin-web npm install npm install element-plus axios vue-router pinia安装依赖这一步新手最容易栽在“npm install执行到一半报错”和“下载速度慢”上。解决方案很土但有效先把npm镜像切成淘宝源再装依赖npm config set registry https://registry.npmmirror.com开发阶段的跨域问题后端项目里用CrossOrigin注解解决不了所有场景尤其是前端加了token请求头之后预检请求OPTIONS经常会被拦截器挡住。更稳妥的方案是配Vite的代理让前端请求路径以/api开头转发到后端8080端口// vite.config.js export default { server: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } }这样前端里axios的baseURL只需要写/api就不会再遇到一堆奇怪的跨域报错。这里建议所有请求路径统一加前缀等上线部署的时候同样可以用反向代理把/api转发到jar包的端口一套思路通吃开发和生产省很多事。2.3 数据库导入和初始账号数据库脚本这一步不能省我习惯先建库再建表同时把初始账号写死在SQL里而不是手工在Navicat里点CREATE DATABASE IF NOT EXISTS community_care DEFAULT CHARACTER SET utf8mb4; USE community_care; CREATE TABLE sys_user ( id bigint(20) NOT NULL AUTO_INCREMENT, username varchar(50) NOT NULL, password varchar(100) NOT NULL, real_name varchar(50) DEFAULT NULL, role varchar(20) DEFAULT staff, phone varchar(20) DEFAULT NULL, deleted tinyint(1) DEFAULT 0, PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4; INSERT INTO sys_user (username, password, real_name, role) VALUES (admin, e10adc3949ba59abbe56e057f20f883e, 系统管理员, admin), (zhang, e10adc3949ba59abbe56e057f20f883e, 张三, staff);密码这里默认用MD5e10adc3949ba59abbe56e057f20f883e就是123456演示阶段够用但真要上线建议换成BCrypt加密。实体类、Mapper、Service、Controller这一套代码只要表结构定了用MyBatis-Plus的代码生成器秒出不需要手写否则这项目做下来你大部分时间都在复制粘贴毫无价值。3. 核心功能模块实现解析3.1 登录认证与JWT拦截链路社区养老系统的登录流程和普通后台没有本质区别前端用账号密码调登录接口后端校验通过后签发一个带过期时间的JWT前端把它存在localStorage里每次请求通过axios请求拦截器带上后端用拦截器统一校验。后端的登录接口大概长这样RestController RequestMapping(/api/auth) public class AuthController { Resource private SysUserService userService; PostMapping(/login) public Result login(RequestBody LoginDTO dto) { String md5Pwd DigestUtils.md5DigestAsHex(dto.getPassword().getBytes()); SysUser user userService.lambdaQuery() .eq(SysUser::getUsername, dto.getUsername()) .eq(SysUser::getPassword, md5Pwd) .one(); if (user null) { return Result.error(用户名或密码错误); } String token JwtUtil.generateToken(user.getId(), user.getUsername(), user.getRole()); return Result.success(new LoginVO(token, user.getRealName(), user.getRole())); } }拦截器是整套登录逻辑里最容易被改崩的地方。核心套路是放行登录接口和静态资源其余接口都要先从请求头的Authorization字段里取token校验不通过就直接返回401。public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equalsIgnoreCase(request.getMethod())) { return true; } String token request.getHeader(Authorization); if (token ! null token.startsWith(Bearer )) { token token.substring(7); } try { Claims claims JwtUtil.parseToken(token); request.setAttribute(userId, claims.get(userId)); return true; } catch (Exception e) { response.setStatus(401); response.setContentType(application/json;charsetUTF-8); response.getWriter().write({\code\:401,\msg\:\未登录或登录已过期\}); return false; } } }然后注册拦截器的时候指定拦截路径/api/**排除/api/auth/login。我在第一次做这个项目时最典型的错误就是忘了用registry.addInterceptor(jwtInterceptor).addPathPatterns(/api/**).excludePathPatterns(/api/auth/login)导致登录接口本身也被拦住前端永远收到401。排查方法很简单看后端控制台有没有打印拦截器日志再看是否走的是排除列表。前端axios封装这一步也直接决定你能不能一步到位调通登录。请求拦截器里从localStorage拿token塞进header响应拦截器里判断code为401时清掉本地数据并跳到登录页service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) service.interceptors.response.use( res { if (res.data.code 401) { localStorage.clear() router.push(/login) } return res.data }, err { return Promise.reject(err) } )这里有个细节容易踩坑用了代理之后前端请求的URL应该是/api/auth/login而后端接口本身的RequestMapper路径里也是/api/auth/login两者重了。所以我一般建议用rewrite把/api前缀剥掉前端请求/api/auth/login实际转发到后端就是/auth/login这样后端接口不用额外补一个空节点。3.2 老人档案管理模块的CRUD细节老人档案管理是一个典型的管理后台子模块界面无非是搜索栏表格新增/编辑弹窗删除按钮但这里面的几个细节值得注意第一个是分页查询。Spring Boot MyBatis-Plus的分页要手动配置分页插件这个是老生常谈但每年都有一批人忘记配然后发现page.getRecords()返回全表数据或者直接报错。配置代码我建议直接放在启动类或者一个单独Config类里Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }第二个是模糊搜索。Element Plus的输入框绑定一个searchKey变量传给后端之后后端用LambdaQueryWrapper做LIKE查询PageElder page elderService.page(new Page(current, size), new LambdaQueryWrapperElder() .like(StringUtils.hasText(keyword), Elder::getName, keyword) .orderByDesc(Elder::getCreateTime));注意如果用了逻辑删除字段MyBatis-Plus会自动在SQL里加上deleted0但前提是实体类里有TableLogic注解或者全局配置了逻辑删除字段。别小看这个血泪教训我在做导出功能时想统计所有老人包括已删除的结果怎么查都少几条排查了半天才发现是逻辑删除自动加条件了。第三个是新增强校验。老人手机号、身份证号这类字段不能只靠前端校验后端也要做一层兜底。用JSR-303的NotBlank、Pattern注解能省很多if但我在实体类里直接用正则校验的更多因为毕业论文里解释起来更直白Pattern(regexp ^1[3-9]\\d{9}$, message 手机号格式不正确) private String phone;前端组件这边弹窗表单加上rules打开弹窗时用nextTick重置表单否则上次的校验提示会残留到下次打开。表格里老人年龄不要存年龄字段存出生日期页面上计算显示年龄这样数据不会随时间失真答辩时也能体现一点业务思考。3.3 预约、工单与健康档案的流程闭环养老服务的主线业务我建议做成预约单和工单两个实体。老人或者子女提交预约单社区工作人员审核后派单生成工单工单关联护工护工执行后回填服务结果。为了不让逻辑太复杂可以在预约单上加一个status字段0待审核、1已派单、2服务中、3已完成、4已取消、5已评价。这个流程看起来绕其实代码上反而是最简单的因为每个步骤就是一个update操作而已。真正复杂的是“列表页要显示关联信息”比如预约单列表里要显示老人姓名、服务项目名称、护工姓名而不是一串id。做法有两种第一种是写SQL join查出来这种最直接SELECT so.id, e.name AS elder_name, sp.name AS service_name, u.real_name AS worker_name FROM service_order so LEFT JOIN elder e ON so.elder_id e.id LEFT JOIN service_project sp ON so.service_id sp.id LEFT JOIN sys_user u ON so.worker_id u.id WHERE so.deleted 0第二种是不join查询出预约单列表后拿到所有关联id然后批量查老人、项目、用户在Java内存里组装成VO。对于小项目来说两种都行我更推荐第二种因为分页插件对自定义join的支持不如对单表操作舒服组装VO还能顺便处理空值。健康档案模块相对独立一张表存老人ID、检查日期、血压、血糖、心率、备注页面里用时间线展示或者做一个简化的折线图就能撑起一个功能点。echarts的折线图代码网上大把核心是拿后端返回的[{date, bloodPressure}, ...]数组喂给series。这里我唯一要提醒的是前端图表不要直接拿时间戳当x轴显示要格式化成YYYY-MM-DD不然图上一排13位数字非常难看。4. 项目部署上线与实战避坑指南4.1 打包部署开发完成后前端执行npm run build默认会生成一个dist目录里面是打包后的静态文件。后端执行mvn clean package -DskipTests生成可运行的jar包命令行直接java -jar就能启动。部署方案我推荐用Nginx托管前端静态文件同时把/api路径反向代理到后端端口server { listen 80; server_name your-domain.com; root /opt/community-care/dist; index index.html; location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location / { try_files $uri $uri/ /index.html; } }try_files $uri $uri/ /index.html这行一定要写否则刷新页面Vue路由走history模式时Nginx返回404。这是前后端分离部署里最经典的一个坑比CORS高频多了。4.2 高频问题排查速查表现象可能原因解决方案前端请求403/401拦截器拦了OPTIONS预检请求在拦截器里直接放行OPTIONS请求接口返回的时间是数字没配Jackson日期格式化字段加JsonFormat(patternyyyy-MM-dd HH:mm:ss)中文乱码数据库连接URL没指定编码加characterEncodingutf8表结构用utf8mb4前端页面刷新404Nginx没配try_files加上try_files $uri $uri/ /index.htmlnpm install卡死依赖源慢或缓存问题换淘宝镜像源删node_modules重装查询列表全部返回MyBatis-Plus分页插件没配置启动类加Bean分页拦截器文件上传失败没设置上传大小spring.servlet.multipart.max-file-size100MBJWT签名报错jjwt版本和JDK版本不兼容JDK8用0.9.xJDK11以上换0.11.5或调jdk版本4.3 提升答辩亮点的几个小功能基础功能做完之后强烈建议加两个不费力又能让系统上一个档次的功能。第一个是数据统计看板用echarts展示每个社区的老人数量、当月服务订单量、服务完成率。后端只需写两三个统计接口比如按月份分组统计订单量GetMapping(/stats/order) public Result orderStats() { ListMapString, Object list orderMapper.selectMaps( new QueryWrapperServiceOrder() .select(DATE_FORMAT(create_time, %Y-%m) as month, count(*) as total) .groupBy(month) ); return Result.success(list); }第二个是Excel导出。用EasyExcel工具类一个实体类注解加一行write代码就能导出一张表。论文里写“实现了社区老人名单的批量导出便于线下走访和台账留档”这句话在答辩评语里能成为亮点。第三个是权限控制。除了JWT校验登录外再给请求接口加一个简单的角色判断比如只有管理员才能调用/api/user/add通过自定义注解AOP去实现。这一块如果代码量控制得好既不会太复杂又能展示你对权限模型的理解。我把这个项目的实战经验写下来核心就是想在最后跟大家说一句做毕设项目最怕的不是代码不会写而是把时间耗在环境部署和玄学报错上。先用Postman把后端接口全部调通再动前端页面顺序反过来一旦有问题你根本分不清是接口的问题还是页面代码的问题。这套社区养老管理系统难度不高但覆盖面足够广从登录认证到分页查询再到数据统计几乎把JavaWeb开发的主流知识点都包含了。如果你时间还算充裕可以再把小程序端接上去复用后端接口毕业设计的完成度会非常可观。本文还有配套的精品资源点击获取