源代碼:
app.py
from flask import Flask, render_template, request, redirect, url_for, jsonify
import json
import osapp = Flask(__name__)# 數據存儲文件
DATA_FILE = "todos.json"def load_todos():"""從文件加載待辦事項"""if os.path.exists(DATA_FILE):try:with open(DATA_FILE, "r") as f:return json.load(f)except:return []return []def save_todos(todos):"""保存待辦事項到文件"""with open(DATA_FILE, "w") as f:json.dump(todos, f)@app.route('/')
def index():"""顯示主頁"""todos = load_todos()# 計算完成和未完成的任務數量completed = sum(1 for todo in todos if todo["done"])not_completed = len(todos) - completedreturn render_template('index.html', todos=todos, completed=completed, not_completed=not_completed)@app.route('/add', methods=['POST'])
def add_todo():"""添加新任務"""task = request.form.get('task')if task:todos = load_todos()todos.append({"task": task, "done": False})save_todos(todos)return redirect(url_for('index'))@app.route('/toggle/<int:index>')
def toggle_todo(index):"""切換任務狀態(完成/未完成)"""todos = load_todos()if 0 <= index < len(todos):todos[index]["done"] = not todos[index]["done"]save_todos(todos)return redirect(url_for('index'))@app.route('/delete/<int:index>')
def delete_todo(index):"""刪除任務"""todos = load_todos()if 0 <= index < len(todos):todos.pop(index)save_todos(todos)return redirect(url_for('index'))@app.route('/clear')
def clear_completed():"""清除已完成的任務"""todos = load_todos()# 只保留未完成的任務todos = [todo for todo in todos if not todo["done"]]save_todos(todos)return redirect(url_for('index'))if __name__ == '__main__':app.run(debug=True)
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>網頁版待辦事項</title><style>* {box-sizing: border-box;margin: 0;padding: 0;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background-color: #f5f7fa;color: #333;line-height: 1.6;padding: 20px;}.container {max-width: 800px;margin: 0 auto;background-color: #fff;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);padding: 30px;}h1 {text-align: center;margin-bottom: 30px;color: #2c3e50;}.todo-form {display: flex;margin-bottom: 20px;}.todo-form input {flex: 1;padding: 12px;border: 2px solid #ddd;border-radius: 4px;font-size: 16px;transition: border-color 0.3s;}.todo-form input:focus {border-color: #3498db;outline: none;}.todo-form button {background-color: #3498db;color: white;border: none;padding: 12px 20px;margin-left: 10px;border-radius: 4px;cursor: pointer;font-size: 16px;transition: background-color 0.3s;}.todo-form button:hover {background-color: #2980b9;}.todo-stats {display: flex;justify-content: space-between;margin-bottom: 20px;padding: 10px;background-color: #f8f9fa;border-radius: 4px;font-size: 14px;}.todo-stats span {display: inline-block;padding: 4px 8px;border-radius: 4px;}.total-tasks {background-color: #e3f2fd;color: #1976d2;}.completed-tasks {background-color: #e8f5e9;color: #388e3c;}.pending-tasks {background-color: #fff3e0;color: #f57c00;}.todo-list {list-style-type: none;}.todo-item {display: flex;align-items: center;padding: 15px;border-bottom: 1px solid #eee;transition: background-color 0.3s;}.todo-item:hover {background-color: #f9f9f9;}.todo-item.completed .todo-text {text-decoration: line-through;color: #95a5a6;}.todo-checkbox {margin-right: 15px;width: 20px;height: 20px;cursor: pointer;}.todo-text {flex: 1;font-size: 16px;}.delete-btn {background: none;border: none;color: #e74c3c;cursor: pointer;font-size: 18px;opacity: 0.7;transition: opacity 0.3s;}.delete-btn:hover {opacity: 1;}.clear-btn {display: block;margin: 20px auto 0;padding: 10px 20px;background-color: #f5f5f5;color: #e74c3c;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;}.clear-btn:hover {background-color: #ffeef0;}@media (max-width: 600px) {.container {padding: 15px;}.todo-form {flex-direction: column;}.todo-form input {margin-bottom: 10px;}.todo-form button {margin-left: 0;}}</style>
</head>
<body><div class="container"><h1>📋 待辦事項清單</h1><form class="todo-form" action="/add" method="POST"><input type="text" name="task" placeholder="添加新任務..." required><button type="submit">添加任務</button></form><div class="todo-stats"><span class="total-tasks">總任務: {{ todos|length }}</span><span class="completed-tasks">已完成: {{ completed }}</span><span class="pending-tasks">未完成: {{ not_completed }}</span></div><ul class="todo-list">{% for todo in todos %}<li class="todo-item {% if todo.done %}completed{% endif %}"><a href="{{ url_for('toggle_todo', index=loop.index0) }}"><input type="checkbox" class="todo-checkbox" {% if todo.done %}checked{% endif %}></a><span class="todo-text">{{ todo.task }}</span><a href="{{ url_for('delete_todo', index=loop.index0) }}" class="delete-btn">🗑?</a></li>{% else %}<li class="todo-item"><span class="todo-text" style="text-align: center; width: 100%;">暫無任務,添加一個吧!</span></li>{% endfor %}</ul>{% if completed > 0 %}<button class="clear-btn" onclick="location.href='{{ url_for('clear_completed') }}'">清除已完成任務</button>{% endif %}</div>
</body>
</html>
文件夾結構:
todo_web_app/
├── app.py # Flask應用主文件
├── templates/ # HTML模板文件夾
│ └── index.html # 主頁模板
└── todos.json # 數據存儲文件(自動生成)
代碼詳解:
一、項目結構設計原理
1. 為什么需要這樣的文件結構?
-
Flask框架要求:Flask遵循MVC(模型-視圖-控制器)設計模式
-
app.py
:控制器(Controller) - 處理業務邏輯 -
templates/index.html
:視圖(View) - 展示用戶界面 -
todos.json
:模型(Model) - 數據存儲
-
-
模板文件夾命名:Flask默認在
templates
文件夾中查找HTML模板文件 -
數據文件位置:JSON數據文件放在項目根目錄,便于讀寫
2. 為什么需要Web框架?
-
處理HTTP協議:管理請求/響應生命周期
-
路由管理:將URL映射到處理函數
-
模板渲染:動態生成HTML內容
-
會話管理:處理用戶狀態(本項目未使用)
二、app.py 代碼逐行詳解
# 導入必要的庫
from flask import Flask, render_template, request, redirect, url_for
import json
import os# 創建Flask應用實例
app = Flask(__name__)# 數據存儲文件
DATA_FILE = "todos.json"def load_todos():"""從文件加載待辦事項"""# 檢查文件是否存在if os.path.exists(DATA_FILE):try:# 打開文件并讀取JSON內容with open(DATA_FILE, "r") as f:return json.load(f)except:# 如果讀取失敗(如文件為空或格式錯誤),返回空列表return []# 文件不存在時返回空列表return []def save_todos(todos):"""保存待辦事項到文件"""# 將待辦事項列表寫入JSON文件with open(DATA_FILE, "w") as f:json.dump(todos, f)# 定義根路由,處理主頁請求
@app.route('/')
def index():"""顯示主頁"""# 加載待辦事項todos = load_todos()# 計算已完成任務數completed = sum(1 for todo in todos if todo["done"])# 計算未完成任務數not_completed = len(todos) - completed# 渲染index.html模板,并傳入數據return render_template('index.html', todos=todos,completed=completed,not_completed=not_completed)# 添加任務的路由,只接受POST請求
@app.route('/add', methods=['POST'])
def add_todo():"""添加新任務"""# 從表單獲取任務內容task = request.form.get('task')if task:# 加載現有任務todos = load_todos()# 添加新任務(默認為未完成)todos.append({"task": task, "done": False})# 保存更新后的任務列表save_todos(todos)# 重定向回主頁return redirect(url_for('index'))# 切換任務狀態的路由
@app.route('/toggle/<int:index>')
def toggle_todo(index):"""切換任務狀態"""todos = load_todos()# 檢查索引是否有效if 0 <= index < len(todos):# 切換完成狀態(True變False,False變True)todos[index]["done"] = not todos[index]["done"]save_todos(todos)return redirect(url_for('index'))# 刪除任務的路由
@app.route('/delete/<int:index>')
def delete_todo(index):"""刪除任務"""todos = load_todos()if 0 <= index < len(todos):# 刪除指定索引的任務todos.pop(index)save_todos(todos)return redirect(url_for('index'))# 清除已完成任務的路由
@app.route('/clear')
def clear_completed():"""清除已完成的任務"""todos = load_todos()# 創建新列表,只包含未完成的任務new_todos = [todo for todo in todos if not todo["done"]]save_todos(new_todos)return redirect(url_for('index'))# 程序入口
if __name__ == '__main__':# 確保templates文件夾存在if not os.path.exists('templates'):os.makedirs('templates')print("已創建templates文件夾")# 啟動Flask開發服務器# debug=True 表示開啟調試模式(自動重載代碼并顯示詳細錯誤)app.run(debug=True, port=5001) # 指定端口5001,避免與其他應用沖突
關鍵點解析:
-
路由系統:
-
@app.route('/')
:裝飾器將URL路徑映射到處理函數 -
動態路由
@app.route('/toggle/<int:index>')
:<int:index>
捕獲URL中的整數參數
-
-
請求方法:
-
默認只處理GET請求
-
methods=['POST']
明確指定處理POST請求
-
-
重定向模式:
-
操作后重定向回主頁(
redirect(url_for('index'))
) -
避免瀏覽器重復提交(POST/重定向/GET模式)
-
-
數據持久化:
-
load_todos()
和save_todos()
封裝數據讀寫 -
JSON格式簡單易讀,適合小型應用
-
-
調試模式:
-
app.run(debug=True)
啟用調試模式 -
修改代碼后自動重啟服務器
-
顯示詳細錯誤信息
-
三、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>網頁版待辦事項</title><style>/* 基礎樣式重置 */* {box-sizing: border-box;margin: 0;padding: 0;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}/* 頁面整體樣式 */body {background-color: #f5f7fa;color: #333;line-height: 1.6;padding: 20px;}/* 內容容器 */.container {max-width: 800px;margin: 0 auto;background-color: #fff;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);padding: 30px;}/* 標題樣式 */h1 {text-align: center;margin-bottom: 30px;color: #2c3e50;}/* 任務表單樣式 */.todo-form {display: flex;margin-bottom: 20px;}.todo-form input {flex: 1;padding: 12px;border: 2px solid #ddd;border-radius: 4px;font-size: 16px;transition: border-color 0.3s;}.todo-form input:focus {border-color: #3498db;outline: none;}.todo-form button {background-color: #3498db;color: white;border: none;padding: 12px 20px;margin-left: 10px;border-radius: 4px;cursor: pointer;font-size: 16px;transition: background-color 0.3s;}.todo-form button:hover {background-color: #2980b9;}/* 任務統計樣式 */.todo-stats {display: flex;justify-content: space-between;margin-bottom: 20px;padding: 10px;background-color: #f8f9fa;border-radius: 4px;font-size: 14px;}.todo-stats span {display: inline-block;padding: 4px 8px;border-radius: 4px;}.total-tasks {background-color: #e3f2fd;color: #1976d2;}.completed-tasks {background-color: #e8f5e9;color: #388e3c;}.pending-tasks {background-color: #fff3e0;color: #f57c00;}/* 任務列表樣式 */.todo-list {list-style-type: none;}.todo-item {display: flex;align-items: center;padding: 15px;border-bottom: 1px solid #eee;transition: background-color 0.3s;}.todo-item:hover {background-color: #f9f9f9;}/* 已完成任務樣式 */.todo-item.completed .todo-text {text-decoration: line-through;color: #95a5a6;}/* 復選框樣式 */.todo-checkbox {margin-right: 15px;width: 20px;height: 20px;cursor: pointer;}/* 任務文本樣式 */.todo-text {flex: 1;font-size: 16px;}/* 刪除按鈕樣式 */.delete-btn {background: none;border: none;color: #e74c3c;cursor: pointer;font-size: 18px;opacity: 0.7;transition: opacity 0.3s;}.delete-btn:hover {opacity: 1;}/* 清除按鈕樣式 */.clear-btn {display: block;margin: 20px auto 0;padding: 10px 20px;background-color: #f5f5f5;color: #e74c3c;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;}.clear-btn:hover {background-color: #ffeef0;}/* 響應式設計 - 小屏幕適配 */@media (max-width: 600px) {.container {padding: 15px;}.todo-form {flex-direction: column;}.todo-form input {margin-bottom: 10px;}.todo-form button {margin-left: 0;}}</style>
</head>
<body><div class="container"><h1>📋 待辦事項清單</h1><!-- 添加任務的表單 --><!-- action="/add" 表示提交到/add路由 --><!-- method="POST" 使用POST方法提交 --><form class="todo-form" action="/add" method="POST"><input type="text" name="task" placeholder="添加新任務..." required><button type="submit">添加任務</button></form><!-- 任務統計信息 --><!-- 使用Jinja2模板變量顯示統計 --><div class="todo-stats"><span class="total-tasks">總任務: {{ todos|length }}</span><span class="completed-tasks">已完成: {{ completed }}</span><span class="pending-tasks">未完成: {{ not_completed }}</span></div><!-- 任務列表 --><ul class="todo-list"><!-- 遍歷待辦事項 -->{% for todo in todos %}<!-- 根據任務狀態添加completed類 --><li class="todo-item {% if todo.done %}completed{% endif %}"><!-- 切換狀態鏈接 --><a href="{{ url_for('toggle_todo', index=loop.index0) }}"><!-- 根據狀態顯示復選框 --><input type="checkbox" class="todo-checkbox" {% if todo.done %}checked{% endif %}></a><!-- 任務內容 --><span class="todo-text">{{ todo.task }}</span><!-- 刪除任務鏈接 --><a href="{{ url_for('delete_todo', index=loop.index0) }}" class="delete-btn">🗑?</a></li><!-- 如果沒有任務 -->{% else %}<li class="todo-item"><span class="todo-text" style="text-align: center; width: 100%;">暫無任務,添加一個吧!</span></li>{% endfor %}</ul><!-- 清除已完成任務按鈕(只在有完成的任務時顯示) -->{% if completed > 0 %}<button class="clear-btn" onclick="location.href='{{ url_for('clear_completed') }}'">清除已完成任務</button>{% endif %}</div>
</body>
</html>
關鍵點解析:
-
Jinja2模板引擎:
-
{{ variable }}
:輸出變量值 -
{% for ... %}
:循環結構 -
{% if ... %}
:條件判斷 -
loop.index0
:當前循環索引(從0開始)
-
-
動態內容生成:
-
后端傳入
todos
、completed
、not_completed
等變量 -
模板根據這些數據動態生成HTML
-
-
URL生成:
-
url_for('函數名')
:生成對應路由的URL -
url_for('toggle_todo', index=loop.index0)
:生成帶參數的URL
-
-
響應式設計:
-
使用CSS媒體查詢適配不同屏幕尺寸
-
移動端優化布局
-
-
用戶交互元素:
-
表單提交:添加新任務
-
鏈接點擊:切換狀態、刪除任務
-
按鈕點擊:清除已完成任務
-
四、工作流程解析
1. 用戶訪問主頁 (GET /)
用戶請求 -> Flask路由(index函數) -> 加載數據 -> 渲染模板 -> 返回HTML
2. 用戶添加任務 (POST /add)
表單提交 -> Flask路由(add_todo函數) -> 處理數據 -> 保存到文件 -> 重定向到主頁
3. 用戶切換任務狀態 (GET /toggle/<index>)
點擊鏈接 -> Flask路由(toggle_todo函數) -> 修改狀態 -> 保存數據 -> 重定向
4. 用戶刪除任務 (GET /delete/<index>)
點擊刪除圖標 -> Flask路由(delete_todo函數) -> 刪除任務 -> 保存數據 -> 重定向
5. 用戶清除已完成任務 (GET /clear)
點擊按鈕 -> Flask路由(clear_completed函數) -> 過濾任務 -> 保存數據 -> 重定向
運行結果:
打開網址網頁版待辦事項
注:該代碼是本人自己所寫,可能不夠好,不夠簡便,歡迎大家指出我的不足之處。如果遇見看不懂的地方,可以在評論區打出來,進行討論,或者聯系我。上述內容全是我自己理解的,如果你有別的想法,或者認為我的理解不對,歡迎指出!!!如果可以,可以點一個免費的贊支持一下嗎?謝謝各位彥祖亦菲!!!!