Flask 教程詳情 - flask,html,Web,Html,CSS,前端開發數據大俠客博客

Flask作為Python生態中最受歡迎的輕量級Web框架，以“微框架”定位、靈活易擴展的特性，成為新手入門Web開發的首選。本文將從環境搭建到核心功能實戰，手把手教你掌握Flask的核心用法，零基礎也能快速上手。

一、前置準備：環境搭建與項目初始化

1. 安裝Flask

Flask基於Python運行，首先確保你的電腦已安裝Python（3.8及以上版本），然後通過pip安裝Flask：

# 基礎安裝（推薦使用虛擬環境）
pip install flask

# 驗證安裝成功
python -c "import flask; print(flask.__version__)"

建議使用虛擬環境隔離項目依賴，避免全局環境衝突：

# 創建虛擬環境
python -m venv flask_demo
# 激活虛擬環境（Windows）
flask_demo\Scripts\activate
# 激活虛擬環境（Mac/Linux）
source flask_demo/bin/activate
# 激活後安裝Flask
pip install flask

2. 第一個Flask應用

創建一個名為app.py的文件，寫入以下代碼，這是Flask最基礎的應用結構：

# 導入Flask核心類
from flask import Flask

# 初始化Flask應用，__name__表示當前模塊名，Flask以此定位資源路徑
app = Flask(__name__)

# 定義路由：綁定URL路徑與處理函數
@app.route('/')
def index():
    # 視圖函數：返回響應內容
    return 'Hello, Flask! 這是我的第一個Flask應用'

# 啓動應用（僅在直接運行該文件時生效）
if __name__ == '__main__':
    # debug=True開啓調試模式，代碼修改後自動重啓，開發環境專用
    app.run(debug=True)

運行文件：

python app.py

打開瀏覽器訪問http://127.0.0.1:5000/，即可看到“Hello, Flask! 這是我的第一個Flask應用”，標誌着第一個Flask應用運行成功。

二、Flask核心功能詳解

1. 路由與視圖函數：URL與功能的映射

路由是Flask的核心，用於將URL路徑映射到對應的處理函數（視圖函數），是Web應用“請求-響應”的基礎。

（1）基礎路由定義

通過@app.route()裝飾器定義路由，核心參數説明：

rule：URL路徑，如/user；
methods：允許的HTTP請求方法，默認['GET']，可指定['GET', 'POST']等。

示例：

from flask import Flask
app = Flask(__name__)

# 基礎GET請求路由
@app.route('/about')
def about():
    return '關於我們 - Flask入門教程'

# 支持GET和POST的路由
@app.route('/login', methods=['GET', 'POST'])
def login():
    return '登錄頁面（支持GET/POST請求）'

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

（2）動態路由：傳遞URL參數

Flask支持在路由中定義動態參數，適配不同的請求場景：

# 動態路由：接收字符串參數
@app.route('/user/<username>')
def show_user(username):
    # 接收URL中的username參數，返回個性化內容
    return f'歡迎你，{username}！'

# 動態路由：接收數字參數（指定類型）
@app.route('/post/<int:post_id>')
def show_post(post_id):
    # 僅匹配整數類型的post_id，非整數會返回404
    return f'文章ID：{post_id}，類型：{type(post_id)}'

# 運行測試：
# http://127.0.0.1:5000/user/張三 → 歡迎你，張三！
# http://127.0.0.1:5000/post/123 → 文章ID：123，類型：<class 'int'>
# http://127.0.0.1:5000/post/abc → 404錯誤

支持的動態參數類型：int（整數）、float（浮點數）、path（包含斜槓的字符串）。

2. 請求與響應：處理客户端數據

Web應用的核心是處理客户端請求（如表單、參數），並返回響應。Flask提供request對象封裝請求數據，make_response定製響應。

（1）獲取請求數據

首先導入request對象，常用屬性：

request.args：獲取URL查詢參數（GET請求）；
request.form：獲取表單數據（POST請求）；
request.method：獲取當前請求方法。

示例：

from flask import Flask, request
app = Flask(__name__)

# 處理GET請求參數
@app.route('/search')
def search():
    # 獲取URL中的keyword參數，如/search?keyword=flask
    keyword = request.args.get('keyword', '默認關鍵詞')
    return f'搜索關鍵詞：{keyword}'

# 處理POST表單數據（模擬登錄）
@app.route('/do_login', methods=['POST'])
def do_login():
    # 獲取表單中的用户名和密碼
    username = request.form.get('username')
    password = request.form.get('password')
    # 簡單驗證（實際開發需加密+數據庫校驗）
    if username == 'admin' and password == '123456':
        return '登錄成功！'
    else:
        return '用户名或密碼錯誤'

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

可通過Postman、curl或HTML表單測試POST請求：

<!-- 簡單的登錄表單（保存為login.html，放在項目根目錄） -->
<form action="/do_login" method="post">
    用户名：<input type="text" name="username"><br>
    密碼：<input type="password" name="password"><br>
    <button type="submit">登錄</button>
</form>

（2）定製響應

默認視圖函數返回字符串，也可返回狀態碼、響應頭，或用make_response定製響應：

from flask import Flask, make_response
app = Flask(__name__)

# 基礎響應：返回內容+狀態碼
@app.route('/404')
def not_found():
    return '頁面不存在', 404

# 定製響應頭
@app.route('/custom_response')
def custom_response():
    resp = make_response('自定義響應內容')
    # 設置響應頭
    resp.headers['X-Developer'] = 'Flask入門'
    resp.status_code = 200
    return resp

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

3. 模板渲染：分離前端與後端

Flask集成Jinja2模板引擎，支持將動態數據渲染到HTML頁面，實現前後端分離。

（1）模板文件存放規則

Flask默認讀取項目根目錄下的templates文件夾中的模板文件，先創建目錄結構：

flask_demo/
├── app.py
└── templates/
    └── index.html

（2）渲染模板示例

from flask import Flask, render_template
app = Flask(__name__)

# 渲染模板並傳遞動態數據
@app.route('/user/<name>')
def user_page(name):
    # 向模板傳遞變量name和列表數據
    hobbies = ['編程', '閲讀', '跑步']
    return render_template('index.html', username=name, hobbies=hobbies)

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

創建templates/index.html：

<!DOCTYPE html>
<html>
<head>
    <title>Flask模板示例</title>
</head>
<body>
    <h1>歡迎你，{{ username }}！</h1>
    <p>你的愛好：</p>
    <ul>
        <!-- Jinja2循環語法 -->
        {% for hobby in hobbies %}
        <li>{{ hobby }}</li>
        {% endfor %}
    </ul>
    <!-- Jinja2條件語法 -->
    {% if username == 'admin' %}
    <p>你是管理員用户</p>
    {% else %}
    <p>你是普通用户</p>
    {% endif %}
</body>
</html>

訪問http://127.0.0.1:5000/user/張三，即可看到渲染後的動態頁面。

4. 靜態文件：加載CSS/JS/圖片

Flask默認讀取static文件夾中的靜態文件（CSS、JS、圖片等），目錄結構：

flask_demo/
├── app.py
├── templates/
│   └── index.html
└── static/
    ├── css/
    │   └── style.css
    └── img/
        └── logo.png

在模板中引用靜態文件：

<!-- index.html中添加 -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<img src="{{ url_for('static', filename='img/logo.png') }}" alt="logo">

5. 會話管理：Cookie與Session

（1）Cookie：客户端存儲數據

from flask import Flask, make_response
app = Flask(__name__)

@app.route('/set_cookie')
def set_cookie():
    resp = make_response('已設置Cookie')
    # 設置Cookie，有效期30天
    resp.set_cookie('user', 'flask_user', max_age=30*24*3600)
    return resp

@app.route('/get_cookie')
def get_cookie():
    # 獲取Cookie
    user = request.cookies.get('user', '未登錄')
    return f'當前Cookie中的用户：{user}'

（2）Session：服務端存儲數據

Session基於加密的Cookie實現，需先設置秘鑰：

from flask import Flask, session
app = Flask(__name__)
# 必須設置秘鑰（生產環境需使用隨機複雜字符串）
app.secret_key = 'your_secret_key_123456'

@app.route('/set_session')
def set_session():
    # 存儲Session數據
    session['username'] = 'admin'
    return 'Session已設置'

@app.route('/get_session')
def get_session():
    # 獲取Session數據
    username = session.get('username', '未登錄')
    return f'當前登錄用户：{username}'

@app.route('/clear_session')
def clear_session():
    # 清除Session
    session.pop('username', None)
    return 'Session已清除'

三、Flask項目實戰：簡易待辦事項應用

整合以上核心功能，搭建一個簡易的待辦事項（Todo）應用：

from flask import Flask, request, render_template, redirect, url_for, session

app = Flask(__name__)
app.secret_key = 'todo_demo_123'

# 初始化待辦事項列表（模擬數據庫）
if 'todos' not in session:
    session['todos'] = []

# 首頁：展示待辦事項
@app.route('/')
def index():
    todos = session.get('todos', [])
    return render_template('todo.html', todos=todos)

# 添加待辦事項
@app.route('/add', methods=['POST'])
def add_todo():
    todo = request.form.get('todo')
    if todo:
        todos = session['todos']
        todos.append(todo)
        session['todos'] = todos  # 更新session
    return redirect(url_for('index'))  # 重定向到首頁

# 刪除待辦事項
@app.route('/delete/<int:index>')
def delete_todo(index):
    todos = session['todos']
    if 0 <= index < len(todos):
        todos.pop(index)
        session['todos'] = todos
    return redirect(url_for('index'))

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

創建templates/todo.html：

<!DOCTYPE html>
<html>
<head>
    <title>Flask待辦事項</title>
    <style>
        .todo-item {margin: 10px 0; padding: 5px; border-bottom: 1px solid #eee;}
        a {color: red; text-decoration: none; margin-left: 10px;}
    </style>
</head>
<body>
    <h1>Flask待辦事項</h1>
    <form action="/add" method="post">
        <input type="text" name="todo" placeholder="輸入待辦事項" required>
        <button type="submit">添加</button>
    </form>
    <div>
        {% for todo in todos %}
        <div class="todo-item">
            {{ loop.index }}. {{ todo }}
            <a href="/delete/{{ loop.index0 }}">刪除</a>
        </div>
        {% else %}
        <p>暫無待辦事項</p>
        {% endfor %}
    </div>
</body>
</html>

運行後訪問http://127.0.0.1:5000/，即可實現待辦事項的添加、刪除功能。

四、生產環境部署注意事項

關閉debug=True：調試模式存在安全風險，生產環境必須關閉；
使用WSGI服務器：如Gunicorn、uWSGI，替代Flask內置的開發服務器；
配置秘鑰：生產環境使用隨機、複雜的秘鑰，可通過環境變量配置；
靜態文件託管：生產環境建議用Nginx託管靜態文件，提升性能。

示例：使用Gunicorn啓動應用

# 安裝Gunicorn
pip install gunicorn
# 啓動應用（綁定0.0.0.0，端口8000）
gunicorn -w 4 -b 0.0.0.0:8000 app:app

本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。

數據大俠客博客

數據大俠客博客

博客 / 詳情

Flask 教程

一、前置準備：環境搭建與項目初始化

1. 安裝Flask

2. 第一個Flask應用

二、Flask核心功能詳解

1. 路由與視圖函數：URL與功能的映射

（1）基礎路由定義

（2）動態路由：傳遞URL參數

2. 請求與響應：處理客户端數據

（1）獲取請求數據

（2）定製響應

3. 模板渲染：分離前端與後端

（1）模板文件存放規則

（2）渲染模板示例

4. 靜態文件：加載CSS/JS/圖片

5. 會話管理：Cookie與Session

（1）Cookie：客户端存儲數據

（2）Session：服務端存儲數據

三、Flask項目實戰：簡易待辦事項應用

四、生產環境部署注意事項

發佈評論

Product

Company

Support

Company

博客 / 詳情

Flask 教程

一、前置準備：環境搭建與項目初始化

1. 安裝Flask

2. 第一個Flask應用

二、Flask核心功能詳解

1. 路由與視圖函數：URL與功能的映射

（1）基礎路由定義

（2）動態路由：傳遞URL參數

2. 請求與響應：處理客户端數據

（1）獲取請求數據

（2）定製響應

3. 模板渲染：分離前端與後端

（1）模板文件存放規則

（2）渲染模板示例

4. 靜態文件：加載CSS/JS/圖片

5. 會話管理：Cookie與Session

（1）Cookie：客户端存儲數據

（2）Session：服務端存儲數據

三、Flask項目實戰：簡易待辦事項應用

四、生產環境部署注意事項

發佈 評論

發佈評論