RunLife Pro 是一个专为跑者设计的个人跑步日志管理系统。通过记录里程、配速、心率以及进阶的跑步动力学数据(垂直振幅、触地时间等),帮助跑者量化运动表现,发现更好的自己。
- 多维度记录:支持距离、时长、配速、心率、恢复心率等基础数据。
- 动态计算:自动根据距离和时间计算 平均配速 (Pace) 和 速度 (Speed)。
- 跑步动力学:支持记录步频 (SPM)、步幅、平均垂直振幅 (VO) 及平均触地时间 (GCT)。
- 环境感应:记录跑步时的气温及体感温度。
- 现代化仪表盘:基于 Element Plus 打造的响应式 UI,核心数据一目了然。
- 全栈架构:前后端分离,数据持久化存储于 MariaDB。
- 框架: Vue 3 (Script Setup + TS)
- 构建工具: Vite
- UI 组件库: Element Plus
- 图标: Lucide Vue Next
- 网络请求: Axios
RunLife/
├── run-life-api/ # NestJS 后端项目
│ ├── src/
│ │ ├── runlog/ # 跑步记录模块
│ │ │ ├── entities/ # 数据库实体定义
│ │ │ └── dto/ # 数据传输对象
│ │ └── main.ts # 入口文件 (已开启 CORS)
├── run-life-frontend/ # Vue 3 前端项目
│ ├── src/
│ │ ├── api/ # Axios 请求封装
│ │ ├── App.vue # 核心仪表盘界面
│ │ └── main.ts # Element Plus 注册
└── .gitignore # 全局 Git 忽略配置
git clone <your-repo-url>
cd RunLife- 进入目录并安装依赖:
cd run-life-api pnpm install - 配置数据库:
在 MariaDB 中创建名为
runlife的数据库,并在app.module.ts或.env中修改连接配置。 - 启动后端:
pnpm start:dev
- 进入目录并安装依赖:
cd ../run-life-frontend pnpm install - 启动开发服务器:
pnpm dev
- 访问浏览器:
http://localhost:5173
| 字段 | 类型 | 说明 |
|---|---|---|
runAt |
Timestamp | 跑步开始时间 |
dist |
Decimal | 跑步距离 (KM) |
duringTime |
Int | 持续时长 (Seconds) |
pace |
Int | 平均配速 (秒/公里) |
hr |
Int | 平均心率 (BPM) |
spm |
Int | 步频 (Steps Per Minute) |
avgVO |
Decimal | 垂直振幅 (CM) |
avgGCT |
Decimal | 触地时间 (MS) |
- CORS: 后端
main.ts已执行app.enableCors()以允许前端跨域访问。 - WSL 提示: 如遇到 Vite 缓存导致的 504 错误,请运行
rm -rf node_modules/.vite并重启。 - 配速转换: 前端会自动将数据库存储的秒数格式化为
min:sec。
- 增加跑步数据统计图表 (ECharts/Recharts)
- 增加手动录入表单对话框
- 支持按月/按周筛选记录
- 集成高德/Google 地图展示轨迹
Happy Running! 🏃♂️💨
