健康管理系统

健康管理系統

Vue3で構築された軽量な健康管理システムで、主な機能にはユーザー情報の表示、個人情報の編集、健康データの傾向の可視化が含まれています。

技術スタック

• Vue 3 (Composition API)
• Vue Router 4
• Element Plus
• Axios
• ECharts

プロジェクト構成

src/
├─ api/
│  ├─ user.js      # 用户相关API封装
│  └─ health.js    # 健康数据接口
├─ router/
│  └─ index.js     # 路由配置(含导航守卫)
├─ views/
│  ├─ HomeView.vue  # 信息展示主页
│  ├─ EditView.vue  # 信息编辑页
│  └─ ChartView.vue # 趋势图表页
└─ App.vue          # 全局布局容器

コア機能モジュール

1. ホームページ表示：ユーザーの基本情報カードを表示します。個人情報と現在の血圧値を含みます
2. 個人情報編集：個人の健康情報を編集するためのフォームインターフェースを提供します
3. 血圧トレンド図：EChartsを使用して血圧データの変化傾向を可視化します

インストールと使用方法

1. 依存関係をインストール

   npm install
   

2. ローカル開発

   npm run dev
   

3. 本番環境ビルド

   npm run build
   

API説明

システムはデモンストレーション用のモック API を使用します。主なインターフェースは以下の通りです：

• GET /api/user：ユーザー情報を取得
• PUT /api/user：ユーザー情報を更新
• GET /api/health：血圧履歴を取得
• POST /api/health：新しい血圧記録を追加