使用 Python 和 Flask 构建简易 TODO 任务管理系统
随着数字化办公的普及,任务管理工具已成为提升效率的重要辅助。本文将详细介绍如何使用 Python 语言结合轻量级 Web 框架 Flask,从零开始构建一个功能完备的 TODO 任务管理系统。通过本教程,你将掌握 RESTful API 的设计、前后端交互的基本原理以及 Flask 应用的基础架构。
本文介绍了如何使用 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