当前位置：首页 > news >正文

SpringBoot+Vue养老公寓管理系统开发实践

news 2026/8/10 3:37:53

1. 项目概述：夕阳红公寓管理系统的技术架构与价值

夕阳红公寓管理系统是一款面向养老机构的管理软件，采用前后端分离架构实现。后端基于Java技术栈构建，使用SpringBoot框架简化开发流程，MyBatis作为持久层框架；前端采用Vue.js配合ElementUI组件库，数据库选用MySQL关系型数据库。这套技术组合在中小型Web应用中具有显著优势：SpringBoot的自动配置特性让后端服务快速启动，Vue+ElementUI的组合则能快速构建美观的管理界面。

这个系统主要解决养老机构日常管理中的三大痛点：一是入住老人信息管理混乱的问题，二是护理排班效率低下的问题，三是费用结算容易出错的问题。通过数字化管理，可以将入住登记、护理记录、费用结算等流程的效率提升60%以上。特别适合50-200床位的养老机构使用，既不需要支付高昂的商业软件费用，又能获得定制化的管理功能。

2. 技术选型与架构设计

2.1 后端技术栈解析

SpringBoot 2.7.x版本是这个项目的核心框架选择。相比传统SSM架构，SpringBoot内置Tomcat服务器，通过starter依赖简化了配置工作。我们特别使用了spring-boot-starter-web处理HTTP请求，spring-boot-starter-aop实现操作日志记录，以及spring-boot-starter-test保证代码质量。

MyBatis 3.5.x作为ORM框架，配合pagehelper分页插件和MyBatis Generator代码生成器使用。这种组合特别适合需要复杂SQL查询的场景，比如老人健康档案的多表关联查询。在application.yml中配置的MyBatis参数如下：

mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.sunset.home.entity configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

2.2 前端技术方案

Vue 2.6.x作为前端框架，配合Vue Router和Vuex实现路由管理和状态管理。ElementUI 2.15.x提供了一套完整的UI组件，特别适合管理后台类应用。我们重用了以下关键组件：

el-table展示老人列表数据
el-form处理入住登记表单
el-calendar展示护理排班
el-menu构建系统导航

前端项目结构采用标准Vue-cli生成模式，但增加了API请求的全局拦截器处理：

// src/utils/request.js import axios from 'axios' import { Message } from 'element-ui' const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }) service.interceptors.response.use( response => { const res = response.data if (res.code !== 200) { Message.error(res.message || 'Error') return Promise.reject(new Error(res.message || 'Error')) } return res } )

2.3 数据库设计要点

MySQL 5.7作为关系型数据库，设计了约20张核心表。其中老人信息表（resident）和护理记录表（care_record）是最关键的两张表：

CREATE TABLE `resident` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL, `gender` tinyint(1) DEFAULT '1', `birth_date` date NOT NULL, `id_card` varchar(18) NOT NULL, `room_id` int(11) NOT NULL, `check_in_date` date NOT NULL, `health_status` varchar(200) DEFAULT NULL, `emergency_contact` varchar(20) NOT NULL, `emergency_phone` varchar(11) NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `id_card_UNIQUE` (`id_card`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

注意：养老系统的数据库设计要特别注意隐私字段加密，身份证号等敏感信息应当进行脱敏处理

3. 核心功能模块实现

3.1 老人信息管理模块

采用RBAC权限模型控制访问，前端使用el-table展示分页数据，后端提供RESTful API。关键实现点包括：

照片上传使用阿里云OSS存储
健康信息采用JSON格式灵活存储
使用Hutool工具类处理身份证校验：

// 身份证校验工具方法 public static boolean validateIdCard(String idCard) { if(StrUtil.isBlank(idCard)) { return false; } return IdcardUtil.isValidCard(idCard); }

前端实现搜索功能时，使用了ElementUI的表单验证和防抖处理：

<el-form :model="queryParams" ref="queryForm"> <el-form-item prop="name"> <el-input v-model="queryParams.name" placeholder="请输入老人姓名" clearable @keyup.enter.native="handleQuery" /> </el-form-item> </el-form> <script> methods: { handleQuery: _.debounce(function() { this.getList(); }, 500) } </script>

3.2 护理排班系统

排班功能是本系统的创新点，采用日历视图展示排班情况。后端设计了排班规则引擎：

白班/夜班两种班次类型
护理员技能等级匹配机制
自动冲突检测算法

前端使用el-calendar组件配合自定义内容插槽：

<el-calendar> <template #dateCell="{date, data}"> <div class="shift-item" v-for="item in getShiftData(date)" :key="item.id"> {{ item.staffName }} ({{ item.shiftType }}) </div> </template> </el-calendar>

3.3 费用结算模块

费用计算涉及多个业务规则：

基础床位费（按月计算）
护理等级附加费
医疗耗材费用
临时服务费用

采用策略模式实现费用计算规则：

public interface FeeCalculateStrategy { BigDecimal calculate(Resident resident, Date startDate, Date endDate); } @Service public class BasicBedFeeStrategy implements FeeCalculateStrategy { @Override public BigDecimal calculate(Resident resident, Date startDate, Date endDate) { // 计算基础床位费逻辑 } }

4. 系统部署与运维

4.1 后端部署方案

采用Docker容器化部署，docker-compose.yml配置如下：

version: '3' services: sunset-mysql: image: mysql:5.7 environment: MYSQL_ROOT_PASSWORD: sunset@123 MYSQL_DATABASE: sunset_home ports: - "3306:3306" volumes: - ./mysql/data:/var/lib/mysql sunset-backend: build: ./backend ports: - "8080:8080" depends_on: - sunset-mysql

4.2 前端部署优化

通过nginx配置生产环境部署，优化静态资源加载：

server { listen 80; server_name sunset.home; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://sunset-backend:8080; proxy_set_header Host $host; } gzip on; gzip_types text/plain application/javascript application/x-javascript text/css; }

4.3 系统监控方案

SpringBoot Actuator暴露健康检查端点
Prometheus + Grafana监控JVM指标
ELK日志收集系统

5. 开发中的典型问题与解决方案

5.1 MyBatis一对多查询性能优化

老人信息关联护理记录时出现的N+1查询问题，通过以下方式解决：

<resultMap id="residentWithCareRecords" type="Resident"> <collection property="careRecords" ofType="CareRecord" select="selectCareRecordsByResidentId" column="id"/> </resultMap> <select id="selectCareRecordsByResidentId" resultType="CareRecord"> SELECT * FROM care_record WHERE resident_id = #{id} ORDER BY record_time DESC LIMIT 10 </select>

5.2 Vue组件数据更新问题

当使用ElementUI表格嵌套表单时，数据绑定失效的解决方案：

<el-table :data="tableData"> <el-table-column prop="name" label="姓名"/> <el-table-column label="操作"> <template #default="{row}"> <el-input v-model="row.editValue" @change="handleEdit(row)"/> </template> </el-table-column> </el-table> <script> methods: { handleEdit(row) { this.$set(this.tableData, this.tableData.indexOf(row), { ...row }) } } </script>

5.3 SpringBoot事务管理

在费用结算这种多表操作中，必须正确使用事务：

@Service @RequiredArgsConstructor public class PaymentServiceImpl implements PaymentService { private final ResidentMapper residentMapper; private final PaymentRecordMapper paymentRecordMapper; @Transactional(rollbackFor = Exception.class) @Override public void settleAccounts(SettleDTO settleDTO) { // 1. 更新老人账户余额 // 2. 创建缴费记录 // 3. 生成账单 } }