iT邦幫忙

2025 iThome 鐵人賽

DAY 6
0
生成式 AI

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

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

  • 分享至 

  • xImage
  •  

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

  1. 表單 (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)


  1. 靜態檔案 (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>


上一篇
Day-5 flask網頁設計的基礎-1
下一篇
Day-7 HTML網頁的基礎-1
系列文
30天製作生成式AI的互動網頁專案7
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言