本教程將指導您完成使用 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 應用程序！
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。