前言

上一篇做出了第一個 AI Todo 畫面，但就算 MySQL 裡已經有很多任務，網頁也完全不知道。

所以今天要把昨天做好的網頁和前面一直使用的 MySQL 接起來，讓資料庫裡的任務，可以自動顯示在Todo 頁面。

今天實際上只要改 app.py 的首頁 + index.html，資料庫不用改。

改 app.py

更改首頁 Route

@app.route("/")
def index():
    conn = get_connection()
    cursor = conn.cursor(dictionary=True)

    cursor.execute("""
        SELECT *
        FROM tasks
        WHERE status != 'done'
        ORDER BY deadline ASC
    """)

    tasks = cursor.fetchall()

    cursor.close()
    conn.close()

    return render_template("index.html", tasks=tasks)

這次查詢的方式多加了兩個條件：

WHERE status != 'done'
ORDER BY deadline ASC

WHERE status != 'done' 是先把已經完成的任務排除，因為 Todo 首頁目前主要想看到的是「還有哪些事情要做」。

ORDER BY deadline ASC 則是按照截止時間排序，Deadline 越近的任務會越前面。

查詢完成後：

tasks = cursor.fetchall()

會把 MySQL 查到的所有任務存進 tasks。

最後再透過：

return render_template("index.html", tasks=tasks)

把這些資料一起交給 index.html。

更改index.html

把原先假設的兩個任務改成

{% for task in tasks %}

<div class="task">
    <h2>{{ task.title }}</h2>

    <p>截止日期：{{ task.deadline }}</p>
    <p>重要程度：{{ task.importance }}</p>
    <p>預估時間：{{ task.estimated_minutes }} 分鐘</p>
    <p>進度：{{ task.progress }}%</p>
    <p>狀態：{{ task.status }}</p>
</div>

{% endfor %}

實際執行

這裡第一次用到 Flask 的 Jinja 模板。

{% for task in tasks %}

可以把它想成 Python 裡面的：

for task in tasks:

Flask 傳進來多少筆任務，它就會重複產生多少張 .task 卡片。

而：

{{ task.title }}

則是把目前這筆任務的 title 顯示出來。

所以像：

{{ task.deadline }}
{{ task.importance }}
{{ task.progress }}

就會分別顯示資料庫裡的截止日期、重要程度和目前進度。

這樣就不用像昨天一樣，每新增一個任務就自己再寫一組 HTML。

現在資料庫裡的任務已經可以直接顯示在網頁上，不需要每新增一筆任務就跑回去修改 HTML。

不過目前還是只能「看」。

下一篇就把前面已經完成的：

PUT /tasks/<task_id>/complete

真正搬到網頁上。

直接按一下「完成任務」，讓 MySQL 裡的 progress 變成 100、status 變成 done，完成的任務也直接從目前的 Todo 清單消失。