Flask 藍(lán)圖的基本使用

在前面的例子中，所有的頁面處理邏輯都是放在同一個文件中，隨著業(yè)務(wù)代碼的增加，將所有代碼都放在單個程序文件中是非常不合適的。不僅會讓閱讀代碼變得困難，而且會給后期維護(hù)帶來麻煩。

Flask 中使用藍(lán)圖，提供了模塊化管理程序路由的功能，使程序結(jié)構(gòu)更加清晰。

1. 藍(lán)圖簡介

隨著 Flask 程序越來越復(fù)雜，需要對程序進(jìn)行模塊化的處理，藍(lán)圖 (Blueprint) 是 Flask 程序的模塊化處理機(jī)制，它是一個存儲視圖方法的集合，F(xiàn)lask 程序通過 Blueprint 來組織 URL 以及處理請求。

Flask 的 Blueprint 具有如下屬性：

• 一個項目可以具有多個 Blueprint；
• Blueprint 可以單獨(dú)具有自己的模板、靜態(tài)文件的目錄；
• 在應(yīng)用初始化時，注冊需要使用的 Blueprint。

2. 基本用法

2.1 功能概述

本節(jié)通過一個具體的例子講解 Blueprint 的基本用法，假設(shè)網(wǎng)站包含有如下 4 個頁面：

程序?qū)?/news/society/ 和 /news/tech/ 的相關(guān)功能組成一個藍(lán)圖 news；程序?qū)?/products/car/ 和 /products/baby/ 的相關(guān)功能組成一個藍(lán)圖 products。

程序中包含 4 個處理函數(shù)，根據(jù)頁面路徑，F(xiàn)lask 將請求轉(zhuǎn)發(fā)給對應(yīng)的處理函數(shù)。從瀏覽器發(fā)送過來的請求的處理過程如下圖所示：

假設(shè)訪問的頁面路徑是 /products/car，F(xiàn)lask 框架在藍(lán)圖 news 和藍(lán)圖 products 中查找匹配該頁面路徑的路由，發(fā)現(xiàn)在藍(lán)圖 products 中，存在和路徑 /products/car 相應(yīng)的處理函數(shù) car_products，最后將請求轉(zhuǎn)發(fā)給函數(shù) car_products 處理。

例子程序包括 2 個藍(lán)圖，由 3 個文件構(gòu)成：

• app.py，程序的主文件；
• news.py，實(shí)現(xiàn)藍(lán)圖 news；
• products.py，實(shí)現(xiàn)藍(lán)圖 products。

2.2 主程序 app.py

首先編寫主程序 app.py：

from flask import Flask
import news
import products

app = Flask(__name__)

app.register_blueprint(news.blueprint)
app.register_blueprint(products.blueprint)

app.run(debug = True)

在第 2 行，導(dǎo)入模塊 news.py，在 news.py 中定義了一個藍(lán)圖對象 news.blueprint；在第 3 行，導(dǎo)入模塊 products.py，在 products.py 中定義了一個藍(lán)圖對象 products.blueprint。

在第 7 行，在應(yīng)用中注冊藍(lán)圖對象 news.blueprint；在第 8 行，在應(yīng)用中注冊藍(lán)圖對象 products.blueprint。

2.3 藍(lán)圖 news.py

編寫 news.py，實(shí)現(xiàn)頁面 /news/society 和 /news/tech 的功能：

from flask import Blueprint

blueprint = Blueprint('news', __name__, url_prefix='/news')

@blueprint.route("/society/")
def society_news():
    return "社會新聞版塊"

@blueprint.route("/tech/")
def tech_news():
    return "IT 新聞板塊"

在第 3 行，創(chuàng)建一個藍(lán)圖對象，它包含 3 個參數(shù)：

• 第 1 個參數(shù) ‘news’ 是藍(lán)圖的名稱；
• 第 2 個參數(shù) __name__ 是該藍(lán)圖所在的模塊名，該藍(lán)圖的實(shí)現(xiàn)文件是 news.py，因此 __name__ 是 ‘news’；
• 第 3 個參數(shù)是指定頁面的 URL 前綴為 ‘/news’，它會影響路由中路徑的設(shè)置，請看下一段的注意。

在第 5 行，將路徑 /society/ 和函數(shù) society_news 關(guān)聯(lián)；在第 9 行，將路徑 /tech/ 和函數(shù) tech_news 關(guān)聯(lián)。注意：頁面的絕對路徑是 /news/society/ 和 /news/tech/，因為藍(lán)圖的 url_prefix 設(shè)置為 news，在藍(lán)圖內(nèi)部，頁面的相對路徑是 /society/ 和 /tech/。

2.4 藍(lán)圖 products.py

編寫 products.py，實(shí)現(xiàn)頁面 /products/car 和 /products/baby 的功能：

from flask import Blueprint

blueprint = Blueprint('products', __name__, url_prefix='/products')

@blueprint.route("/car")
def car_products():
    return "汽車產(chǎn)品版塊"

@blueprint.route("/baby")
def baby_products():
    return "嬰兒產(chǎn)品版塊"    

在第 3 行，創(chuàng)建一個名為 ‘products’ 的藍(lán)圖，該藍(lán)圖中頁面的 URL 前綴為 /products；在第 5 行，將路徑 /car/ 和函數(shù) car_products 關(guān)聯(lián)；在第 9 行，將路徑 /baby/ 和函數(shù) baby_products 關(guān)聯(lián)。

注意：頁面的絕對路徑是 /products/car/ 和 /product/baby/，因為藍(lán)圖的 url_prefix 等于 products，在藍(lán)圖內(nèi)部，頁面的相對路徑是 /car/ 和 /baby/。

2.5 運(yùn)行程序

在瀏覽器中，訪問 http://localhost:5000/news/society/， 顯示如下：

2.6 源代碼下載

點(diǎn)擊下載本節(jié)的例子代碼 blueprint/simple。

3. 更具擴(kuò)展性的架構(gòu)

3.1 概述

隨著業(yè)務(wù)代碼的增加，需要為 Flask 程序提供一個具備擴(kuò)展性的架構(gòu)，根據(jù) Flask 程序的擴(kuò)展性分為如下三種類型：

1. 所有的頁面邏輯放在同一個文件中

在這種架構(gòu)中，程序完全不具備擴(kuò)展性。在初學(xué) Flask 時，使用的例子都是這種類型。

2. 使用一個獨(dú)立的 Python 文件實(shí)現(xiàn)藍(lán)圖

在這種架構(gòu)中，程序具備一定的擴(kuò)展性：

• 程序由主程序和多個藍(lán)圖構(gòu)成；
• 每個藍(lán)圖對應(yīng)一個 Python 文件；
• 所有的藍(lán)圖共享相同的模板文件目錄；
• 所有的藍(lán)圖共享相同的靜態(tài)文件目錄。

第 2 小節(jié)的程序采用的就是這種架構(gòu)，程序包含 2 個藍(lán)圖: news 和 products，由 3 個文件構(gòu)成：app.py、news.py、products.py，其中 news.py 實(shí)現(xiàn)新聞版塊，products.py 實(shí)現(xiàn)產(chǎn)品版塊。

3. 使用一個獨(dú)立的目錄實(shí)現(xiàn)藍(lán)圖

在這種架構(gòu)中，程序的擴(kuò)展性最好：

• 程序由主程序和多個藍(lán)圖構(gòu)成；
• 每個藍(lán)圖對應(yīng)一個獨(dú)立的目錄，存儲與這個藍(lán)圖相關(guān)的文件；
• 每個藍(lán)圖有一個獨(dú)立的模板文件目錄；
• 每個藍(lán)圖有一個獨(dú)立的靜態(tài)文件目錄。

3.2 模板文件尋找規(guī)則

每個藍(lán)圖可以擁有獨(dú)立的模板文件目錄，模板文件尋找規(guī)則如下：

• 如果項目中的 templates 文件夾中存在相應(yīng)的模板文件，則使用 templates 文件夾下的模板文件；
• 如果項目中的 templates 文件夾中沒有相應(yīng)的模板文件，則使用定義藍(lán)圖的時候指定的 templates 文件夾下的模板文件。

3.3 靜態(tài)文件尋找規(guī)則

每個藍(lán)圖可以獨(dú)立的靜態(tài)文件目錄，靜態(tài)文件尋找規(guī)則如下：

• 如果項目中的 static 文件夾中存在相應(yīng)的靜態(tài)文件，則使用 static 文件夾下的靜態(tài)文件；
• 如果項目中的 static 文件夾中沒有相應(yīng)的靜態(tài)文件，則使用定義藍(lán)圖的時候指定的 static 文件夾下的靜態(tài)文件。

4. 具有擴(kuò)展性的架構(gòu)的例子

4.1 目錄結(jié)構(gòu)

本節(jié)通過實(shí)例講解如何規(guī)劃目錄、使得程序具有良好的擴(kuò)展性。程序的功能與第 2 小節(jié)相同，包含 2 個藍(lán)圖：news 和 products，程序的目錄結(jié)構(gòu)如下：

項目的目錄的功能描述如下：

項目的文件的功能描述如下：

4.2 實(shí)現(xiàn) app.py

首先實(shí)現(xiàn)主程序 app.py：

from flask import Flask
import news
import products

app = Flask(__name__)

app.register_blueprint(news.blueprint)
app.register_blueprint(products.blueprint)

app.run(debug = True)

在第 2 行，導(dǎo)入模塊 news.py，在 news.py 中定義了一個藍(lán)圖對象 news.blueprint；在第 3 行，導(dǎo)入模塊 products.py，在 products.py 中定義了一個藍(lán)圖對象 products.blueprint。

在第 7 行，在應(yīng)用中注冊藍(lán)圖對象 news.blueprint；在第 8 行，在應(yīng)用中注冊藍(lán)圖對象 products.blueprint。

4.3 實(shí)現(xiàn) news/__init.py__

和藍(lán)圖 news 相關(guān)的所有文件均放置在項目的 news 目錄下，在主程序中導(dǎo)入藍(lán)圖 news.py 時，會執(zhí)行 news/__init.py__：

from flask import Blueprint, render_template

blueprint = Blueprint('news', __name__, url_prefix='/news', template_folder='templates', static_folder='static')

@blueprint.route("/society/")
def society_news():
    return render_template('society.html')

@blueprint.route("/tech/")
def tech_news():
    return "IT 新聞板塊"

在第 3 行，創(chuàng)建一個名為 ‘news’ 的藍(lán)圖：

• 藍(lán)圖中頁面的 URL 前綴為 /news；
• 藍(lán)圖的模板目錄為 templates，絕對路徑為 ‘項目目錄 /news/templates’；
• 藍(lán)圖的靜態(tài)文件目錄為 static，絕對路徑為 ‘項目目錄 /news/static’。

在第 5 行，將路徑 /society/ 和函數(shù) society_news 關(guān)聯(lián)；在第 9 行，將路徑 /tech/ 和函數(shù) tech_news 關(guān)聯(lián)。

在第 7 行，調(diào)用 render_template (‘society.html’) 渲染模板文件 society.html，根據(jù)模板文件的查找規(guī)則，最終在 ‘項目目錄 /news/templates’ 目錄下找到模板文件。

4.4 實(shí)現(xiàn) news/templates/society.html

訪問頁面 /news/society 時，返回模板文件 news/templates/society.html：

<link rel="stylesheet" href="{{ url_for('news.static',filename='news.css')}}">
<h1>社會新聞</h1>

在模板文件中引用了靜態(tài)文件 news.css。{{url_for (‘news.static’,filename=‘news.css’) }} 的輸出為 news/static/news.css，其中 news.static 表示藍(lán)圖 news 的 static 目錄。

4.5 實(shí)現(xiàn) news/static/news.css

藍(lán)圖 news 中所有的 html 文件共享一個相同的 css 文件 —— news/static/news.css：

h1 {
    color: red;
}

將 h1 標(biāo)簽設(shè)置為紅色，在 4.7 小節(jié)，可以看到運(yùn)行截圖，顯示出 h1 標(biāo)簽中的文字為紅色。

4.6 實(shí)現(xiàn) products/__init.py__

和藍(lán)圖 products 相關(guān)的所有文件均放置在項目的 products 目錄下，在主程序中導(dǎo)入藍(lán)圖 products.py 時，會執(zhí)行 products/__init.py__：

from flask import Blueprint

blueprint = Blueprint('products', __name__, url_prefix='/products')

@blueprint.route("/car")
def car_products():
    return "汽車產(chǎn)品版塊"

@blueprint.route("/baby")
def baby_products():
    return "嬰兒產(chǎn)品版塊"    

在第 3 行，創(chuàng)建一個名為 ‘products’ 的藍(lán)圖：

• 藍(lán)圖中頁面的 URL 前綴為 /products
• 藍(lán)圖的模板目錄為 templates，絕對路徑為 ‘項目目錄 /products/templates’；
• 藍(lán)圖的靜態(tài)文件目錄為 static，絕對路徑為 ‘項目目錄 /products/static’。

在第 5 行，將路徑 /car/ 和函數(shù) car_products 關(guān)聯(lián)；在第 9 行，將路徑 /baby/ 和函數(shù) baby_products 關(guān)聯(lián)。

4.7 運(yùn)行程序

在瀏覽器中，訪問 http://localhost:5000/news/society/， 顯示如下：

因為 news.css 定義 h1 標(biāo)簽為紅色，因此顯示是紅色的。

4.8 源代碼下載

點(diǎn)擊下載本節(jié)的例子代碼 blueprint/complex。

5. 小結(jié)

藍(lán)圖 (Blueprint) 是 Flask 程序的模塊化處理機(jī)制，通過使用藍(lán)圖為 Flask 程序提供了一個可擴(kuò)展性好的結(jié)構(gòu)。隨著業(yè)務(wù)代碼的增加，需要在 Flask 程序中使用藍(lán)圖來應(yīng)對程序的復(fù)雜性的增加。