# cat

**Repository Path**: liuke9010/cat

## Basic Information

- **Project Name**: cat
- **Description**: cat的成长日记
- **Primary Language**: Python
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-09
- **Last Updated**: 2026-05-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: use

## README

# Cat - Django 全栈项目

一个基于 Django 5.x 的全栈应用，用于记录和管理身高体重等身体数据，支持数据记录、趋势图展示和分页浏览。

---

## 项目结构

```
cat/
├── cat/                          # Django 项目配置目录
│   ├── __init__.py
│   ├── settings.py               # 项目配置文件
│   ├── urls.py                   # 主路由配置
│   ├── asgi.py
│   └── wsgi.py
├── frontend/                     # 主应用目录
│   ├── __init__.py
│   ├── models.py                 # 数据模型
│   ├── views.py                  # 视图函数
│   ├── admin.py                  # Django Admin 注册
│   ├── apps.py
│   ├── tests.py
│   └── migrations/               # 数据库迁移文件
│       └── __init__.py
├── templates/                    # 模板文件
│   ├── welcome.html              # 欢迎页（3秒自动跳转）
│   ├── home.html                 # 首页（模块选择）
│   ├── module.html               # 通用模块页
│   └── body_data/                # 身体数据模块
│       ├── record.html           # 即时记录页
│       ├── trend.html            # 成长趋势页（Chart.js 图表）
│       └── detail.html           # 记录明细页（分页）
├── static/                       # 静态文件
│   └── favicon.svg               # 网站图标
├── manage.py                     # Django 管理脚本
├── db.sqlite3                    # SQLite 数据库文件
└── README.md                     # 项目说明文档
```

---

## 技术栈

- **后端框架**：Django 5.x
- **数据库**：SQLite3
- **前端**：原生 HTML + CSS + JavaScript
- **图表库**：Chart.js 4.x
- **环境管理**：Conda（orange 环境）
- **运行端口**：9528

---

## 功能模块

### 1. 欢迎页 (`/`)
- 紫色渐变背景，包含猫 emoji 和技术栈标签
- 3 秒倒计时自动跳转首页（支持点击"立即跳转"快速进入）
- 显示 Python、Django、HTML、CSS 等技术栈信息

### 2. 首页 (`/home/`)
- 顶部导航栏，包含四个模块入口：学习、运动、生活、娱乐
- 卡片式布局，点击对应模块进入功能页
- 响应式设计，适配移动端

### 3. 身体数据模块 (`/sport/body-data/`)

#### 即时记录 (`/sport/body-data/record/`)
- 左侧菜单导航，右侧表单区域
- 表单字段：记录人、身高（cm）、体重（kg）
- 记录时间自动获取系统当前时间（无需手动输入）
- 表单验证（必填项、数值>0）
- 保存成功显示绿色提示消息

#### 成长趋势 (`/sport/body-data/trend/`)
- 使用 Chart.js 绘制双 Y 轴折线图（左身高/右体重）
- 顶部统计卡片：最新身高、最新体重、最高身高、记录次数
- 鼠标悬停显示详细记录人信息
- 无数据时提示去记录第一条数据

#### 记录明细 (`/sport/body-data/detail/`)
- 表格展示所有记录，按时间倒序排列
- 支持分页浏览（每页 10 条）
- 删除记录前弹出确认对话框，防止误操作
- 删除后自动刷新页面

---

## 数据模型

### BodyData 模型
```python
class BodyData(models.Model):
    recorder = models.CharField('记录人', max_length=50)  # 记录人姓名
    height = models.FloatField('身高(cm)')                # 身高数值
    weight = models.FloatField('体重(kg)')                # 体重数值
    recorded_at = models.DateTimeField('记录时间')        # 记录时间
    created_at = models.DateTimeField('创建时间', auto_now_add=True)  # 自动创建时间
```

---

## 路由配置

| 路由路径 | 视图函数 | 说明 |
|---------|---------|------|
| `/` | `welcome` | 欢迎页 |
| `/home/` | `home` | 首页 |
| `/module/<str:module_key>/` | `module` | 通用模块页 |
| `/sport/body-data/record/` | `body_data_record` | 即时记录页 |
| `/sport/body-data/trend/` | `body_data_trend` | 成长趋势页 |
| `/sport/body-data/detail/` | `body_data_detail` | 记录明细页 |
| `/sport/body-data/delete/<int:pk>/` | `body_data_delete` | 删除记录 |

---

## 快速开始

### 1. 环境准备
确保已安装 Conda 并激活 orange 环境：
```bash
conda activate orange
```

### 2. 安装依赖
```bash
cd /Users/liuke/work/python/cat
pip install django
```

### 3. 数据库迁移
```bash
python manage.py makemigrations
python manage.py migrate
```

### 4. 启动开发服务器
```bash
python manage.py runserver 9528
```

### 5. 访问应用
打开浏览器访问 `http://127.0.0.1:9528/`

---

## 开发说明

### 添加新模块
1. 在 `frontend/models.py` 中定义模型
2. 在 `frontend/views.py` 中编写视图函数
3. 在 `cat/urls.py` 中添加路由
4. 在 `templates/` 中创建对应模板文件
5. 在 `MODULES` 字典中注册模块信息

### 使用 Django Admin
```bash
python manage.py createsuperuser  # 创建超级用户
python manage.py runserver 9528  # 启动服务器
```
访问 `http://127.0.0.1:9528/admin/` 登录管理后台

### 数据备份与恢复
```bash
# 备份
python manage.py dumpdata frontend > data_backup.json

# 恢复
python manage.py loaddata data_backup.json
```

---

## 设计特点

1. **响应式布局**：适配桌面端和移动端
2. **用户体验**：
   - 3秒自动跳转首页，提升流畅度
   - 表单验证实时提示，避免无效提交
   - 删除前二次确认，防止误操作
3. **数据可视化**：
   - 双 Y 轴折线图，同时展示身高和体重趋势
   - 图表支持缩放和平移，便于查看细节
4. **代码结构**：
   - 清晰的 MVC 架构
   - 统一的模块注册机制
   - 可复用的基础模板结构

---

## 未来规划

- [ ] 用户登录与认证系统
- [ ] 多用户数据隔离
- [ ] 数据导出功能（CSV/Excel）
- [ ] 提醒功能（每日打卡）
- [ ] 身体质量指数（BMI）自动计算
- [ ] 更多身体数据项（血压、心率、步数等）
- [ ] 移动端适配优化
- [ ] 主题切换（亮色/暗色）
- [ ] 运动模块功能完善
- [ ] 学习模块功能开发
- [ ] 生活模块功能开发
- [ ] 娱乐模块功能开发

---

## 许可证

本项目采用 MIT 许可证，详情请查看 LICENSE 文件。