1. 项目概述
"居家养老服务小程序系统"是一款基于SpringBoot+Vue技术栈开发的移动端应用解决方案，主要面向居家养老场景下的服务需求对接与管理。该系统采用前后端分离架构，后端使用SpringBoot框架构建RESTful API，前端采用Vue.js实现微信小程序界面，通过MySQL数据库进行数据持久化存储。
作为养老服务数字化转型的典型应用，该系统实现了老人信息管理、服务预约、健康监测、紧急呼叫等核心功能模块。管理员可通过Web后台进行服务人员调度和服务质量管理，家属用户则通过微信小程序实时了解老人状况并获取服务。
2. 技术架构解析
2.1 后端技术选型
SpringBoot 2.7.x作为后端框架，主要基于以下技术考量：
- 自动配置特性简化了传统SSM框架的XML配置
- 内嵌Tomcat服务器实现开箱即用
- Starter依赖机制快速集成MyBatis、Redis等组件
- Actuator端点提供完善的系统监控能力
java复制// 典型Controller示例
@RestController
@RequestMapping("/api/service")
public class ServiceController {
@Autowired
private ServiceService serviceService;
@GetMapping("/list")
public Result getServiceList(@RequestParam Integer elderId) {
return Result.success(serviceService.getByElderId(elderId));
}
}
2.2 前端技术方案
Vue 3.x + Vant Weapp组件库构成前端技术栈：
- Composition API提升代码组织性
- Vite构建工具实现快速热更新
- Pinia状态管理替代传统Vuex
- Vant Weapp提供现成的小程序UI组件
javascript复制// 服务预约页面示例
<script setup>
import { ref } from 'vue'
import { getServiceList } from '@/api/service'
const list = ref([])
const loading = ref(false)
const loadData = async () => {
loading.value = true
try {
list.value = await getServiceList()
} finally {
loading.value = false
}
}
</script>
2.3 数据库设计
MySQL 8.0作为关系型数据库，主要表结构包括：
2.3.1 老人信息表(elder_info)
| 字段 | 类型 | 说明 |
|---|---|---|
| id | bigint | 主键 |
| name | varchar(20) | 姓名 |
| gender | tinyint | 性别 |
| birth_date | date | 出生日期 |
| health_status | varchar(50) | 健康状况 |
| family_id | bigint | 家属ID |
2.3.2 服务订单表(service_order)
| 字段 | 类型 | 说明 |
|---|---|---|
| id | bigint | 订单ID |
| elder_id | bigint | 老人ID |
| service_type | tinyint | 服务类型 |
| start_time | datetime | 开始时间 |
| end_time | datetime | 结束时间 |
| status | tinyint | 订单状态 |
3. 核心功能实现
3.1 服务预约流程
- 服务展示：按分类展示可预约服务
- 时间选择：基于日历组件实现可视化时间选择
- 服务确认：显示服务人员资质和评价
- 支付集成：对接微信支付接口
- 状态通知：通过订阅消息推送订单状态变更
java复制// 订单创建逻辑
public class OrderServiceImpl implements OrderService {
@Transactional
public Order createOrder(OrderDTO dto) {
// 1. 校验老人信息
Elder elder = elderMapper.selectById(dto.getElderId());
if(elder == null) {
throw new BusinessException("老人信息不存在");
}
// 2. 创建订单记录
Order order = new Order();
BeanUtils.copyProperties(dto, order);
order.setOrderNo(generateOrderNo());
order.setStatus(OrderStatus.UNPAID.getCode());
orderMapper.insert(order);
// 3. 发送创建通知
messageService.sendOrderCreateMsg(order);
return order;
}
}
3.2 健康监测模块
- 设备对接：通过蓝牙/WiFi连接智能穿戴设备
- 数据采集：定时获取心率、血压、血氧等指标
- 异常预警：设置阈值触发告警通知
- 趋势分析：ECharts实现健康数据可视化
javascript复制// 健康数据图表组件
<template>
<div class="health-chart">
<ve-line
:data="chartData"
:settings="chartSettings"
:extend="extend"
/>
</div>
</template>
<script setup>
const chartData = reactive({
columns: ['date', 'heartRate', 'bloodPressure'],
rows: []
})
onMounted(async () => {
const res = await getHealthData()
chartData.rows = res.data
})
</script>
4. 系统部署方案
4.1 开发环境配置
- JDK 17：使用LTS版本保证稳定性
- Node 16.x：匹配Vue3的运行时要求
- MySQL 8.0：配置utf8mb4字符集
- Redis 6.x：用于会话缓存和临时数据
4.2 生产环境部署
采用Docker Compose编排服务：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
volumes:
- mysql_data:/var/lib/mysql
redis:
image: redis:6-alpine
ports:
- "6379:6379"
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
- redis
4.3 微信小程序发布
- 开发版本：开发者工具本地调试
- 体验版本：供测试人员验证功能
- 审核版本：提交微信官方审核
- 生产版本：审核通过后全量发布
5. 项目优化实践
5.1 性能优化措施
- 接口缓存：高频查询接口添加Redis缓存
java复制@Cacheable(value = "service", key = "#type")
public List<Service> getByType(String type) {
return serviceMapper.selectByType(type);
}
- 图片压缩：使用TinyPNG API压缩上传图片
- 懒加载：长列表采用分页加载策略
- CDN加速：静态资源部署到对象存储
5.2 安全防护方案
- JWT认证：基于Token的身份验证机制
- 参数过滤：防止SQL注入和XSS攻击
- 权限控制：基于RBAC模型的权限管理
- 日志审计：记录关键操作日志
java复制// 权限拦截器示例
public class AuthInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request,
HttpServletResponse response,
Object handler) {
String token = request.getHeader("Authorization");
if(!jwtUtil.verify(token)) {
throw new AuthException("无效的访问令牌");
}
return true;
}
}
6. 典型问题解决方案
6.1 微信登录集成
-
流程设计：
- 前端调用wx.login获取code
- 后端用code向微信服务器换取openid
- 建立自有账号体系与openid的绑定关系
-
代码实现：
java复制public String wechatLogin(String code) {
// 1. 获取openid
String url = String.format(
"https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code",
appId, appSecret, code);
WechatResponse res = restTemplate.getForObject(url, WechatResponse.class);
// 2. 查询或创建用户
User user = userService.getByOpenid(res.getOpenid());
if(user == null) {
user = new User();
user.setOpenid(res.getOpenid());
userService.save(user);
}
// 3. 生成JWT
return jwtUtil.generate(user.getId());
}
6.2 实时通信方案
-
技术选型对比：
方案 优点 缺点 WebSocket 全双工通信 需要维护连接 长轮询 兼容性好 时效性差 微信订阅消息 无需连接 有模板限制 -
最终实现：
javascript复制// 建立WebSocket连接
const socket = wx.connectSocket({
url: 'wss://yourdomain.com/ws',
success() {
console.log('连接成功')
}
})
socket.onMessage((res) => {
// 处理服务端推送
})
7. 项目演进方向
- 智能推荐：基于老人画像推荐个性化服务
- 语音交互：集成语音识别简化操作
- 视频监护：安全合规的视频通话功能
- 数据分析：构建老人健康评估模型
实施建议：初期可先实现核心服务流程闭环，后续通过迭代逐步增加增值功能模块，注意遵循最小可行产品(MVP)原则控制开发成本。