使用Flask构建待办事项应用

开发 Python Flask tutorial, to-do list app, web application development, Flask project setup, HTTP request handling 04-12

使用Python与Flask创建一个简单的待办事项应用

在这篇文章中，我们将使用Python和Flask框架来创建一个简单的待办事项（To-Do list）Web应用。通过这个项目，你将学会如何设置Flask应用，处理HTTP请求，并与用户的浏览器进行交互。

步骤1：设置开发环境

安装Python: 确保你的机器上安装了Python。可以通过命令 python --version 来验证。
安装虚拟环境: 创建一个虚拟环境以管理依赖关系。在项目目录下运行：
```
python -m venv venv
```
激活虚拟环境:
- Windows: venv\Scripts\activate
- macOS/Linux: source venv/bin/activate
安装Flask: 运行以下命令安装Flask。
```
pip install Flask
```

步骤2：创建Flask应用结构

在项目目录下，创建以下文件和文件夹结构：

/todo_app
   |-- app.py
   |-- templates/
       |-- index.html

步骤3：编写应用代码

在 app.py 文件中，编写如下代码：

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

# 存储待办事项的列表
todos = []

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        todo_item = request.form.get('todo')
        if todo_item:
            todos.append(todo_item)
        return redirect(url_for('index'))
    return render_template('index.html', todos=todos)

if __name__ == '__main__':
    app.run(debug=True)

步骤4：创建HTML模板

在 templates/index.html 文件中，添加以下HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
    <h1>My To-Do List</h1>
    <form method="post">
        <input type="text" name="todo" placeholder="Enter a new to-do">
        <button type="submit">Add</button>
    </form>
    <ul>
        {% for todo in todos %}
            <li>{{ todo }}</li>
        {% endfor %}
    </ul>
</body>
</html>

步骤5：运行应用

确保虚拟环境已激活，并在项目目录下运行以下命令启动Flask应用：

python app.py

打开浏览器，访问 http://127.0.0.1:5000/，你应该可以看到一个简单的待办事项应用界面。在文本框内输入待办事项内容并点击“Add”按钮，待办事项将显示在列表下方。

通过这篇教程，你成功创建了一个可以添加待办事项的简单Web应用。我们只涉及了Flask的基础功能，实际生产中可能还需要更多功能如数据库持久化、用户身份验证等，这可以在学习进阶后逐步实现。

编辑：一起学习网