一、项目概述

1.1 项目开发背景

随着大众健康意识不断提升，人们越来越注重日常饮食、运动、身体指标监测。但大多数人缺少统一平台管理个人健康信息，健康食谱查找分散、日常饮食与运动记录杂乱，身体血压、血糖、心率等健康数据无法长期存档对比，难以直观掌握自身健康变化趋势。

为解决普通人健康信息碎片化管理难题，开发基于 SpringBoot+Vue 个人健康管理系统。系统分为前台用户门户与后台管理平台，区分普通注册用户、系统管理员两大角色。用户可以浏览健康食谱、健康资讯，记录每日饮食、运动信息，录入身体各项健康指标；管理员统一维护食谱、资讯、用户数据，并通过 ECharts 实现多维度健康数据可视化分析，帮助用户科学管理个人健康。

1.2 项目开发目标

1. 实现双端架构：面向普通用户的前台展示网站、面向运营人员的后台管理系统；

2. 角色权限划分：普通用户、系统管理员，隔离操作权限；

3. 用户账号体系：支持在线注册、登录、个人资料维护；

4. 健康内容展示：前台首页轮播、健康食谱浏览分类检索、健康资讯展示；

5. 用户个人健康台账：饮食信息记录、运动信息记录、身体健康数据登记、食谱收藏；

6. 后台内容管理：食谱类型、健康食谱、资讯信息、轮播图、全体用户健康数据统一维护；

7. 数据可视化：食谱类型占比、健康评分、饮食评分、运动评分图表统计；

8. 满足日常健康数据长期留存，方便持续追踪身体状态，为健康生活提供数据参考。

1.3 系统整体功能概述

整体采用前后端分离架构，包含两大模块：

1. 前台用户端：首页、健康食谱（分类检索、详情）、资讯信息、登录注册、个人中心（个人信息、饮食记录、运动记录、健康数据、我的收藏）；

2. 后台管理端：首页可视化大屏、食谱类型管理、健康食谱管理、资讯管理、轮播图管理、用户管理、饮食信息管理、运动信息管理、健康数据管理。

二、项目技术栈说明

2.1 后端技术（SpringBoot 服务端）

1. 核心框架：SpringBoot 2.7.x，快速搭建 RESTful API 接口，简化配置；

2. 持久层：MyBatis-Plus，封装通用 CRUD、分页、条件查询；

3. 数据库：MySQL 8.0，存储用户、食谱、饮食记录、运动记录、健康指标、资讯等全部业务数据；

4. 核心依赖组件

   • Lombok：简化实体类代码；

   • Druid：高性能数据库连接池；

   • Hutool：文件上传、日期、字符串工具；

   • JSR303：请求参数校验；

5. 安全控制：登录拦截器，未登录禁止访问权限页面；区分管理员与普通用户接口权限；

6. 文件处理：图片上传，支持食谱封面、用户头像、首页轮播图存储；

7. 统一响应：全局异常处理、统一 JSON 返回格式。

2.2 前端技术（Vue 客户端）

1. 核心框架：Vue2 + ElementUI，搭建后台管理页面；前台门户使用原生 Vue 组件开发；

2. 路由：VueRouter 实现页面跳转与路由守卫；

3. 网络请求：Axios 统一封装请求拦截、响应拦截；

4. 可视化图表：ECharts，实现饼图、折线图、柱状图数据分析大屏；

5. 富文本编辑器：食谱制作方法、资讯正文富文本编辑；

6. 通用组件：图片上传、分页、轮播组件、搜索筛选组件。

2.3 开发与部署工具

1. 开发软件：IDEA、VSCode、Navicat；

2. 项目构建：Maven 打包后端 Jar；npm 打包前端 dist 静态资源；

3. 运行环境：JDK1.8、MySQL8.0、Nginx；

4. 版本管理：Git。

三、系统需求分析

3.1 用户角色需求分析

（1）普通注册用户

1. 账号：注册、登录、修改个人基础信息（姓名、头像、身高、年龄、联系方式、性别）；

2. 前台浏览：首页轮播图、浏览健康资讯；按分类检索健康食谱、查看食谱详情；

3. 收藏功能：收藏感兴趣的健康食谱；

4. 健康台账管理：

   • 新增、查询、修改、删除每日饮食记录（热量、蛋白质、脂肪等）；

   • 新增、查询、修改、删除运动信息；

   • 录入血压、血糖、心率、体重等身体健康数据；

5. 查看个人全部历史健康记录，持续追踪身体变化。

（2）系统管理员

1. 用户管理：查看平台全部注册用户信息，查询用户健康数据；

2. 食谱管理：维护食谱类型，新增 / 编辑 / 删除健康食谱（封面、材料、功效、制作方法、适合人群）；

3. 资讯管理：新增、修改、删除健康资讯；

4. 轮播图管理：维护前台首页展示轮播图片；

5. 数据管理：查看所有用户饮食记录、运动记录、健康指标；

6. 可视化大屏：查看食谱类型统计、用户健康评分、饮食分析、运动分析图表。

3.2 功能性需求

3.2.1 登录与注册模块

1. 登录页面
   输入账号、密码，支持记住密码；区分前台用户登录入口；登录失败给出提示。

2. 注册页面
   账号、密码、确认密码、用户姓名、头像上传、性别、手机号、年龄、身高；表单校验，注册成功跳转登录页面。

3.2.2 前台首页模块

顶部导航栏：首页、健康食谱、资讯信息；大图轮播展示；下方展示健康食谱轮播列表、资讯信息列表。

3.2.3 健康食谱前台模块

左侧食谱类型分类筛选；支持食谱名称关键词搜索；卡片展示食谱封面与名称；点击进入详情查看材料、功效、制作方法，支持收藏食谱。

3.2.4 资讯信息模块

前台展示健康资讯列表，点击查看资讯完整正文。

3.2.5 用户个人中心模块

侧边菜单：个人中心、饮食信息管理、运动信息管理、我的收藏、健康数据管理；

1. 个人中心：修改账号基础信息、更换头像；

2. 饮食信息管理：按日期区间检索饮食记录，新增饮食台账（热量、蛋白质、脂肪）；

3. 运动信息管理：登记日常运动内容；

4. 健康数据管理：录入体重、血压、血糖、心率等体检指标；

5. 我的收藏：查看已收藏食谱，支持取消收藏。

3.2.6 后台可视化首页大屏

四块统计面板：食谱类型饼图分析、用户健康评分折线图、饮食评分柱状图、运动评分分析图表，直观展示平台整体健康数据分布。

3.2.7 后台健康食谱管理

食谱类型管理（新增、修改、删除分类）；健康食谱管理，弹窗新增食谱：填写食谱名称、上传封面、适合人群、材料、食谱功效、选择食谱类型、富文本录入制作方法。支持列表检索、修改、删除。

3.2.8 后台基础数据管理

资讯信息管理、轮播图管理、平台所有注册用户管理；统一管理全平台用户饮食记录、运动记录、健康数据。

3.3 非功能性需求

1. 易用性：页面布局简洁清晰，健康录入表单操作简单，适合普通大众使用；

2. 浏览器兼容：兼容 Chrome、Edge 主流浏览器，前台门户与后台页面布局正常；

3. 安全性：未登录用户禁止访问个人健康数据页面；后台接口需要管理员权限；

4. 性能：列表分页加载，图表渲染流畅；常规接口响应小于 300ms；

5. 扩展性：预留消息推送、健康预警、BMI 自动计算、数据 Excel 导出拓展接口。

四、数据库设计

数据库名称：health_manage

表 1：sys_user 用户表（普通用户、管理员）

表 2：recipe_type 食谱类型表

表 3：health_recipe 健康食谱表

表 4：user_collect 用户收藏表

表 5：diet_record 饮食记录表

表 6：sport_record 运动信息表

表 7：health_data 健康数据表

表 8：info 资讯信息表

表 9：banner 轮播图表

数据表关联关系

1. sys_user 一对多 diet_record /sport_record/health_data /user_collect：一个用户有多条饮食、运动、健康数据、收藏记录；

2. recipe_type 一对多 health_recipe：一个分类下多条食谱；

3. health_recipe 一对多 user_collect：一份食谱可被多个用户收藏。

五、系统架构设计

5.1 前后端分离三层架构

Vue 前端表现层 → SpringBoot 后端服务层 → MySQL 数据持久层

1. 前端表现层
   前台门户页面（首页、食谱、资讯、个人中心）、后台管理页面、ECharts 可视化大屏、富文本编辑器、弹窗表单；Axios 完成接口请求；路由守卫控制登录访问权限。

2. 后端服务层

• Controller：接收前端请求，参数校验，返回统一 JSON；

• Service：封装用户、食谱、饮食、运动、健康数据、统计图表业务逻辑；

• Mapper：MyBatis-Plus 操作数据库；

• Entity：数据库实体映射；

• Util：文件上传、日期、工具类；

• Config：跨域、登录拦截器、分页插件配置。

3. 持久层
   MySQL 存储全部健康业务数据，Druid 连接池管理数据库连接。

5.2 后端项目目录结构

com.health ├── config // 跨域、拦截器、分页配置 ├── controller // 接口控制器 │ ├── LoginController // 登录注册 │ ├── UserController // 用户信息 │ ├── RecipeTypeController // 食谱类型 │ ├── RecipeController // 健康食谱 │ ├── CollectController // 用户收藏 │ ├── DietController // 饮食记录 │ ├── SportController // 运动记录 │ ├── HealthDataController // 健康指标 │ ├── InfoController // 资讯 │ ├── BannerController // 轮播图 │ └── StatController // 可视化统计接口 ├── entity // 实体类 ├── mapper // Mapper接口 ├── service // 业务接口与实现类 ├── util // 通用工具 └── HealthApplication.java // 启动类

5.3 前端 Vue 目录结构

src ├── api // 接口封装 ├── components // 公共组件：上传、轮播、图表、富文本 ├── views │ ├── front // 前台门户页面(首页、食谱、资讯、个人中心) │ ├── admin // 后台管理页面(大屏、食谱管理、用户管理、数据管理) ├── router // 路由配置 ├── utils // axios封装、工具函数 └── main.js

六、核心功能模块详细设计

6.1 前台门户模块

普通用户访问前台网站，首页展示轮播图、推荐食谱、健康资讯；可以按照分类浏览健康食谱，搜索食谱名称，查看食材、功效、制作流程；浏览健康科普资讯；登录后进入个人中心管理自身健康台账。

6.2 用户个人健康台账模块

用户登录后维护个人健康信息：

1. 饮食记录：每日录入摄入热量、蛋白质、脂肪，支持按照日期范围查询历史饮食；

2. 运动记录：登记运动内容与运动日期；

3. 健康数据：录入体重、血压、血糖、心率等体检指标，系统生成健康评分；

4. 食谱收藏：看到感兴趣食谱点击收藏，统一在个人中心查看。

6.3 健康食谱管理模块（后台）

管理员先维护食谱分类，再录入健康食谱信息，上传食谱封面，填写食材、适合人群、功效，富文本编辑器编写详细制作步骤。食谱信息实时同步到前台门户供用户浏览。

6.4 资讯与轮播管理模块

管理员发布健康科普资讯；维护前台首页轮播图片，控制首页展示内容。

6.5 后台可视化数据大屏

通过 ECharts 展示多维度统计：食谱类型占比饼图、全体用户健康评分趋势、饮食评分统计、运动评分统计，帮助运营人员了解平台用户健康情况。

6.6 用户综合管理模块

管理员查看所有注册用户信息，可以查看任意用户全部饮食记录、运动记录、健康指标，统一管理平台用户数据。

七、核心业务流程

7.1 用户使用完整流程

1. 用户访问前台首页，完成账号注册、登录；

2. 浏览健康食谱、健康资讯，收藏感兴趣食谱；

3. 进入个人中心，完善身高、年龄等基础资料；

4. 日常录入饮食记录、运动记录、身体各项健康指标；

5. 随时查询历史健康台账，持续追踪身体状态变化。

7.2 管理员运营流程

1. 管理员登录后台管理系统；

2. 维护食谱分类、新增健康食谱、发布健康资讯、配置首页轮播；

3. 查看全体注册用户信息，管理用户健康数据；

4. 通过可视化大屏分析平台整体健康数据情况。

八、核心 RESTful 接口设计

1. POST /api/user/login用户登录

2. POST /api/user/register用户注册

3. GET /api/recipeType/list获取食谱分类列表

4. GET /api/recipe/list分页查询健康食谱

5. POST /api/collect/add收藏食谱

6. GET /api/diet/list查询饮食记录

7. POST /api/diet/add新增饮食记录

8. GET /api/sport/list查询运动记录

9. POST /api/healthData/add录入健康指标

10. GET /api/stat/recipeType食谱类型统计（饼图）

11. GET /api/stat/healthScore用户健康评分统计

九、系统测试

9.1 功能测试

1. 登录注册测试：表单校验、账号密码验证、未登录拦截访问个人页面；

2. 食谱模块：分类筛选、关键词搜索、详情展示、收藏功能正常；

3. 健康台账测试：新增、修改、删除饮食 / 运动 / 健康数据，日期筛选查询无误；

4. 后台管理测试：食谱、资讯、轮播图 CRUD 功能正常；

5. 可视化测试：ECharts 图表正常加载业务统计数据。

9.2 兼容性测试

Chrome、Edge 浏览器前台门户、后台管理页面布局正常，图表、富文本、图片上传组件正常使用。

9.3 性能测试

列表分页加载流畅，图表渲染无明显延迟，满足普通个人健康管理平台访问需求。

十、系统部署流程

10.1 SpringBoot 后端部署

1. Maven 执行clean package -DskipTests打包生成 Jar 包；

2. 服务器安装 JDK1.8、MySQL8.0；

3. 创建数据库health_manage，导入 SQL 建表脚本；

4. 修改 application.yml 数据库地址、账号密码、文件上传路径；

5. 使用java -jar health-manage.jar &启动后端服务；

6. 防火墙开放后端端口。

10.2 Vue 前端部署

1. 前端执行npm run build编译生成 dist 静态资源；

2. Nginx 配置，区分前台网站路由与后台管理路由；

3. Nginx 配置反向代理，/api请求转发至 SpringBoot 后端接口；

4. 启动 Nginx，分别访问前台门户地址与后台管理地址。

十一、系统优缺点与拓展方向

11.1 系统优势

1. 前后端分离标准架构，前台展示门户 + 后台管理双端，结构完整；

2. 贴合大众健康管理需求，完整实现食谱浏览、个人饮食 / 运动 / 健康指标台账；

3. 内置 ECharts 多维度可视化统计，直观展示健康相关数据；

4. 角色权限清晰，普通用户仅管理自身数据，管理员统一运营内容；

5. 富文本编辑器支持复杂食谱、资讯正文编辑，实用性强；

6. 适合毕业设计、小型线上健康科普平台二次开发使用。

11.2 后续拓展优化方向

1. BMI 自动计算：根据身高体重自动计算 BMI 健康指数；

2. 健康预警：指标超出正常范围弹窗提醒用户；

3. 运动方案智能推荐：结合身体数据推送适配运动计划；

4. 饮食热量智能分析：根据食谱自动预估每日摄入热量；

5. 健康数据导出：支持 Excel 导出个人体检、饮食台账；

6. 消息通知：定时提醒记录每日饮食与身体数据；

7. 图片 OSS 云存储：替换本地文件存储，支持分布式部署；

8. 小程序端适配：开发微信小程序，移动端随时录入健康数据。

十二、项目总结

本个人健康管理系统基于 SpringBoot+Vue 前后端分离架构开发，针对现代人群缺少统一平台管理饮食、运动、身体体检数据的痛点进行设计。系统分为前台用户门户与后台管理平台，支持用户注册登录、健康食谱浏览、健康资讯阅读；用户可以在线记录每日饮食信息、运动信息，录入血压、血糖、心率等健康指标；管理员维护食谱、资讯、轮播等公共内容，并通过可视化图表分析平台健康数据。

系统完整覆盖个人健康数字化管理基础场景，所有健康数据长期保存，方便用户持续追踪自身身体变化，帮助人们建立科学健康的生活习惯。项目代码分层规范，业务逻辑清晰，功能完整，既可以作为计算机专业毕业设计项目，也可以迭代优化后投入小型健康科普平台实际使用。

十三、项目资料

👇🏻 精彩专栏推荐订阅👇🏻 在下方专栏👇🏻不然下次找不到哟
《Java精品推荐项目》
《springboot+vue项目100套》
《ssm项目100套》
《微信小程序合集》