摘要:示例使用的模板的指令通過從引用來實現(xiàn)模板的繼承。上面的模板定義了三個,分別命名為和。同時返回相應(yīng)錯誤的數(shù)字狀態(tài)碼。示例帶有導(dǎo)航欄的基礎(chǔ)應(yīng)用程序模板這個模板中的塊中只是一個名為的元素,它包含了在派生模板中定義的名為的空。
2、集成Twitter Bootstrap的Flask-Bootstrap
Bootstrap是Twitter的一個開源框架,提供用戶交互組件來創(chuàng)建一個清新且有吸引力的web頁面,并兼容所有現(xiàn)代web瀏覽器。
Bootstrap是一個客戶端框架,服務(wù)端不直接參與。服務(wù)端需要做的就是提供HTML響應(yīng),引用層疊樣式表(CSS)和JavaScript文件并通過HTML、CSS、和JavaScript代碼來實例化需要的組件。模板是做這些的理想地方。
集成Bootstrap到應(yīng)用程序最好的方式是在模板中做一些必要的改變。一個簡單點的途徑就是使用Flask-Bootstrap擴(kuò)展去簡化集成工作。可以通過pip來安裝Flask-Bootstrap:
(venv) $ pip install flask-bootstrap
Flask擴(kuò)展通常在應(yīng)用程序?qū)嵗粍?chuàng)建的時候初始化。示例3-4展示Flask-Bootstrap的初始化。
示例3-4. hello.py:Flask-Bootstrap初始化
from flask.ext.bootstrap import Bootstrap # ... bootstrap = Bootstrap(app)
和第二章的Flask-Script一樣,F(xiàn)lask-Bootstrap從flask.ext命名空間導(dǎo)入并通過傳遞應(yīng)用程序?qū)嵗綐?gòu)造函數(shù)來初始化。
一旦Flask-Bootstrap被初始化,一個包含所有Bootstrap文件的基礎(chǔ)模板就可供應(yīng)用程序使用了。這個模板利用Jinja2的模板繼承,應(yīng)用程序則可以擴(kuò)展一個擁有通用頁面結(jié)構(gòu),且包含Bootstrap導(dǎo)入的元素的基礎(chǔ)模板。示例3-5展示作為派生模板的新版user.html。
_示例3-5. templates/user.html: 使用Flask-Bootstrap的模板
{% extends "bootstrap/base.html" %} {% block title %}Flasky{% endblock %} {% block navbar %}{% endblock %} {% block content %}{% endblock %}Hello, {{ name }}!
Jinja2的extends指令通過從Flask-Bootstrap引用bootstrap/base.html來實現(xiàn)模板的繼承。Flask-Bootstrap的基礎(chǔ)模板提供一個包含Bootstrap CSS和JavaScript文件的web頁面骨架。
基礎(chǔ)模板定義了一些可以被派生模板重寫的block。block和endblock指令定義了被添加到基礎(chǔ)模板中block的內(nèi)容。
上面的user.html模板定義了三個block,分別命名為title、navbar和content。基礎(chǔ)模板里的這些block輸出派生模板定義的內(nèi)容。title塊比較簡單;它的內(nèi)容將出現(xiàn)在
在這個模板中,navbar塊使用Bootstrap組件定義了一個簡單的導(dǎo)航欄。content塊有個名為container的 建議:如果你有克隆在GitHub上的應(yīng)用程序,你現(xiàn)在可以運行git checkout 3b來切換到這個版本的應(yīng)用程序。Bootstrap官方文檔 是一個非常強大的學(xué)習(xí)資料,完全可以復(fù)制粘貼使用那些示例。 圖片3-1. Twitter Bootstrap模板 Flask-Bootstrap的base.html模板定義了一些其他可供派生模板使用的block。表格3-2展示了完整的可用block列表。 表格3-2. Flask-Bootstrap基礎(chǔ)模板中的block 表格3-2中的許多塊用于Flask-Bootstrap自身,所以直接重寫它們會引發(fā)問題。例如,styles和scripts塊是Bootstrap定義文件的地方。如果應(yīng)用程序需要新增自己的內(nèi)容到已經(jīng)有一些內(nèi)容的塊中,則必須使用Jinja2的super()。例如,如何在派生模板中寫scripts塊,來給文檔增加新的JavaScript文件: 當(dāng)你輸入錯誤路徑在你的瀏覽器地址欄,你會得到404錯誤代碼頁面。目前的錯誤頁面很普通也沒有吸引力,且沒有一致的使用Bootstrap頁面。 Flask允許應(yīng)用程序自定義基于模板的錯誤頁面,就像常規(guī)的路由。兩個最常見的錯誤代碼,404是在客戶端請求的頁面或路徑不存在的時候觸發(fā);500是當(dāng)存在未處理的異常時觸發(fā)。示例3-6展示如何為這兩個錯誤提供自定義處理。 示例3-6. hello.py:自定義錯誤頁面 錯誤處理返回響應(yīng),和視圖函數(shù)一樣。同時返回相應(yīng)錯誤的數(shù)字狀態(tài)碼。 在錯誤處理中引用的模板需要自己去寫。這些模板需要和常規(guī)的頁面一樣的布局,所以在這個示例中需要導(dǎo)航欄和頁面頭部顯示錯誤信息。 編寫這些模板的簡單方式是復(fù)制templates/user.html到templates/404.html和templates/500.html,然后改變這兩個新文件的頁面頭部元素來給出相應(yīng)的錯誤信息,但這會產(chǎn)生很多副本。 Jinja2的模板繼承可以幫助我們解決這個問題。Flask-Bootstrap提供了一個帶有基本布局頁面的基礎(chǔ)模板,應(yīng)用程序可以定義自己的、帶有完整頁面布局的基礎(chǔ)模板,包括導(dǎo)航欄和定義在派生模板中的頁面內(nèi)容。示例3-7展示了templates/base.html,它是一個繼承自bootstrap/base.html的新模板且定義了導(dǎo)航欄,但對于其他模板則是一個基礎(chǔ)模板,例如templates/user.html、templates/404.html和templates/500.html。 _示例3-7. templates/base.html:帶有導(dǎo)航欄的基礎(chǔ)應(yīng)用程序模板 這個模板中的content塊中只是一個名為container的 應(yīng)用程序的模板將從該模板繼承而不是直接從Flask-Bootstrap繼承。示例3-8展示了從templates/base.html繼承來構(gòu)造一個自定義404錯誤頁面是如此的簡單。 示例3-8. templates/404.html:使用模板繼承自定義404錯誤頁面 圖片3-2展示在瀏覽器中錯誤頁面是怎樣的。 圖片3-2. 自定義404錯誤頁面 現(xiàn)在templates/user.html模板可以通過繼承基礎(chǔ)模板來簡化它,就像示例3-9展示的這樣。 示例3-9. templates/user.html:使用模板繼承簡化頁面模板 建議:如果你有克隆在GitHub上的應(yīng)用程序,你現(xiàn)在可以運行git checkout 3c來切換到這個版本的應(yīng)用程序。 文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/37433.html 摘要:每個表單域都可以連接到一個或多個是一個用于檢查用戶提交的輸入是否合法的函數(shù)。表單域構(gòu)造函數(shù)的第一個參數(shù)是一個,在渲染表單到時會使用。驗證確保提交的表單域不為空。表單域驗證都是直接從包中導(dǎo)入。表格展示了一組支持的標(biāo)準(zhǔn)表單域。
第二章中介紹的request對象公開了所有客戶端發(fā)送的請求信息。特別是request.form可以訪問POST請求提交的表單數(shù)據(jù)。
盡管Flask的request... 摘要:如果路由重組,模板中的鏈接將被打斷而變得無法訪問。靜態(tài)文件應(yīng)用程序不僅僅是由代碼和模板組成。當(dāng)服務(wù)器收到來自之前示例的,它會產(chǎn)生一個響應(yīng)包含的文件內(nèi)容。一個優(yōu)雅的解決方案是允許服務(wù)器只發(fā)送時間給瀏覽器,由瀏覽器轉(zhuǎn)為當(dāng)?shù)貢r間并渲染。
4、鏈接
任何應(yīng)用程序都有多個路由,必然需要包含鏈接來連接不同的頁面,例如導(dǎo)航欄。
在模板中,對于簡單的路由直接寫URLs做鏈接是非常瑣碎麻煩的,而給帶... 摘要:用真實的值替換變量并返回最終響應(yīng)字符串,這個過程稱為渲染。示例展示模板實現(xiàn)該響應(yīng)。控制結(jié)構(gòu)提供一些控制結(jié)構(gòu)用于改變模板流。這個示例展示如何使用循環(huán)做到這些同樣支持宏,這和代碼中的函數(shù)很像。
寫代碼最關(guān)鍵的是要易于維護(hù)且結(jié)構(gòu)清晰整潔。目前為止,你看到的例子都過于簡單從而沒有做這方面的要求。Flask視圖函數(shù)希望將兩個應(yīng)該完全獨立的任務(wù)一并處理,兩個任務(wù)有兩種代碼,一并處理勢必會引發(fā)問題。... 摘要:函數(shù)攜帶目的地址主題郵件體模板和一組關(guān)鍵字參數(shù)。許多擴(kuò)展操作是在假設(shè)有活動的應(yīng)用程序和請求上下文的情況下進(jìn)行的。但是當(dāng)函數(shù)在一個不同的線程上執(zhí)行,應(yīng)用程序上下文需要人為地創(chuàng)建使用。例如,執(zhí)行函數(shù)可以將郵件發(fā)送到的任務(wù)隊列中。
許多類型的應(yīng)用程序都會在某些事件發(fā)生的時候通知用戶,常用的溝通方法就是電子郵件。盡管在Flask應(yīng)用程序中,可以使用Python標(biāo)準(zhǔn)庫中的smtplib包來發(fā)送電... 摘要:局部變量用于保存從表單中接收到的名字,初始化時變量為。在語句中,這個名字被賦值給局部變量且表單域的數(shù)據(jù)屬性通過賦值為空字符串而被清除。示例重定向和用戶會話在上一個版本中,局部變量用于保存用戶在表單中輸入的姓名。
4、視圖函數(shù)中的表單操作
在新版本的hello.py中,index()視圖函數(shù)渲染表單并接收其數(shù)據(jù)。示例4-4展示更新后的index()視圖函數(shù)。
示例4-4. hello... 閱讀 1449·2021-09-28 09:44 閱讀 2515·2021-09-28 09:36 閱讀 1170·2021-09-08 09:35 閱讀 1990·2019-08-29 13:50 閱讀 818·2019-08-29 13:29 閱讀 1139·2019-08-29 13:15 閱讀 1731·2019-08-29 13:00 閱讀 2997·2019-08-26 16:16
{% block scripts %}
{{ super() }}
{% endblock %}
3、自定義錯誤頁面
@app.errorhandler(404)
def page_not_found(e):
return render_template("404.html"), 404
@app.errorhandler(500)
def internal_server_error(e):
return render_template("500.html"), 500
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
{% endblock %}
{% block content %}
{% extends "base.html" %}
{% block title %}Flasky - Page Not Found{% endblock %}
{% block page_content %}
Not Found
{% extends "base.html" %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
Hello, {{ name }}!
相關(guān)文章
Flask Web Development —— Web表單(上)
Flask Web Development —— 模板(下)
Flask Web Development —— 模板(上)
Flask Web Development —— Email
Flask Web Development —— Web表單(下)
發(fā)表評論
0條評論
eternalshallow
男|高級講師
TA的文章
閱讀更多
如何提交百度新聞源?百度新聞源申請方法步驟
程序員年紀(jì)大了以后都去了哪里
NXP RT1064學(xué)習(xí)筆記(一)— 開發(fā)環(huán)境
css總結(jié)
如何使用Flexbox和CSS Grid,實現(xiàn)高效布局
史上前端面試最全問答(附答案)
前端面試題2017(篇幅長,附答案)
巧用命令行工具UCloud CLI,輕量操作API管理云資源