Day-6 flask網頁設計的基礎-2

2025 iThome 鐵人賽

DAY 6

生成式 AI

30天製作生成式AI的互動網頁專案系列第 6 篇

17th鐵人賽

max

2025-09-04 14:41:34

145 瀏覽

分享至

今天要介紹的是 flask表單以及靜態檔案的使用。

表單 (Forms)

Flask 的 form 功能主要用來處理使用者在網頁上輸入的資料，例如登入帳號、搜尋關鍵字或留言內容。表單一般透過 HTML 標籤建立，並以 GET 或 POST 方法送出。Flask 在伺服器端可利用 request.form（POST）或 request.args（GET）取得欄位資料。舉例來說，使用者輸入名稱並提交後，後端即可透過 request.form['username'] 讀取輸入值，進一步處理或回應。這讓開發者能夠很方便地收集使用者輸入並與後端邏輯結合。若搭配 Flask-WTF 之類的套件，還能支援更進階的表單驗證與安全防護。簡單來說，Flask 的 form 功能是連結前端輸入與後端程式處理的重要橋樑，使網站能夠具備互動性與動態回應能力。

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        username = request.form["username"]
        return f"Hello, {username}!"
    return f"Hello"

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

靜態檔案 (Static Files)

Flask 的靜態檔案 (Static Files) 是用來存放不需要後端程式運算、直接提供給使用者的資源，例如圖片、CSS 樣式表、JavaScript 檔案等。Flask 預設會在專案根目錄下尋找名為 static/ 的資料夾，裡面的檔案可直接透過網址 /static/檔名存取。為了避免手動拼接路徑，通常在 HTML 模板中使用 url_for('static', filename='檔案名稱') 來引用，這樣在專案結構改動時也能保持正確連結。例如在引入 CSS 或顯示圖片時，就能透過這種方式載入。靜態檔案的設計，讓前端顯示與後端邏輯分工清楚，開發者能專注於動態資料處理，同時保持網站排版與互動效果的統一。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Hello Flask!</h1>
    <img src="{{ url_for('static', filename='image.png') }}" alt="Flask Image">
</body>
</html>