# zhangdan

**Repository Path**: ccming11/zhangdan

## Basic Information

- **Project Name**: zhangdan
- **Description**: zhangdan：专注于前端技术研究与实践的开源团队，致力于通过技术创新提升用户体验，涵盖项目包括UI组件库、工具链及性能优化方案。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-15
- **Last Updated**: 2025-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 账单记录系统

一个轻量级的日常账单记录和可视化网站，使用 Flask + HTML + CSS + JavaScript 构建。

## 功能特性

### 📊 核心功能
- **账单管理**: 添加、编辑、删除账单记录
- **数据筛选**: 按日期范围和类别筛选账单
- **数据可视化**: 使用 Chart.js 生成支出趋势折线图
- **响应式设计**: 支持桌面和移动设备

### 💡 技术特点
- **后端**: Python Flask 框架
- **前端**: 纯 HTML + CSS + JavaScript
- **数据库**: SQLite 轻量级数据库
- **图表库**: Chart.js
- **UI 框架**: Bootstrap 5
- **图标**: Font Awesome

## 项目结构

```
bill_tracker/
├── app.py                 # Flask 应用主文件
├── config.py             # 配置文件
├── requirements.txt      # Python 依赖
├── README.md            # 项目说明
├── models/
│   └── bill.py          # 数据模型
├── routes/
│   └── api.py           # API 路由
├── static/
│   ├── css/
│   │   └── style.css    # 自定义样式
│   └── js/
│       └── main.js      # 前端 JavaScript
├── templates/
│   ├── base.html        # 基础模板
│   └── index.html       # 主页面
└── database/
    └── bills.db         # SQLite 数据库（运行时生成）
```

## 快速开始

### 环境要求
- Python 3.7+
- pip

### 安装步骤

1. **克隆或下载项目**
   ```bash
   # 如果是从 git 克隆
   git clone <repository-url>
   cd bill_tracker
   ```

2. **安装依赖**
   ```bash
   pip install -r requirements.txt
   ```

3. **运行应用**
   ```bash
   python app.py
   ```

4. **访问应用**
   打开浏览器访问: http://127.0.0.1:5000

## 使用说明

### 添加账单
1. 在页面顶部的"添加新账单"表单中填写信息
2. 必填字段：日期、金额、类别
3. 可选字段：描述
4. 点击"保存账单"按钮

### 查看和管理账单
- 账单列表显示所有记录，按日期倒序排列
- 每条记录显示：日期、金额、类别、描述
- 操作按钮：编辑（铅笔图标）、删除（垃圾桶图标）

### 数据筛选
1. 使用"筛选条件"卡片中的选项
2. 可按开始日期、结束日期、类别筛选
3. 点击"应用筛选"查看结果
4. 点击"清除"重置筛选条件

### 数据可视化
- 支出趋势图显示每日支出金额的变化
- 图表会根据当前筛选条件自动更新
- 鼠标悬停查看具体数值

## API 接口

### 账单管理
- `GET /api/bills` - 获取账单列表
- `POST /api/bills` - 创建新账单
- `GET /api/bills/<id>` - 获取单个账单
- `PUT /api/bills/<id>` - 更新账单
- `DELETE /api/bills/<id>` - 删除账单

### 辅助接口
- `GET /api/bills/categories` - 获取所有类别
- `GET /api/bills/stats` - 获取统计数据

### 请求参数示例

**创建账单 (POST /api/bills)**
```json
{
    "date": "2024-01-15",
    "amount": 25.50,
    "category": "餐饮",
    "description": "午餐"
}
```

**筛选账单 (GET /api/bills)**
```
/api/bills?start_date=2024-01-01&end_date=2024-01-31&category=餐饮
```

## 配置说明

### 数据库配置
- 默认使用 SQLite 数据库
- 数据库文件位置: `database/bills.db`
- 首次运行时自动创建数据库和表

### 应用配置
在 `config.py` 中可以修改：
- 数据库连接字符串
- 应用端口和主机
- 调试模式开关

### 预设类别
系统预设了以下账单类别：
- 餐饮
- 交通
- 购物
- 娱乐
- 医疗
- 教育
- 住房
- 其他

## 开发说明

### 添加新功能
1. **后端**: 在 `routes/api.py` 中添加新的 API 端点
2. **前端**: 在 `static/js/main.js` 中添加相应的 JavaScript 函数
3. **样式**: 在 `static/css/style.css` 中添加自定义样式

### 数据验证
- 后端使用 `Bill.validate_data()` 方法进行数据验证
- 前端使用 HTML5 表单验证和 JavaScript 验证

### 错误处理
- API 返回统一的 JSON 格式响应
- 前端使用 Toast 消息显示操作结果
- 包含完整的错误日志记录

## 故障排除

### 常见问题

1. **数据库文件不存在**
   - 确保 `database` 目录存在
   - 首次运行时会自动创建数据库

2. **端口被占用**
   - 修改 `config.py` 中的 `PORT` 配置
   - 或者终止占用端口的进程

3. **依赖安装失败**
   - 确保 Python 版本 >= 3.7
   - 使用虚拟环境: `python -m venv venv`
   - 激活虚拟环境后再安装依赖

4. **图表不显示**
   - 检查网络连接（Chart.js 从 CDN 加载）
   - 确保浏览器支持 JavaScript

## 许可证

本项目仅供学习和个人使用。

## 贡献

欢迎提交 Issue 和 Pull Request 来改进项目。

---

**注意**: 这是一个演示项目，生产环境使用时请注意数据安全和性能优化。