基于原生JavaScript前端和 Flask 后端的Todo 应用
Demo地址：https://gitcode.com/rmbnetlife/todo-app-js-flask.git
Python Todo 应用
这是一个使用Python Flask框架开发的简单待办事项(Todo)应用，采用前后端分离架构。本项目实现了待办事项的添加、删除、状态切换等基本功能，并提供了直观的用户界面，适合作为Web开发学习示例或小型团队的任务管理工具。
项目架构
本项目采用经典的前后端分离架构：
- 后端：基于Flask的RESTful API服务，负责数据处理和存储
- 前端：纯静态HTML/CSS/JavaScript实现，通过Fetch API与后端交互
- 数据存储：使用JSON文件作为轻量级数据存储方案，无需配置数据库
项目结构
python-todo-demo/
├── backend/ # Python 后端
│ ├── app.py # Flask 主程序 - RESTful API实现
│ ├── requirements.txt # 依赖列表
│ └── todos.json # 数据存储文件（替代数据库）
│
└── frontend/ # 静态前端 ├── index.html # 前端页面 - 包含HTML结构和JavaScript逻辑└── styles.css # 样式文件 - 美化界面的CSS样式
设计逻辑
后端设计
后端采用Flask框架实现RESTful API，主要设计考虑：
- 轻量级数据存储：使用JSON文件存储数据，避免数据库配置，简化部署
- RESTful API设计：遵循REST原则，使用适当的HTTP方法和状态码
- 跨域支持：通过Flask-CORS启用CORS，支持前后端分离开发
- 错误处理：适当的错误状态码和消息返回
- ID生成策略：使用最大ID递增策略，确保ID唯一性，避免ID冲突
前端设计
前端采用原生JavaScript实现，主要设计考虑：
- 分类显示：将待办事项分为"未完成"和"已完成"两个区域，提高用户体验
- 响应式交互：支持点击切换状态、删除操作，以及回车键添加新任务
- 视觉反馈：通过样式变化（如删除线、颜色变化）提供明确的任务状态反馈
- 简洁界面：采用卡片式设计和柔和配色，提供舒适的视觉体验
功能特点
-
基本功能：
- 添加新的待办事项（支持回车键快速添加）
- 删除不需要的待办事项
- 标记待办事项为已完成/未完成
- 分类显示已完成和未完成的任务
-
技术特点：
- 基于Flask的RESTful API
- 使用JSON文件存储数据（无需数据库）
- 纯前端实现，无需服务器端渲染
- 响应式设计，操作简单直观
- 安全的ID生成策略，避免ID冲突
安装部署
环境要求
- Python 3.6+
- 支持现代JavaScript的Web浏览器
1. 克隆项目
git clone <项目仓库URL>
cd python-todo-app
2. 安装依赖
cd backend
pip install -r requirements.txt
这将安装以下依赖：
- Flask - Web框架
- Flask-CORS - 跨域资源共享支持
3. 启动后端服务
cd backend
python app.py
服务器将在 http://localhost:5000 运行，并在控制台输出调试信息
4. 访问前端页面
有两种方式可以访问前端页面：
方式一：直接打开文件（简单但可能受到CORS限制）
- 直接在浏览器中打开
frontend/index.html文件
方式二：使用简单的HTTP服务器（推荐）
# 如果安装了Python，可以使用内置的HTTP服务器
cd frontend
python -m http.server 8080
然后访问 http://localhost:8080
API接口详解
获取所有待办事项
- URL:
/api/todos - 方法:
GET - 响应: 待办事项数组
[{"id": 1,"text": "示例任务","completed": false},... ]
添加新的待办事项
- URL:
/api/todos - 方法:
POST - 请求体:
{"text": "新的待办事项" } - 响应: 新创建的待办事项，状态码201
删除指定待办事项
- URL:
/api/todos/<id> - 方法:
DELETE - 响应: 被删除的待办事项，状态码200
切换待办事项的完成状态
- URL:
/api/todos/<id>/toggle - 方法:
PUT - 响应: 更新后的待办事项，状态码200
数据存储
项目使用JSON文件(todos.json)作为数据存储，格式如下：
[{"id": 1,"text": "示例任务1","completed": false},{"id": 2,"text": "示例任务2","completed": true}
]
技术栈
-
后端：
- Python 3.6+
- Flask - Web框架
- Flask-CORS - 跨域资源共享
- JSON - 数据存储
-
前端：
- HTML5 - 页面结构
- CSS3 - 样式和布局
- JavaScript (ES6+) - 交互逻辑
- Fetch API - 网络请求
常见问题
Q: 如何修改服务器端口？
A: 在backend/app.py文件的最后一行修改port参数：
app.run(port=你想要的端口号, debug=True)
Q: 如何解决CORS（跨域）问题？
A: 项目已通过Flask-CORS处理了跨域问题。如果仍有问题，确保前端请求的URL与后端服务器地址匹配。
Q: 如何备份数据？
A: 定期复制backend/todos.json文件即可备份所有数据。
未来改进方向
- 添加用户认证系统
- 支持任务分类和标签
- 实现任务优先级和截止日期
- 添加数据库支持（如SQLite或MongoDB）
- 开发移动端应用