python个人运动健康饮食管理系统vue3

mind526

399人浏览 · 2026-03-24 12:53:28

mind526 · 2026-03-24 12:53:28 发布

系统架构设计

采用前后端分离架构，前端使用Vue3 + TypeScript + Element Plus构建用户界面，后端使用Python的FastAPI框架提供RESTful API接口。数据库选择SQLite（开发阶段）或PostgreSQL（生产环境）。

前端实现方案

Vue3项目初始化
使用Vite创建Vue3项目模板，安装必要依赖：

npm create vite@latest health-system --template vue-ts
cd health-system
npm install element-plus axios vue-router pinia

核心功能模块划分

运动记录模块：日历视图展示运动数据，表单提交运动记录
饮食管理模块：食物数据库检索，每日营养摄入统计图表
健康指标模块：体重/BMI趋势图，生理指标记录表单
数据分析模块：ECharts可视化运动饮食关联分析

典型组件示例（运动记录表单）

<script setup lang="ts">
const form = reactive({
  activityType: 'running',
  duration: 30,
  calories: 0,
  date: new Date()
})

function calculateCalories() {
  // 根据运动类型和时长计算预估卡路里
}
</script>

<template>
  <el-form :model="form">
    <el-select v-model="form.activityType">
      <el-option value="running" label="跑步"/>
      <el-option value="swimming" label="游泳"/>
    </el-select>
    <el-input-number v-model="form.duration" :min="1"/>
    <el-button @click="calculateCalories">计算卡路里</el-button>
  </el-form>
</template>

后端实现方案

FastAPI基础配置

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class ExerciseRecord(BaseModel):
    activity_type: str
    duration: int
    calories: float
    date: str

@app.post("/api/exercises")
async def create_exercise(record: ExerciseRecord):
    # 数据库存储逻辑
    return {"status": "success"}

数据库模型设计

# models.py
from sqlalchemy import Column, Integer, String, Float, Date
from database import Base

class ExerciseRecordDB(Base):
    __tablename__ = "exercise_records"
    id = Column(Integer, primary_key=True)
    user_id = Column(Integer)
    activity_type = Column(String(50))
    duration = Column(Integer)  # 分钟
    calories = Column(Float)
    recorded_date = Column(Date)

核心API端点

POST /api/exercises - 提交运动记录
GET /api/nutrition - 获取每日营养汇总
PUT /api/body-metrics - 更新身体指标
GET /api/analytics - 获取周期分析报告

数据交互规范

请求示例（添加饮食记录）

axios.post('/api/nutrition', {
  food_id: 203,
  portion: 1.5, // 份数
  meal_type: 'lunch',
  date: '2023-07-15'
})

响应数据结构

{
  "status": "success",
  "data": {
    "total_calories": 1850,
    "macros": {
      "protein": 120,
      "carbs": 210,
      "fat": 65
    }
  }
}

开发阶段安排

基础框架搭建（1周）
- 前端项目初始化配置
- 后端API基础路由搭建
- 数据库连接测试
核心功能实现（2周）
- 运动记录CRUD功能
- 饮食数据库对接
- 基础数据可视化
增强功能开发（1周）
- 数据导出PDF功能
- 移动端响应式适配
- 推送提醒设置
测试优化阶段（1周）
- API单元测试
- 前端E2E测试
- 性能优化

关键技术栈

前端监控：使用Sentry捕获前端异常
API文档：FastAPI自动生成Swagger文档
身份验证：JWT token验证机制
部署方案：Docker容器化部署，Nginx反向代理

数据可视化方案

运动趋势图表配置

const option = {
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
  yAxis: { type: 'value' },
  series: [{
    data: [120, 200, 150],
    type: 'line',
    smooth: true
  }]
}

营养环形图

const pieOption = {
  tooltip: { trigger: 'item' },
  series: [{
    name: 'Macros',
    type: 'pie',
    radius: ['40%', '70%'],
    data: [
      { value: 1048, name: 'Protein' },
      { value: 735, name: 'Carbs' }
    ]
  }]
}

在这里插入图片描述

项目技术支持

前端开发框架:vue.js
数据库 mysql 版本不限
数据库工具：Navicat/SQLyog/ MySQL Workbench等都可以

后端语言框架支持：
1 java(SSM/springboot/Springcloud)-idea/eclipse
2.Nodejs(Express/koa)+Vue.js -vscode
3.python(django/flask)–pycharm/vscode
4.php(Thinkphp-Laravel)-hbuilderx