Python Web開發：Flask輕量級框架快速上手

Flask框架 Python Web開發 Flask框架 Web開發入門 Flask教程 輕量級Web框架 2025-12-20 10 閱讀

一、什麼是Flask？

在開始之前，我們先來理解一下“Web框架”是什麼。簡單來說，Web框架就是幫你快速開發網站或Web應用的工具集合，它封裝了很多重複的工作（比如處理HTTP請求、路由管理、模板渲染等），讓你專注於業務邏輯。

Flask是一個輕量級的Python Web框架，由Armin Ronacher開發。它的特點是：

  • 輕量靈活：沒有強制的項目結構和組件，你可以按需添加功能。
  • 學習成本低：語法簡潔，適合初學者快速上手。
  • 擴展性強：可以通過擴展（如Flask-SQLAlchemy處理數據庫、Flask-Login處理用戶認證）實現更復雜的功能。

如果你想快速搭建一個小型網站、API接口，或者作爲學習Web開發的起點，Flask是非常好的選擇。

二、環境搭建

安裝Flask

首先確保你的電腦已經安裝了Python（推薦Python 3.6+）。打開命令行工具，執行以下命令安裝Flask：

pip install flask

安裝完成後，可以通過以下命令驗證是否安裝成功：

flask --version

如果顯示類似 Flask 2.3.3, Python 3.9.7 的信息，說明安裝成功。

三、第一個Flask應用

編寫“Hello World”

創建一個新的Python文件（比如 app.py），寫入以下代碼：

from flask import Flask

# 創建Flask應用實例
app = Flask(__name__)

# 定義路由：當訪問根路徑 '/' 時，執行下面的函數
@app.route('/')
def index():
    return "Hello, Flask!"  # 返回響應內容

# 啓動應用（僅在直接運行該文件時生效）
if __name__ == '__main__':
    app.run(debug=True)  # debug=True 開啓調試模式（開發時用，生產環境關閉）

運行應用

在命令行中進入 app.py 所在的目錄，執行：

python app.py

然後打開瀏覽器訪問 http://127.0.0.1:5000，你會看到頁面顯示 Hello, Flask!。

代碼解析

  • Flask(__name__)：創建應用實例，__name__ 是Python內置變量，表示當前模塊的名稱，Flask用它來定位資源路徑。
  • @app.route('/')：路由裝飾器，將URL路徑 / 與下面的函數 index() 綁定。當用戶訪問 / 時，會自動執行 index() 函數。
  • app.run(debug=True)：啓動Flask開發服務器，debug=True 會在代碼修改後自動重啓服務器，並顯示錯誤信息（生產環境需關閉）。

四、路由與視圖函數

基本路由

路由是URL與函數的映射關係。除了根路徑 /，你還可以定義其他路徑：

@app.route('/about')  # 訪問 http://127.0.0.1:5000/about
def about():
    return "關於我們的頁面"

@app.route('/user/<username>')  # 帶參數的路由，<username> 是動態參數
def user_profile(username):
    return f"歡迎 {username} 的個人主頁"

訪問 http://127.0.0.1:5000/user/張三，頁面會顯示 歡迎 張三 的個人主頁。

路由參數類型

Flask支持多種參數類型，比如整數、浮點數、路徑等：

@app.route('/post/<int:post_id>')  # post_id 必須是整數
def show_post(post_id):
    return f"你查看的文章ID是：{post_id}"

@app.route('/path/<path:subpath>')  # 包含斜槓的路徑
def show_path(subpath):
    return f"路徑參數：{subpath}"

五、模板引擎（Jinja2）

靜態的HTML頁面無法滿足動態內容需求，Flask使用Jinja2模板引擎來渲染動態HTML。

創建模板文件

  1. 在項目根目錄下創建一個 templates 文件夾（Flask會自動識別該文件夾）。
  2. 在 templates 中新建 index.html 文件，內容如下：
<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>  <!-- 渲染變量 -->
</head>
<body>
    <h1>Hello, {{ name }}!</h1>  <!-- 渲染name變量 -->
    {% if age > 18 %}  <!-- 條件判斷 -->
        <p>你已成年</p>
    {% else %}
        <p>你未成年</p>
    {% endif %}
    <ul>
        {% for item in hobbies %}  <!-- 循環 -->
            <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>

在視圖函數中渲染模板

修改 app.py，使用 render_template 渲染模板：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 傳遞數據給模板
    data = {
        'title': '首頁',
        'name': '小明',
        'age': 20,
        'hobbies': ['編程', '閱讀', '運動']
    }
    return render_template('index.html', **data)  # **data 表示解包字典

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

現在訪問 http://127.0.0.1:5000，頁面會根據傳遞的變量動態渲染內容。

六、靜態文件處理

網站的圖片、CSS、JavaScript等靜態資源需要放在 static 文件夾中。

示例：引入CSS文件

  1. 在項目根目錄創建 static 文件夾，再在 static 中創建 style.css：
h1 {
    color: red;
    font-size: 24px;
}
  1. 在 templates/index.html 中引入CSS：
<head>
    <title>{{ title }}</title>
    <!-- 引入靜態文件：url_for('static', filename='style.css') -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>

此時頁面的標題文字會變成紅色，說明CSS生效了。

七、處理請求與響應

獲取請求參數

Flask通過 request 對象獲取請求數據（需先導入）：

from flask import request, render_template

@app.route('/greet', methods=['GET', 'POST'])  # 允許GET和POST請求
def greet():
    if request.method == 'POST':  # 判斷請求方法
        name = request.form.get('name')  # 獲取POST表單數據
        return render_template('greet.html', name=name)
    else:
        return render_template('greet.html')  # GET請求返回空表單

返回JSON和重定向

  • 返回JSON：使用 jsonify（需導入）：
from flask import jsonify

@app.route('/api/data')
def api_data():
    data = {'name': 'Flask', 'version': '2.3.3'}
    return jsonify(data)  # 返回JSON格式數據
  • 重定向：使用 redirect（需導入）：
from flask import redirect, url_for

@app.route('/old')
def old_page():
    return redirect(url_for('index'))  # 重定向到index頁面

八、綜合小項目示例

創建一個簡單的“個人博客首頁”，包含以下功能：
- 顯示歡迎信息和用戶列表
- 支持用戶提交留言（POST請求）
- 渲染動態內容（使用模板）

步驟1：修改模板結構

在 templates 中新增 blog.html：

<!DOCTYPE html>
<html>
<head>
    <title>我的博客</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>{{ blog_title }}</h1>
    <h2>用戶列表</h2>
    <ul>
        {% for user in users %}
            <li>{{ user }}</li>
        {% endfor %}
    </ul>

    {% if message %}  <!-- 顯示留言 -->
        <div class="message">{{ message }}</div>
    {% endif %}

    <form method="POST">
        <input type="text" name="username" placeholder="輸入用戶名">
        <button type="submit">提交</button>
    </form>
</body>
</html>

步驟2：編寫視圖函數

修改 app.py：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/blog', methods=['GET', 'POST'])
def blog():
    users = ['張三', '李四', '王五']  # 模擬用戶列表
    message = None  # 留言內容

    if request.method == 'POST':
        username = request.form.get('username')
        message = f"收到留言：{username} 提交了信息！"

    return render_template('blog.html', 
                          blog_title='個人博客', 
                          users=users, 
                          message=message)

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

效果演示

訪問 http://127.0.0.1:5000/blog，可以看到用戶列表，並能通過表單提交留言（留言會動態顯示在頁面上）。

九、總結與進階方向

恭喜你完成了Flask入門！現在你已經掌握了：
- Flask的安裝與基本使用
- 路由、視圖函數、模板渲染
- 靜態文件和模板引擎
- 請求參數處理和響應返回

後續學習方向：

  • 數據庫操作：學習Flask-SQLAlchemy（ORM工具）
  • 用戶認證：Flask-Login實現登錄註冊
  • RESTful API：使用Flask-RESTful構建接口
  • 部署上線：Gunicorn + Nginx 部署生產環境

Flask的官方文檔（https://flask.palletsprojects.com/）是最好的學習資源，多動手實踐才能快速掌握！

相關文章

手把手教你：Flask路由與視圖函數，10分鐘搭建第一個Web頁面 2025-12-08 Python Web靜態資源管理：在Flask中正確引入CSS和JS文件 2025-12-08 新手必看：Flask靜態文件配置與管理指南 2025-12-20 輕鬆學Flask：請求與響應對象詳解 2025-12-20 Flask藍圖Blueprint：模塊化應用開發實踐 2025-12-20
小夜