這次 Flask 藍圖 Blueprint 建立步驟筆記，使用 Docker 管理，後端語言為 python，前端使用純 HTML + CSS + JavaScript，開發的平台是使用 VSCode。
目錄
Flask Blueprint 藍圖建立步驟
1. 外層檔案首頁建置
先有一個通用首頁，到時候會變成用 “藍圖路由” 方式進入到各頁面。
2. 拉入開發的資料夾
下圖中，左側那些是外層檔案，直接把要使用藍圖的資料夾拉入。
3. 加入 Flask Blueprint 語法
from object_detection.app import object_detection
app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False
app.config.from_object(__name__)
app.register_blueprint(object_detection, url_prefix='/object_detection',template_folder='./object_detection/templates',static_folder="./object_detection/static")下面這個截圖最後面漏截 ,static_folder=”./object_detection/static”)，以上面這個程式碼為主。
4. 增加必要檔案
打開開發資料夾，增加 init.py 檔案，檔案內容留空即可。
5. 引入藍圖 Blueprint 語法
在開發資料夾的 app.py 引入 Blueprint 及藍圖語法。此時外層的 app.py 就串接完成開發資料夾的藍圖了
from flask import Flask, render_template, request, Blueprint
object_detection = Blueprint("object_detection", __name__, template_folder="../object_detection/templates",static_folder="../object_detection/static")
6. 修改路由
把開發資料夾的路由 @app.route 調整成藍圖的路由 @object_detection.route
7. 修改相對路徑
把所有 HTML 相對路徑的 ../ 改成 ./ ，因為 Flask 藍圖特性是把 static 和 templates 所有檔案壓平化。除了 CSS 想要往上一層找之外，其餘改為 ./ 即可。
下圖為所有 HTML 相對路徑的 ../ 改成 ./
下圖為 CSS 想要往上一層找，保留 ../
8. 本地端開發需重啟 container
重啟 container 才會生效！
可能出現的問題
藍圖多個串聯，HTML 檔名不能相同
藍圖多個串聯寫法：
檔案名稱若相同，檔案會互相覆蓋：
解決辦法：修改其中一個檔名即可。
原因：推測有可能是 Blueprint 壓平化時 HTML 也會變在同層。
總結
以上 8 個步驟，就能完成加入 Flask Blueprint 藍圖囉！
為你推薦：
