基于原生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，主要设计考虑：

1. 轻量级数据存储：使用JSON文件存储数据，避免数据库配置，简化部署
2. RESTful API设计：遵循REST原则，使用适当的HTTP方法和状态码
3. 跨域支持：通过Flask-CORS启用CORS，支持前后端分离开发
4. 错误处理：适当的错误状态码和消息返回
5. ID生成策略：使用最大ID递增策略，确保ID唯一性，避免ID冲突

前端设计

前端采用原生JavaScript实现，主要设计考虑：

1. 分类显示：将待办事项分为"未完成"和"已完成"两个区域，提高用户体验
2. 响应式交互：支持点击切换状态、删除操作，以及回车键添加新任务
3. 视觉反馈：通过样式变化（如删除线、颜色变化）提供明确的任务状态反馈
4. 简洁界面：采用卡片式设计和柔和配色，提供舒适的视觉体验

功能特点

• 基本功能：

  • 添加新的待办事项（支持回车键快速添加）
  • 删除不需要的待办事项
  • 标记待办事项为已完成/未完成
  • 分类显示已完成和未完成的任务

• 技术特点：

  • 基于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）
• 开发移动端应用