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