本套教程是一個Flask實戰(zhàn)類教程，html/css/javascript等相關(guān)技術(shù)棧不會過多的去詳細解釋，那么就需要各位初學(xué)者盡可能的先去掌握這些基礎(chǔ)知識，當(dāng)然本套教程不需要你對其非常精通，但最起碼得做到能看懂其意思！
靜態(tài)文件
靜態(tài)文件是相對動態(tài)的web應(yīng)用而言的，一般是指css和js文件！ 網(wǎng)站應(yīng)用部署的時候，這些靜態(tài)文件通常由Nginx等靜態(tài)文件服務(wù)器處理，但是在開發(fā)過程中， Flask 也能做好 這項工作。
一般，F(xiàn)lask的靜態(tài)文件位于應(yīng)用的 /static 中，模板文件位于應(yīng)用的 /templates中。
因此上，我們需要在app/blog/目錄下分別創(chuàng)建一個static及templates的文件夾，用來對應(yīng)的存放博客的靜態(tài)文件及模板文件！
創(chuàng)建博客首頁視圖
在app/blog/views.py中通過藍圖的方式創(chuàng)建首頁視圖,代碼如下：
Flask 會自動為你配置 Jinja2 模板引擎。
使用 render_template() 方法可以渲染模板，你只需要提供模板名稱和需要 作為參數(shù)傳遞給模板的變量就行了。
from flask import Blueprint, render_templatebp = Blueprint(‘blog’, __name__, url_prefix=’/blog’, template_folder=’templates’, static_folder=’static’)def index(): “””首頁視圖 “”” posts = [1,2,3,4,5,6] return render_template(‘index.html’, posts=posts)
在之前的藍圖應(yīng)用章節(jié)我們對藍圖的使用做了大概的說明，其中這里新增了幾個參數(shù)需要單獨拉出來說一下，Blueprint類的template_folder參數(shù)就是指定該藍圖需要獨立使用的模板文件夾，這個路徑是相對路徑或絕對路徑，static_folder參數(shù)即設(shè)置靜態(tài)文件目錄，這樣做的好處是我們就可以把每個功能模塊拆分，靜態(tài)文件和模板文件也可以獨立拆分，這個思路是有借鑒django項目的布局方式，利于維護和后期的動態(tài)擴展！
index函數(shù)則就是一個python的普通函數(shù)，只是在返回的時候我們使用了Flask提供的render_template方法來動態(tài)渲染模板和載入上下文數(shù)據(jù)，啟動posts=posts就是我們構(gòu)造的一個上下文演示數(shù)據(jù)，下來將會在模板文件中使用該上下文，這里需要注意的是我們并沒有使用裝飾器的方法去綁定url，下來我們要介紹一個url和視圖分離的url方式！
add_url_rule方法分離視圖與url
在項目目錄（RealProject）的__init__.py中的工廠函數(shù)create_app底部創(chuàng)建如下代碼
def create_app(test_config=None): app = Flask(__name__, instance_relative_config=True) # 省略中間代碼 … return appdef register_bp(app:Flask): # 注冊視圖方法 from app.blog import views as blog # 注冊藍圖 app.register_blueprint(blog.bp) # 首頁url app.add_url_rule(rule=’/’, endpoint=’index’, view_func=blog.index)
add_url_rule的參數(shù)解析：
- rule參數(shù)是真正的url，url開頭必須以斜杠開始；
- endpoint參數(shù)是該url的端點，類似于django的name參數(shù)，它的作用是方便反查該url，一般的加載解析順序是訪問該url會先找該端點再找其關(guān)聯(lián)的視圖，然后開始處理邏輯，相當(dāng)于url的id；
- view_func參數(shù)則是該url指向的函數(shù)，綁定url與函數(shù)！
之后只需要將register_bp函數(shù)引入工廠函數(shù)中即可,工廠函數(shù)代碼修改如下：
def create_app(test_config=None): app = Flask(__name__, instance_relative_config=True) if test_config is None: CONFIG_PATH = BASE_DIR / ‘RealProject/settings.py’ app.config.from_pyfile(CONFIG_PATH, silent=True) else: # test_config為一個字典 app.config.from_mapping(test_config) db.init_app(app) migrate.init_app(app, db) # 注冊視圖 register_bp(app) # 注冊模型 from app.blog import models from app.auth import models return app
創(chuàng)建博客首頁模板文件
在app/blog/templates目錄下創(chuàng)建index.html,這就是render_template方法第一個參數(shù)對應(yīng)的模板文件，內(nèi)容如下：
模板中用到的相關(guān)Jinja2模板語法，請自行查詢文檔理解
- Jinja2 模板文檔 ： https://jinja.palletsprojects.com/en/3.1.x/templates/
{% block title %}{% endblock title %} {% block extra_head_style %}{% endblock extra_head_style %} {% block navbar %} Home Documentation About Contact Sign up Log in {% endblock navbar %} {% block hero %}
Large hero
Large subtitle
{% endblock hero %} {% block main %} {% for post in posts %}
Flask博客實戰(zhàn) – 掌握增刪改查
既然我們選擇了使用ORM框架，那就必須熟練掌握其提供的增刪改查方法，在正式編寫視圖事前， 本節(jié)內(nèi)容我們先在shell環(huán)境中來了解和熟悉其增刪改查的基礎(chǔ)方法！
11:09 PM – 1 Jan 2016 {% endfor %} Previous Next page
- 1
- 2
- 3
{% endblock main %} {% block footer %} 2022 FlaskBlog博客實戰(zhàn) 版權(quán)所有 備案號：陜ICP備20005686號 {% endblock footer %} {% block extra_foot_script %}{% endblock extra_foot_script %} {% block vue_script %}{% endblock vue_script %}
靜態(tài)文件說明
模板中我們看到加載靜態(tài)文件的方法使用了{{ url_for(‘blog.static’, filename=’css/style.css’) }}這樣的語法，這是固定寫法，第一個參數(shù)就是靜態(tài)文件的路徑，這里使用了藍圖來隔離了各應(yīng)用之間的靜態(tài)文件，那么blog.static即代表加載blog藍圖中的靜態(tài)文件夾，filename則是靜態(tài)文件的路徑字符串，加載圖片也是同樣的方法！
本項目前端依賴的第三方框架有：
- buefy — https://buefy.org/
- bulma — https://bulma.io/
- vue2 — https://cn.vuejs.org/
請自行下載該三個框架的相關(guān)文件引入，這里就當(dāng)是給大家留的作業(yè)，去試試吧！
