Flask 輕量框架易於上手，適合快速開發網頁應用程式。本文介紹 Flask 的範本渲染機制，如何使用 Jinja2 範本引擎產生動態網頁內容，並說明如何有效管理與參照靜態檔案，包含 CSS、JavaScript 和圖片等。此外，文章也詳細說明 Flask 的表單處理流程，包含資料擷取、檔案上傳與安全注意事項，最後也介紹資料函式庫整合的基礎概念與實作方式，讓開發者能快速掌握 Flask 開發的技巧。
Flask 網頁應用開發：範本渲染、靜態檔案管理與表單處理
Flask 是一個輕量級且靈活的 Python 網頁框架，廣泛用於建立動態網頁應用。本文將探討 Flask 中的範本渲染、靜態檔案管理和表單處理等關鍵技術，並提供實務範例與最佳實踐建議。
範本渲染與動態內容
在 Flask 中，使用 Jinja2 範本引擎來渲染動態內容。透過將資料傳遞給範本，可以建立互動式網頁應用。
return render_template('template.html', title='Home Page',
name='John Doe', messages=['Hello', 'Hi', 'Hey'])
內容解密：
render_template函式用於渲染指定的 HTML 範本。title、name和messages是傳遞給範本的變數，用於動態生成內容。- 這種方法使應用程式能夠根據接收到的資料動態呈現內容，提高了使用者的互動體驗。
靜態檔案管理
靜態檔案（如 JavaScript、CSS 和圖片）是網頁應用的重要組成部分。正確管理這些檔案對於效能和可維護性至關重要。
靜態檔案組織結構
/YourApp
/static
/css
style.css
/js
script.js
/images
logo.png
內容解密：
- 在專案目錄中建立
static資料夾，Flask 會自動在該資料夾中尋找靜態檔案。 - 將不同型別的靜態檔案組織到子資料夾中（如
css、js和images），以提高專案結構的清晰度。
參照靜態檔案
在範本中，可以使用 url_for() 函式來生成靜態檔案的 URL：
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Company Logo">
內容解密：
url_for('static', filename='path/to/file')用於生成靜態檔案的正確路徑。- 這種方法避免了硬編碼路徑可能導致的錯誤，並提高了程式碼的可維護性。
最佳實踐
- 快取靜態檔案：對不常變更的靜態檔案實施快取，以提高重複訪客的載入速度。
- 最小化 CSS 和 JavaScript 檔案：在生產環境中最小化這些檔案，以減少載入時間和頻寬使用。
- 使用 Jinja2 範本繼承：建立一個包含網站共同元素（如頁首、頁尾和導航欄）的基礎範本，並在其他範本中擴充套件它，以減少冗餘並簡化變更管理。
<!-- base.html -->
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
<!-- home.html -->
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block body %}
<h1>歡迎來到首頁</h1>
<p>Hello, {{ name }}!</p>
{% endblock %}
內容解密：
base.html是基礎範本，定義了網站的基本結構。home.html繼承了base.html，並覆寫了title和body區塊，以實作具體頁面的內容。
表單處理與檔案上傳
表單是捕捉使用者輸入的重要方式。Flask 可以使用 request 物件無縫處理表單資料。
建立 HTML 表單
<form method="post" action="{{ url_for('handle_form') }}">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">電子郵件:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit" value="提交">
</form>
內容解密：
- 此表單收集使用者的姓名和電子郵件，並將資料傳送到指定的 Flask 路由進行處理。
- 使用
url_for('handle_form')生成表單提交的目標 URL。
處理表單資料
from flask import request, redirect, url_for
@app.route('/handle_form', methods=['POST'])
def handle_form():
name = request.form['name']
email = request.form['email']
# 在此處理或儲存表單資料
return redirect(url_for('thank_you'))
內容解密：
- 從表單欄位中擷取資料，並根據需要進行處理（如儲存到資料函式庫或傳送電子郵件）。
- 處理完成後，使用
redirect和url_for將使用者重新導向到其他頁面。
檔案上傳
允許使用者透過表單上傳檔案，需要修改表單以包含 enctype 屬性，並新增檔案輸入欄位：
<form method="post" action="{{ url_for('handle_file_upload') }}" enctype="multipart/form-data">
<label for="uploaded_file">上傳檔案:</label>
<input type="file" id="uploaded_file" name="file">
<input type="submit" value="上傳">
</form>
內容解密：
enctype="multipart/form-data"是必要的，用於告知瀏覽器如何正確封裝上傳的檔案。- 使用
input type="file"允許使用者選擇要上傳的檔案。
處理檔案上傳
import os
from werkzeug.utils import secure_filename
@app.route('/handle_file_upload', methods=['POST'])
def handle_file_upload():
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return redirect(url_for('uploaded_file', filename=filename))
return '檔案上傳失敗'
內容解密：
- 使用
secure_filename確保檔名安全，避免惡意字元。 - 使用
allowed_file函式檢查副檔名是否為允許的上傳型別。
安全注意事項
- 驗證和清理輸入資料：始終驗證和清理來自表單的輸入資料，以防止常見的安全漏洞，如 SQL 注入和跨站指令碼攻擊（XSS）。
- 使用 Flask-WTF 簡化表單處理：Flask-WTF 可以簡化表單建立和驗證過程。
- 設定最大檔案上傳大小：透過設定
MAX_CONTENT_LENGTH，可以拒絕過大的上傳請求，避免潛在的安全風險。
綜上所述，Flask 提供了一套靈活且強大的工具，用於建立動態網頁應用。透過正確使用範本渲染、靜態檔案管理和表單處理技術，可以建立高效、安全且使用者友好的網頁應用。
資料函式庫整合基礎
任何根據Flask的動態網頁應用程式，若需要永續性資料儲存，就必須進行資料函式庫整合。Flask的設計使其能夠輕易與多種資料函式庫技術整合，包括SQL和NoSQL選項，但預設情況下它並沒有物件關聯對映（ORM）或資料函式庫抽象層。在本文中，我們將探討如何使用SQLAlchemy（Python中一個著名的物件關聯對映工具）將SQL資料函式庫連線到Flask專案。
在Flask中設定SQLAlchemy
SQLAlchemy提供了一種強大且靈活的方式，透過Python模型和查詢與資料函式庫進行互動。Flask-SQLAlchemy是一個擴充套件，它以更適合Flask的方式為Flask應用程式增加了SQLAlchemy支援。
安裝Flask-SQLAlchemy
首先，你需要在你的環境中安裝Flask-SQLAlchemy：
pip install flask_sqlalchemy
組態應用程式
將資料函式庫組態設定新增到你的Flask應用程式中：
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///yourdatabase.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
在上述程式碼片段中，SQLALCHEMY_DATABASE_URI用於定義資料函式庫檔案的路徑，指定資料函式庫型別和位置。SQLALCHEMY_TRACK_MODIFICATIONS設為False以停用訊號處理，這有助於節省資源。
定義模型
SQLAlchemy中的模型用於在Python程式碼中定義資料函式庫表格的結構。它們是定義表格欄位的類別，也可以包含與資料互動的方法。
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(80), unique=True, nullable=False)
email = db.Column(db.String(120), unique=True, nullable=False)
def __repr__(self):
return '<User %r>' % self.username
在上述程式碼片段中，User是一個具有id、username和email欄位的模型。id欄位被定義為主鍵。
建立資料函式庫
定義模型後，你可以建立資料函式庫表格：
db.create_all()
此命令檢視所有繼承自db.Model的類別，如果表格不存在，則為它們建立表格。
與資料函式庫互動
SQLAlchemy允許你使用Python程式碼與資料函式庫互動，而不是寫SQL查詢，這有助於維護資料的完整性和安全性。
插入資料
new_user = User(username='johndoe', email='johndoe@gitforgits.com')
db.session.add(new_user)
db.session.commit()
此片段建立了一個新的User模型例項，並將其新增到資料函式庫會話中。db.session.commit()將所有待處理的交易提交到資料函式庫。
查詢資料
user = User.query.filter_by(username='johndoe').first()
print(user.email)
此查詢從資料函式庫中檢索第一個使用者名稱為’johndoe’的使用者，並列印其電子郵件。
更新資料
user = User.query.filter_by(username='johndoe').first()
user.email = 'newemail@gitforgits.com'
db.session.commit()
在上述程式碼片段中，使用者的電子郵件被更新，並且更改被提交到資料函式庫。
刪除資料
user = User.query.get(1) # 假設'1'是使用者的id
db.session.delete(user)
db.session.commit()
此程式碼片段透過使用者的ID檢索使用者，然後從資料函式庫中刪除該使用者。
處理關聯
SQLAlchemy也可以處理表格之間的關聯：
class Post(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
content = db.Column(db.Text, nullable=False)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
user = db.relationship('User', backref=db.backref('posts', lazy=True))
在上述程式碼中，user關聯允許我們輕易存取使用者建立的所有帖子。db.relationship()方法中的backref引數建立了一個反向關聯，可以從使用者物件存取帖子。
檢索相關資料
要檢索利用這些關聯的資料，可以執行以下操作：
user = User.query.get(1) # 取得id=1的使用者
posts = user.posts # 存取該使用者建立的所有帖子
for post in posts:
print(post.title)
此程式碼示範如何透過ID取得使用者，然後透過posts屬性存取與該使用者相關的所有帖子。此屬性由在Post模型中定義的關聯中的backref='posts'提供。
利用查詢選項
SQLAlchemy提供了多種選項來最佳化和自定義查詢，例如延遲載入、急切載入和動態載入，這些都可以幫助管理資料函式庫會話和效能：
- 延遲載入：預設行為，SQLAlchemy根據需要在單獨的查詢中載入資料。適合較小的資料函式庫或較少的關聯。
- 急切載入：使用連線和子查詢預先載入所有資料。當你知道需要所有相關資料並希望最小化查詢次數時，這很有用。
- 動態載入：將關聯設定為查詢，直到明確查詢才載入。對於較大集合的相關專案很有用。
以下是如何指定急切載入以最佳化資料檢索的範例：
from sqlalchemy.orm import joinedload
user = User.query.options(joinedload(User.posts)).filter_by(username='johndoe').first()
for post in user.posts:
print(post.title)
這種方法組態SQLAlchemy在同一查詢中載入所有相關的Post物件和User物件，這可以透過減少資料函式庫命中次數顯著提高效能。
無論你是在處理基本操作還是進階交易，SQLAlchemy都能為你提供安全有效地存取資料函式庫所需的工具。因此，這種資料函式庫連線性具有雙重作用：它提高了功能性，並保證你的Flask應用程式能夠無縫擴充套件或縮減。
