Health Management Platform - Frontend

English | 简体中文

Project Overview

The frontend project of Health Management Platform, a modern health management system built with Vue 3. Provides intuitive user interfaces and rich data visualization features to help users better manage their personal health.

Tech Stack

Core Technologies

• Vue 3 - Using Composition API for better code organization and reusability
• Element Plus - Vue 3 based component library with rich UI components
• ECharts - Powerful data visualization library for health data charts
• Vuex - State management for unified application state handling
• Vue Router - Routing management
• Axios - HTTP client for backend API communication

Key Features

• Comprehensive Health Monitoring - Track heart rate, blood pressure, weight, BMI, sleep, and more
• Exercise Management - Activity logging, goal setting, and leaderboard incentives
• Diet Management - Nutrition tracking, food database, and smart analysis
• Medication Management - Medicine records and reminders
• Health Reports - Smart analysis, health scoring, and personalized recommendations
• AI Consultation - Integrated with ERNIE Bot API for health consultation
• Community Forum - Share experiences, publish articles, and interact with others

Quick Start

Prerequisites

• Node.js 20.17.0+
• npm 10.9.0+

Installation

1. Clone the repository

git clone https://github.com/nova728/healthplatform_front
cd healthplatform_front

2. Install dependencies

npm install

3. Start development server

npm run dev

4. Access the application

http://localhost:5173

Build for Production

npm run build

Project Structure

healthplatform_front/
├── src/
│   ├── api/              # API interface encapsulation
│   ├── assets/           # Static resources
│   ├── components/       # Common components
│   ├── views/            # Page views
│   │   ├── health/       # Health center pages
│   │   ├── forum/        # Community forum pages
│   │   └── user/         # User related pages
│   ├── router/           # Router configuration
│   ├── store/            # Vuex state management
│   ├── utils/            # Utility functions
│   ├── App.vue           # Root component
│   └── main.js           # Entry file
├── public/               # Public resources
├── package.json          # Project configuration
└── vite.config.js        # Vite configuration

Main Functional Modules

1. Health Data Management

• Multi-dimensional health indicator tracking
• Visual data trend charts
• Intelligent health assessment
• Data export functionality

2. Exercise Tracking

• Multiple exercise type support
• Duration and calorie statistics
• Personal goal setting
• Leaderboard and achievement system

3. Diet Management

• Nutrition intake recording
• Food database search
• Nutrition analysis and recommendations
• Meal plan management

4. Medication Management

• Medication records and reminders
• Drug information lookup
• Medication plan management

5. Health Reports

• Comprehensive health scoring
• Abnormal indicator alerts
• Historical report comparison
• Personalized health recommendations

6. Community Forum

• Article publishing and editing
• Like, bookmark, and comment features
• Topic categorization and search
• Trending content recommendations

Technical Highlights

Responsive Design

• Adapts to multiple device sizes
• Mobile-friendly user interface
• Smooth interaction experience

Data Visualization

• Rich chart types using ECharts
• Adaptive chart layout
• Interactive data exploration

Performance Optimization

• Component lazy loading
• Route lazy loading
• Image lazy loading
• Keep-alive component caching
• Request debouncing and throttling

User Experience

• Smooth page transition animations
• Friendly loading state indicators
• Comprehensive error handling
• Responsive form validation

Development Notes

Code Standards

The project uses ESLint for code checking. Ensure code meets standards:

npm run lint

Environment Configuration

Create .env.development and .env.production files in the project root:

# Development environment
VITE_API_BASE_URL=http://localhost:8080/api

# Production environment
VITE_API_BASE_URL=https://your-api-domain.com/api

API Interface Documentation

All API interfaces are encapsulated in the src/api/ directory, organized by functional modules:

• user.js - User-related interfaces
• health.js - Health data interfaces
• exercise.js - Exercise tracking interfaces
• diet.js - Diet management interfaces
• medication.js - Medication management interfaces
• forum.js - Community forum interfaces

Contributing

Issues and Pull Requests are welcome!

1. Fork this repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Related Links

• Backend Repository: healthplatform
• Desktop Application: healthplatform_electron

License

This project is licensed under the MIT License - see the LICENSE file for details

Contact

For questions or suggestions, please contact us through Issues.

---

⭐ If this project helps you, please give us a Star!