本教程将指导您完成使用 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 Flaskapp = 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 SQLAlchemyapp.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/<int:todo_id>/")def complete(todo_id): todo = Todo.query.get(todo_id) todo.completed = True db.session.commit() return redirect(url_for("todos"))@app.route("/delete/<int:todo_id>/")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：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>To-Do List</title> </head> <body> <h1>To-Do List</h1> <form action="{{ url_for('add') }}" method="post"> <input type="text" name="text"> <input type="submit" value="Add"> </form> <ul> {% for todo in todos %} <li> {{ todo.text }} {% if todo.completed %} (completed) {% else %} <a href="{{ url_for('complete', todo_id=todo.id) }}">Mark as Complete</a> {% endif %} <a href="{{ url_for('delete', todo_id=todo.id) }}">Delete</a> </li> {% endfor %} </ul> </body></html>
此代码创建待办事项列表的模板。它包括用于添加新项目的表单、项目列表以及用于将项目标记为已完成和删除项目的链接。
第 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 应用程序！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。