本文介绍了如何使用 Python 和 Flask 框架开发一个简易的 TODO 任务管理系统。内容涵盖环境配置、后端 RESTful API 设计（增删改查）、前端页面交互及 AJAX 请求处理。通过示例代码展示了从项目初始化到功能实现的完整流程，帮助开发者快速掌握 Flask Web 应用的基本架构与前后端分离思路。
随着数字化办公的普及，任务管理工具已成为提升效率的重要辅助。本文将详细介绍如何使用 Python 语言结合轻量级 Web 框架 Flask，从零开始构建一个功能完备的 TODO 任务管理系统。通过本教程，你将掌握 RESTful API 的设计、前后端交互的基本原理以及 Flask 应用的基础架构。
本项目主要涉及以下技术栈：
在开始之前，请确保你的开发环境中已安装 Python 3.x 版本。接着，使用 pip 安装 Flask 依赖包：
pip install Flask
建议创建一个虚拟环境以隔离项目依赖：
python -m venv venv
# Windows 激活
venv\Scripts\activate
# macOS/Linux 激活
source venv/bin/activate
为了保持代码清晰，建议采用以下目录结构：
todo_app/
├── app.py # 主程序入口
├── templates/
│ └── index.html # 前端页面模板
├── static/
│ ├── css/
│ │ └── style.css # 自定义样式（可选）
│ └── js/
│ └── main.js # 前端逻辑脚本
└── requirements.txt # 依赖列表
首先创建 app.py 文件，引入必要的模块并初始化 Flask 实例。我们将使用内存列表模拟数据库存储，便于演示核心逻辑。
from flask import Flask, render_template, jsonify, request
from uuid import uuid4
import json
app = Flask(__name__)
# 模拟数据库存储
# 实际生产中建议使用 SQLite、MySQL 或 MongoDB
tasks = []
@app.route('/')
def index():
"""渲染主页"""
return render_template('index.html')
@app.route('/tasks', methods=['GET', 'POST'])
def handle_tasks():
"""处理任务的获取与添加"""
if request.method == 'POST':
data = request.get_json()
if not data or 'content' not in data:
return jsonify({'error': 'Content is required'}), 400
new_task = {
'id': str(uuid4()),
'content': data['content'],
'done': False,
'created_at': '2023-10-27'
}
tasks.append(new_task)
return jsonify(new_task), 201
return jsonify(tasks)
@app.route('/tasks/<task_id>', methods=['DELETE'])
def delete_task(task_id):
"""删除指定任务"""
global tasks
for i, task in enumerate(tasks):
if task['id'] == task_id:
del tasks[i]
return jsonify({'message': 'Task deleted successfully'}), 200
return jsonify({'error': 'Task not found'}), 404
if __name__ == '__main__':
app.run(debug=True)
GET /tasks: 返回所有任务列表。POST /tasks: 接收 JSON 数据创建新任务，需包含 content 字段。DELETE /tasks/<id>: 根据任务 ID 删除对应条目。前端部分负责展示任务列表并提供输入框。我们使用 Bootstrap 进行基础布局，并通过 jQuery 发送 Ajax 请求与后端通信。
在 templates/index.html 中编写页面结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO 任务管理系统</title>
<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { padding-top: 50px; background-color: #f8f9fa; }
.task-item { margin-bottom: 10px; }
.completed { text-decoration: line-through; color: gray; }
</style>
</head>
<body>
<div class="container">
<h2 class="text-center mb-4">我的 TODO 清单</h2>
<div class="input-group mb-4">
<input type="text" id="taskInput" class="form-control" placeholder="输入新任务...">
<button class="btn btn-primary" id="addBtn">添加任务</button>
</div>
<ul id="taskList" class="list-group"></ul>
</div>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 加载初始任务
loadTasks();
// 添加任务事件
$('#addBtn').click(function() {
const content = $('#taskInput').val().trim();
if (!content) return alert('请输入任务内容');
$.ajax({
url: '/tasks',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ content: content }),
success: function(response) {
renderTask(response);
$('#taskInput').val('');
},
error: function(err) {
alert('添加失败');
}
});
});
// 回车键触发添加
$('#taskInput').keypress(function(e) {
if (e.which === 13) $('#addBtn').click();
});
function () {
$.(, () {
$().();
data.( (task));
});
}
() {
li = $();
li.(, task.);
statusClass = task. ? : ;
li.();
doneBtn = $();
doneBtn.(() {
$().().().();
});
delBtn = $();
delBtn.(() {
$.({
: + task.,
: ,
: () {
li.();
}
});
});
li.(doneBtn).(delBtn);
$().(li);
}
});
</script>
</body>
</html>
完成上述代码后，在项目根目录下运行主程序：
python app.py
终端将输出类似信息：
* Running on http://127.0.0.1:5000/
打开浏览器访问 http://127.0.0.1:5000/，即可看到任务管理界面。尝试输入任务并点击添加，观察列表变化；点击删除按钮可移除任务。
本文展示了如何使用 Python 和 Flask 快速搭建一个具备增删功能的 TODO 系统。虽然当前版本使用内存存储，重启后数据会丢失，但这足以验证核心流程。
若要投入生产使用，建议进行以下改进：
通过本案例，你可以进一步探索 Flask 的其他特性，如蓝图（Blueprints）、中间件、错误处理等，从而构建更复杂的 Web 应用。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online