Demo地址：https://gitcode.com/rmbnetlife/todo-app-streamlit-py.git
Todo App (Streamlit + Flask)
一个基于 Streamlit 前端和 Flask 后端的现代化 Todo 应用，支持任务的增删改查和状态切换。经过性能优化，提供流畅的用户体验和高效的操作响应。
🏗️ 架构设计
整体架构
本项目采用前后端分离的架构模式，通过 RESTful API 进行通信：
┌─────────────────┐ HTTP/JSON ┌─────────────────┐ File I/O ┌─────────────────┐
│ Streamlit │ ◄──────────────► │ Flask API │ ◄────────────► │ JSON 存储 │
│ 前端界面 │ │ 后端服务 │ │ todos.json │
└─────────────────┘ └─────────────────┘ └─────────────────┘
核心组件
- Flask 后端: 提供 RESTful API，处理 Todo 数据的 CRUD 操作，支持数据验证和错误处理
- Streamlit 前端: 构建交互式用户界面，实现实时数据展示和用户交互
- 数据存储: 使用 JSON 文件进行数据持久化，支持热重载和数据备份
- 跨域支持: 通过 Flask-CORS 实现前后端跨域通信
📁 项目结构
todo-app-streamlit-py/
├── backend/
│ ├── app.py # Flask 后端主程序
│ └── todos.json # 数据存储文件（运行时自动生成）
├── frontend/
│ └── app.py # Streamlit 前端界面
├── requirements.txt # 项目依赖
└── README.md # 项目说明
🚀 快速开始
1. 克隆仓库
git clone https://gitcode.com/rmbnetlife/todo-app-streamlit-py.git
cd todo-app-streamlit-py
2. 安装依赖
pip install -r requirements.txt
3. 启动后端服务
cd backend
python app.py
后端服务将在 http://localhost:5000 启动
4. 启动前端界面
打开新的终端窗口：
cd frontend
streamlit run app.py
前端界面将在 http://localhost:8501 启动
✨ 功能特性
核心功能
- ✅ 任务管理: 支持添加、编辑、删除和状态切换
- ✅ 优先级设置: 高、中、低三级优先级，带颜色区分
- ✅ 截止日期: 支持设置任务截止日期，自动提醒逾期
- ✅ 智能筛选: 按优先级、状态、关键词多维度筛选
- ✅ 实时统计: 动态显示任务完成率和统计信息
- ✅ 批量操作: 支持批量标记任务完成/未完成，提升操作效率
用户体验
- 🎨 现代化UI: 渐变色彩、卡片式布局、响应式设计
- ⚡ 实时更新: 操作后界面自动刷新，无需手动刷新
- 🔍 搜索功能: 支持关键词搜索，快速定位任务
- 📱 紧凑布局: 优化间距和排版，提升视觉体验
- ⚠️ 错误处理: 友好的错误提示和连接状态检查
数据功能
- 💾 数据持久化: JSON文件存储，支持数据备份
- 🔄 状态同步: 前后端数据实时同步
- 📊 数据验证: 后端数据验证，确保数据完整性
🔧 API 接口详解
1. 获取所有任务
GET /api/todos
响应示例:
[
{
"id": 1,
"text": "完成项目文档",
"completed": false,
"priority": "高",
"due_date": "2024-01-15",
"created_at": "2024-01-10T10:30:00",
"updated_at": "2024-01-10T10:30:00"
}
]
2. 添加新任务
POST /api/todos
Content-Type: application/json
请求体:
{
"text": "任务内容",
"priority": "高|中|低",
"due_date": "2024-01-15" // 可选
}
3. 更新任务内容
PUT /api/todos/{todo_id}/update
Content-Type: application/json
请求体:
{
"text": "更新后的任务内容",
"priority": "中",
"due_date": "2024-01-20"
}
4. 切换任务状态
PUT /api/todos/{todo_id}
功能: 切换任务的完成/未完成状态
5. 删除任务
DELETE /api/todos/{todo_id}
响应: {"message": "Todo deleted"}
🛠️ 技术栈与实现原理
技术选型
| 组件 | 技术栈 | 版本 | 职责 | 优势 |
|---|---|---|---|---|
| 前端 | Streamlit | 1.28.1 | 交互界面构建 | Python原生，快速开发，自动响应式 |
| 后端 | Flask | 2.3.3 | RESTful API服务 | 轻量级，灵活扩展，丰富生态 |
| 跨域 | Flask-CORS | 4.0.0 | 跨域请求处理 | 简化前后端分离开发 |
| HTTP客户端 | Requests | 2.31.0 | API请求处理 | 简洁易用，异常处理完善 |
| 存储 | JSON | 内置 | 数据持久化 | 轻量级，易调试，跨平台 |
实现原理
后端实现 (Flask)
# 核心数据结构
todo_item = {
'id': int, # 唯一标识
'text': str, # 任务内容
'completed': bool, # 完成状态
'priority': str, # 优先级(高/中/低)
'due_date': str, # 截止日期(ISO格式)
'created_at': str, # 创建时间
'updated_at': str # 更新时间
}
关键实现特性:
- 📝 数据验证:
validate_todo_data()函数确保数据完整性 - 🔄 文件操作:
load_todos()和save_todos()处理JSON读写 - 🆔 ID生成: 自动递增ID，避免冲突
- ⏰ 时间戳: 自动记录创建和更新时间
- 🛡️ 错误处理: 统一的错误响应格式
前端实现 (Streamlit)
# 核心状态管理
st.session_state = {
'refresh_trigger': int, # 刷新触发器
'editing_{id}': bool, # 编辑状态标记
'new_todo_input': str # 输入框状态
}
关键实现特性:
- 🎛️ 状态管理: 使用
st.session_state管理组件状态 - 🔄 自动刷新:
st.rerun()实现操作后自动更新 - 🎨 CSS样式: 自定义CSS实现现代化UI设计
- 📊 实时统计: 动态计算和显示任务统计信息
- 🔍 多维筛选: 支持文本搜索、优先级和状态筛选
🎯 适用场景与扩展方向
适用场景
- 🚀 快速原型: 验证全栈应用概念，特别适合数据科学项目
- 🐍 Python全栈: 统一技术栈，降低学习和维护成本
- 👥 小团队协作: 轻量级任务管理，支持多用户访问
- 📚 学习项目: 理解前后端分离架构的最佳实践
- 🔬 内部工具: 企业内部快速搭建管理工具
扩展方向
- 🗄️ 数据库集成: 替换JSON存储为MySQL/PostgreSQL
- 👤 用户系统: 添加用户认证和权限管理
- 📱 移动适配: 优化移动端显示效果
- 🔔 消息通知: 集成邮件/微信提醒功能
- 📈 数据分析: 添加任务完成趋势分析
- 🌐 多语言: 国际化支持
- 🔄 实时同步: WebSocket实现多用户实时协作
📝 使用说明
基本操作
- 在输入框中输入待办事项内容
- 点击"➕ 添加"按钮创建新任务
- 勾选复选框将任务标记为完成
- 点击"🗑️"按钮删除不需要的任务
- 任务会自动分类显示在"未完成"和"已完成"区域
高级功能
- 使用搜索框快速查找特定任务
- 通过优先级和状态筛选器过滤任务
- 点击"编辑"按钮修改任务内容、优先级和截止日期
- 使用批量操作按钮一次性标记多个任务完成/未完成
性能优化特性
- 编辑任务时，所有修改在表单内完成，只有点击"保存"才会提交更改
- 数据加载使用缓存机制，减少不必要的API请求
- 操作后会显示成功提示，提升用户体验
🔄 开发模式与调试
热重载支持
项目支持开发时热重载，提升开发效率：
- Flask 后端:
debug=True模式，代码修改后自动重启 - Streamlit 前端: 文件变化时自动提示重新运行
调试技巧
# 后端调试
app.run(port=5000, debug=True) # 启用调试模式
# 前端调试
st.write("Debug:", variable) # 临时调试输出
st.json(data) # JSON数据可视化
日志记录
- 后端: Flask内置日志，控制台输出请求信息
- 前端: Streamlit控制台显示运行状态和错误信息
- 数据: JSON文件可直接查看和编辑
性能优化
- 🚀 缓存机制: 使用
@st.cache_data装饰器缓存API请求结果，减少不必要的后端调用 - 📦 批量操作: 支持批量标记完成/未完成，减少API调用频次
- 🔄 刷新触发器: 使用刷新触发器机制，确保数据在需要时才更新
- 📝 表单提交模式: 编辑功能改为表单提交模式，避免每次修改参数都自动刷新
- 🎭 回调函数: 使用回调函数处理状态切换、编辑和删除操作，减少页面刷新
- ⏱️ 延迟刷新: 添加成功消息提示，并使用短暂延迟让用户看到操作结果
- 🎨 CSS优化: 自定义样式提升渲染性能
📋 注意事项与故障排除
启动顺序
⚠️ 重要: 必须先启动 Flask 后端服务，再启动 Streamlit 前端
常见问题
1. 端口冲突
# 修改后端端口
app.run(port=5001, debug=True) # 改为5001端口
# 修改前端API地址
API_BASE_URL = "http://localhost:5001/api"
# 修改前端端口
streamlit run app.py --server.port 8502
2. 连接失败
- 检查Flask服务是否正常启动
- 确认防火墙设置允许本地端口访问
- 验证API_BASE_URL配置正确
3. 数据丢失
- 数据存储在
backend/todos.json文件中 - 删除此文件将清空所有数据
- 建议定期备份JSON文件
4. 样式异常
- 清除浏览器缓存
- 检查CSS样式是否正确加载
- 尝试刷新页面或重启Streamlit
部署建议
- 🐳 Docker化: 使用Docker容器化部署
- 🌐 反向代理: 使用Nginx作为反向代理
- 🔒 HTTPS: 生产环境启用SSL证书
- 📊 监控: 添加应用性能监控
🔄 代码更新与推送
本地开发工作流程
1. 拉取最新代码
# 获取远程仓库的最新更改
git pull origin main
2. 进行代码修改
- 修改前端代码：
frontend/app.py - 修改后端代码：
backend/app.py - 更新文档：
README.md - 添加新依赖：
requirements.txt
3. 查看修改状态
# 查看当前修改的文件
git status
# 查看具体修改内容
git diff
4. 提交代码
# 添加所有修改的文件
git add .
# 或者添加特定文件
git add frontend/app.py backend/app.py
# 提交修改，使用有意义的提交信息
git commit -m "功能: 添加新的任务筛选功能"
# 提交信息建议格式：
# - "功能: 描述新增功能"
# - "修复: 描述修复的问题"
# - "优化: 描述性能或代码优化"
# - "文档: 更新文档内容"
5. 推送到远程仓库
# 推送到main分支
git push origin main
分支管理（推荐）
创建功能分支
# 创建并切换到新分支
git checkout -b feature/新功能名称
# 在分支上进行开发和提交
git add .
git commit -m "功能: 实现新功能"
# 推送分支到远程
git push origin feature/新功能名称
合并分支
# 切换回main分支
git checkout main
# 拉取最新代码
git pull origin main
# 合并功能分支
git merge feature/新功能名称
# 推送合并后的代码
git push origin main
# 删除已合并的分支（可选）
git branch -d feature/新功能名称
git push origin --delete feature/新功能名称
常用Git命令
# 查看提交历史
git log --oneline
# 撤销最后一次提交（保留修改）
git reset --soft HEAD~1
# 撤销工作区的修改
git checkout -- 文件名
# 查看远程仓库信息
git remote -v
# 查看所有分支
git branch -a
注意事项
- 提交前测试: 确保代码在本地正常运行后再提交
- 有意义的提交信息: 使用清晰描述性的提交信息
- 小步提交: 频繁提交小的功能改动，而不是一次性提交大量修改
- 忽略文件: 确保
.gitignore文件正确配置，避免提交不必要的文件 - 数据备份:
backend/todos.json文件包含用户数据，已在.gitignore中排除
通过这个项目，你可以快速搭建一个现代化的全栈 Todo 应用！🎉
扫一扫
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
