# bs0007-Springboot敬老服务管理系统

**Repository Path**: bsRepo/bs0007

## Basic Information

- **Project Name**: bs0007-Springboot敬老服务管理系统
- **Description**: bs0007-Springboot敬老服务管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-22
- **Last Updated**: 2025-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

敬老服务系统作为面向养老服务场景的综合管理与服务平台，其前端架构采用**双应用分离设计**（后台管理端 + 前台门户），基于 Vue 3 生态栈构建，结合 Element Plus 组件库与高德地图等第三方能力，为管理员、老人、监护人、志愿者等不同角色提供了高效、易用的操作体验。本文将从系统架构、核心功能模块、技术实现等维度，全面拆解系统前端的设计与功能亮点。



## 一、系统整体架构与技术栈

### 1. 双应用架构设计

系统前端分为**后台管理端**和**前台门户**两个子应用，分别承载管理运营与用户服务的核心职责：

- **后台管理端**：面向管理员，采用「统一壳 + 动态菜单 + 业务子页面」架构，通过路由懒加载实现子页面按需加载，保障系统性能。

- **前台门户**：面向老人、监护人、志愿者等用户，采用「首页容器 + 横向菜单 + 内容区」布局，模块页面以「列表 / 详情 / 新增」三段式组织，符合用户操作习惯。

### 2. 核心技术栈

两大应用统一基于 Vue 3 生态构建，核心技术栈包括：

| 技术类别       | 具体技术 / 组件                           | 作用                                           |
| -------------- | ----------------------------------------- | ---------------------------------------------- |
| 框架与状态管理 | Vue 3、Vue Router、Vuex                   | 实现组件化开发、路由管理与全局状态维护         |
| UI 组件库      | Element Plus                              | 快速构建统一风格的页面与交互组件               |
| 网络请求       | Axios                                     | 封装接口调用，统一处理响应与异常               |
| 地图能力       | 高德地图 Vue 组件                         | 支持地址选点、地理编码与定位功能               |
| 通用能力       | 富文本编辑器、文件上传、print-js、ECharts | 提供内容编辑、文件操作、打印、图表可视化等能力 |

## 二、核心功能模块详解

### 1. 认证与权限管理

系统采用 Token 鉴权机制，为不同角色提供精细化的权限控制：

- **Token 管理**：管理端使用Token、前台使用frontToken，请求头自动附带凭证，保障接口访问安全。

- **失效处理**：当 Token 过期（401）时，自动清理本地存储并跳转登录页，前台还会记录跳转前路径，方便用户登录后返回原页面。

- **登录流程**：管理员登录时需选择角色并验证账号密码，登录成功后写入 Token、角色等信息并拉取动态菜单；前台用户（老人 / 监护人 / 志愿者）支持注册与登录，登录后进入专属个人中心。

### 2. 菜单与路由管理

- **管理端动态菜单**：菜单数据来源于后端「菜单管理」接口，登录后拉取并缓存，系统根据用户角色筛选菜单并动态注入路由，实现权限与菜单的联动。

- **前台静态菜单**：由前端配置项提供横向菜单数据，通过menuIndex缓存菜单选中状态，保障用户操作的连续性。

### 3. 核心业务模块

系统覆盖敬老服务全流程业务，核心模块在管理端与前台门户形成互补：

#### （1）通用业务模块（管理端 + 前台）

包含健康科普、活动信息、服务信息、服务预约、服务记录、活动区域、健康数据等模块，前台均提供「列表 / 详情 / 新增」操作，管理端则支持更全面的编辑、删除、分派等管理能力。

#### （2）角色专属模块

- **老人模块**：支持注册、个人中心、信息列表与详情查看，方便老人自主管理个人信息与服务预约。

- **监护人模块**：可关联老人信息，查看被监护人的服务记录与健康数据，实现远程监护。

- **志愿者模块**：提供注册、服务报名、服务记录查询等功能，助力志愿者参与养老服务。

#### （3）系统管理模块（仅管理端）

涵盖管理员管理、服务类型配置、轮播图配置、菜单管理等，为系统运营提供基础支撑。

### 4. 通用能力与组件

系统内置丰富的通用能力，提升开发效率与用户体验：

- **内容编辑**：全局注册富文本编辑器，支持课程、科普等内容的可视化编辑。

- **文件操作**：提供文件上传、Excel 导出功能，满足数据管理与报表生成需求。

- **可视化**：集成 ECharts 实现健康数据、服务统计等图表展示；高德地图组件支持服务区域定位与地址选择。

- **打印功能**：通过print-js实现页面内容的快速打印，方便纸质文档留存。

## 三、关键用户流程

### 1. 管理员操作流程

1. 访问管理端登录页，选择角色并完成账号密码验证；

1. 系统拉取个性化菜单并注入路由，进入管理首页；

1. 通过侧边菜单切换业务模块，执行数据的增删改查操作；

1. 利用富文本、导出、打印等通用能力完成日常管理工作。

### 2. 前台用户操作流程

1. 访问前台门户首页，浏览轮播图、健康科普、活动信息等内容；

1. 进行角色注册或登录，登录后进入个人中心；

1. 在对应模块完成服务预约、记录查询、信息编辑等操作；

1. 退出登录后，系统保留菜单选中状态，再次访问时可快速恢复操作上下文。

## ![img](https://i-blog.csdnimg.cn/direct/905bcd6785624684a46d5389a643e103.png)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)编辑![img](https://i-blog.csdnimg.cn/direct/8cc81cd7fa834972860c89976de34192.png)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)编辑![img](https://i-blog.csdnimg.cn/direct/9fcaa718ca734d108ce5251a3db376a8.png)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)编辑![img](https://i-blog.csdnimg.cn/direct/33b4f65447e74e5386083137740d1fce.png)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)编辑