現在不想使用后端模板渲染的方式來顯示靜態頁面了，我們要做到**前后端分離**(當然更徹底的是直接前端業務作為一個單獨的服務提供)，可以通過配置 藍圖 加載靜態 html 資源的方式來呈現前端頁面
在 `app/static/html` 目錄下新建 `index.html` 代碼如下
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<title>前后端分離靜態頁面</title>
</head>
<body>
* 前后端分離的靜態 HTML
</body>
</html>
```
在 `app` 目錄下新建 `html.py` 文件，代碼如下
```
#!/usr/bin/env python3
# -*- encoding: utf-8 -*-
from flask import Blueprint, make_response,current_app
html = Blueprint("html", __name__)
@html.route("/<re(r'.*'):html_file_name>")
def get_html(html_file_name):
if not html_file_name:
html_file_name = "index.html"
if html_file_name != "favicon.ico":
html_file_name = "html/"+html_file_name
# flask 提供的返回靜態文件的方法
resp = make_response(current_app.send_static_file(html_file_name))
return resp
```
在改造下我們創建應用的工廠，導入提供靜態頁面的藍圖
對 `app` 目錄下的 ` __init__` 初始化文件進行如下改造
```
#!/usr/bin/env python3
# -*- encoding: utf-8 -*-
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
import logging
from logging.handlers import RotatingFileHandler
from config import config_map
from app.utils.commons import ReCoverter
# 創建數據庫對象
db = SQLAlchemy()
# 設置日志的記錄級別
logging.basicConfig(level=logging.DEBUG) # 調試級別 debug
# 創建日志記錄器，指明日志保存路徑、每個日志文件的最大大小 100Kb、保存的日志文件個數上限
file_log_handler = RotatingFileHandler("logs/log", maxBytes=1024*1024*100, backupCount=10)
# 創建日志記錄格式 日志等級 輸入日志信息的文件名 行數 日志錯誤
formatter = logging.Formatter('%(levelname)s %(filename)s:%(lineno)d %(message)s')
# 為剛創建的日志記錄器設置日志記錄格式
file_log_handler.setFormatter(formatter)
# 為全局的日志工具對象 (flask app使用) 添加日志記錄器
logging.getLogger().addHandler(file_log_handler)
# 工廠模式
def create_app(config_name):
app = Flask(__name__)
# 設置 flask 的配置信息
config_class = config_map[config_name]
app.config.from_object(config_class)
# 使用 app 初始化 db
db.init_app(app)
# 為 flask 添加自定義的轉換器
app.url_map.converters["re"] = ReCoverter
# 注冊藍圖
from app import api_1_0
app.register_blueprint(api_1_0.bp, url_prefix="/api/v1.0")
# from app import admin
# app.register_blueprint(admin.bp, url_prefix="/admin")
# 注冊提供靜態文件的藍圖
from app import html
app.register_blueprint(html.html)
return app
```
此時訪問 `http://localhost:5000/`
