基于原生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. 克隆项目

bash 复制代码

git clone <项目仓库URL>
cd python-todo-app

2. 安装依赖

bash 复制代码

cd backend
pip install -r requirements.txt

这将安装以下依赖：

Flask - Web框架
Flask-CORS - 跨域资源共享支持

3. 启动后端服务

bash 复制代码

cd backend
python app.py

服务器将在 http://localhost:5000 运行，并在控制台输出调试信息

4. 访问前端页面

有两种方式可以访问前端页面：

方式一：直接打开文件（简单但可能受到CORS限制）

直接在浏览器中打开 frontend/index.html 文件

方式二：使用简单的HTTP服务器（推荐）

bash 复制代码

# 如果安装了Python，可以使用内置的HTTP服务器
cd frontend
python -m http.server 8080

然后访问 http://localhost:8080

API接口详解

获取所有待办事项

URL : /api/todos
方法 : GET

响应 : 待办事项数组

json 复制代码

[
  {
    "id": 1,
    "text": "示例任务",
    "completed": false
  },
  ...
]

添加新的待办事项

URL : /api/todos
方法 : POST
请求体 :
json 复制代码
```
{
  "text": "新的待办事项"
}
```
响应: 新创建的待办事项，状态码201

删除指定待办事项

URL : /api/todos/<id>
方法 : DELETE
响应: 被删除的待办事项，状态码200

切换待办事项的完成状态

URL : /api/todos/<id>/toggle
方法 : PUT
响应: 更新后的待办事项，状态码200

数据存储

项目使用JSON文件(todos.json)作为数据存储，格式如下：

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参数：

python 复制代码

app.run(port=你想要的端口号, debug=True)

Q: 如何解决CORS（跨域）问题？

A: 项目已通过Flask-CORS处理了跨域问题。如果仍有问题，确保前端请求的URL与后端服务器地址匹配。

Q: 如何备份数据？

A: 定期复制backend/todos.json文件即可备份所有数据。

未来改进方向

添加用户认证系统
支持任务分类和标签
实现任务优先级和截止日期
添加数据库支持（如SQLite或MongoDB）
开发移动端应用