本教程将指导您完成使用 Python 构建简单的待办事项列表 Web 应用程序的过程。我们将使用流行的 Python Web 框架 Flask 来构建应用程序的后端，并为前端构建 HTML、CSS 和 JavaScript。

第 1 步：搭建开发环境

在开始构建 Web 应用程序之前，您需要设置开发环境。您需要在计算机上安装以下软件：

Python 3
文本编辑器或集成开发环境 (IDE)
pip（Python 包管理器）

第 2 步：新建一个 Flask 项目

打开您的终端并为您的项目创建一个新目录：

$ mkdir todo-app
$ cd todo-app

接下来，为您的项目创建一个虚拟环境并激活它：

$ python3 -m venv venv
$ source venv/bin/activate

安装Flask：

$ pip install Flask

在您的项目目录中创建一个名为app.py的文件，并向其中添加以下代码：

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "Hello, World!"

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

第 3 步：测试 Flask 应用程序

运行Flask应用程序：

$ export FLASK_APP=app.py
$ flask run

打开您的浏览器并访问http://localhost:5000/。你应该看到“Hello, World!” 显示在页面上。

第 4 步：创建待办事项列表后端

我们现在将为待办事项列表创建后端。我们将使用 SQLite 数据库来存储待办事项。

首先，安装 Flask-SQLAlchemy 扩展：

$ pip install flask-sqlalchemy

接下来，将以下代码添加到您的app.py文件中：

from flask_sqlalchemy import SQLAlchemy

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db'
db = SQLAlchemy(app)

class Todo(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    text = db.Column(db.String(200))
    completed = db.Column(db.Boolean, default=False)

此代码设置 SQLite 数据库并创建Todo将用于存储待办事项。

第 5 步：创建待办事项列表视图和模板

我们现在将为待办事项列表创建视图和模板。

将以下代码添加到您的app.py文件中：

from flask import render_template, request

@app.route("/todos/")
def todos():
    todos = Todo.query.all()
    return render_template("todos.html", todos=todos)

@app.route("/add/", methods=["POST"])
def add():
    text = request.form.get("text")
    todo = Todo(text=text)
    db.session.add(todo)
    db.session.commit()
    return redirect(url_for("todos"))

@app.route("/complete//")
def complete(todo_id):
    todo = Todo.query.get(todo_id)
    todo.completed = True
    db.session.commit()
    return redirect(url_for("todos"))

@app.route("/delete//")
def delete(todo_id):
    todo = Todo.query.get(todo_id)
    db.session.delete(todo)
    db.session.commit()
    return redirect(url_for("todos"))

此代码创建用于显示待办事项列表、添加待办事项、将项目标记为已完成以及删除项目的视图。

第 6 步：创建待办事项列表模板

在您的项目目录中创建一个名为templates的新目录，并向其添加一个名为todos.html的新文件。

将以下 HTML 代码添加到文件中todos.html：



  
    
    To-Do List
  
  
    To-Do List
    
      
      
    
    
      {% for todo in todos %}
        
          {{ todo.text }}
          {% if todo.completed %}
            (completed)
          {% else %}
            Mark as Complete
          {% endif %}
          Delete
        
      {% endfor %}

此代码创建待办事项列表的模板。它包括用于添加新项目的表单、项目列表以及用于将项目标记为已完成和删除项目的链接。

第 7 步：创建数据库并运行应用程序

通过运行以下命令创建数据库：

$ flask shell

在 Flask shell 中，运行以下命令：

>>> from app import db
>>> db.create_all()

通过键入exit()退出 Flask shell ，然后运行以下命令以启动 Web 应用程序：

$ flask run

这将在您的本地主机上的端口 5000 上启动 Web 应用程序。您可以通过
http://127.0.0.1:5000/todos/在浏览器中访问它。

第 8 步：测试待办事项列表应用

通过添加项目、将它们标记为完成并删除它们来测试待办事项列表应用程序。

您现在应该有一个可用的待办事项列表 Web 应用程序！您可以继续添加功能并对其进行自定义以满足您的需求。

恭喜，您已经使用 Flask 和 Python 成功构建了一个待办事项列表 Web 应用程序！

用 Flask 构建一个简单的 Web 应用程序