Flask Web Development —— 模板（下）

raoyi 發(fā)布于2019-07-24 17:49 / 3555人閱讀

摘要：如果路由重組，模板中的鏈接將被打斷而變得無法訪問。靜態(tài)文件應用程序不僅僅是由代碼和模板組成。當服務器收到來自之前示例的，它會產生一個響應包含的文件內容。一個優(yōu)雅的解決方案是允許服務器只發(fā)送時間給瀏覽器，由瀏覽器轉為當?shù)貢r間并渲染。

4、鏈接

任何應用程序都有多個路由，必然需要包含鏈接來連接不同的頁面，例如導航欄。

在模板中，對于簡單的路由直接寫URLs做鏈接是非?，嵥槁闊┑?，而給帶有變量部分的動態(tài)路由建立正確的URLs會變得更加復雜。此外，在代碼中顯式的寫URLs會在路由上造成不必要的依賴。如果路由重組，模板中的鏈接將被打斷而變得無法訪問。

為了避免這些問題，F(xiàn)lask提供url_for()函數(shù)，它會根據存放在應用程序中的URL映射信息來生成URLs。

其最簡單的用法，這個函數(shù)傳入視圖函數(shù)名（或通過app.add_url_route()定義的路由endpoint名）作為它的參數(shù)，然后返回它的URL。例如，在當前版本的hello.py調用url_for("index")將返回/。調用url_for("index", _external=True)將返回一個絕對URL，在該示例中為http://localhost:5000/。

注：相對URLs足以滿足生成鏈接來連接應用程序不同的路由。絕對URLs只有在鏈接被用于web瀏覽器的外部才是必須的，例如通過郵件發(fā)送鏈接。

可以使用url_for()并傳遞動態(tài)部分作為關鍵字參數(shù)來生成動態(tài)URLs。例如，url_for("user", name="join", external=True)會返回http://localhost:5000/user/john。

url_for()可以不限參數(shù)的使用動態(tài)路由。函數(shù)會增加擴展參數(shù)給查詢字符串。例如url_for("index", page=2)會返回/?page=2。

5、靜態(tài)文件

Web應用程序不僅僅是由Python代碼和模板組成。大部分的應用程序會使用靜態(tài)文件，例如從HTML代碼中引用的圖片、JavaScript源文件和CSS。

你可能需要回憶一下，在第二章中檢查hello.py應用程序的URL映射時，有一個static入口在里面。這也是為什么引用定義成/static/的靜態(tài)文件會被當作特殊路由來對待。例如，一個url_for("static", filename="css/style.css", _external=True)調用會返回http://localhost:5000/static/css/styles.css。

在它的默認配置中，F(xiàn)lask會在位于應用程序根目錄下名為static的子目錄中尋找靜態(tài)文件。可以在這個目錄下的子目錄組織管理文件。當服務器收到來自之前示例的URL，它會產生一個響應包含static/css/styles.css的文件內容。

示例3-10展示應用程序如何在基礎模板中包含favicon.icon圖標并讓瀏覽器將其顯示在地址欄。

示例3-10. templates/base.html：favicon定義

{% block head %}
{{ super() }}

 
{% endblock %}

圖標定義被插入在head塊里的最下面。注意super()是如何保留定義在基礎模板中塊的原始內容的。

建議：如果你有克隆在GitHub上的應用程序，你現(xiàn)在可以運行git checkout 3d來切換到這個版本的應用程序。

6、Flask-Moment中的本地化日期和時間

當用戶工作在世界各個不同的地方，在web應用程序中處理日期和時間就變成了一個比較重要的問題。

服務器使用統(tǒng)一的時間單位，和每個用戶的位置無關，所以使用世界標準時間（UTC）。對于用戶，看到UTC格式的時間肯定會感到困惑，用戶總是希望看到根據當?shù)亓晳T顯示的日期和時間。

一個優(yōu)雅的解決方案是允許服務器只發(fā)送UTC時間給web瀏覽器，由瀏覽器轉為當?shù)貢r間并渲染。Web瀏覽器在這個問題上做的更好，因為他們可以訪問用戶電腦的所在的時區(qū)和地區(qū)設置。

有一個優(yōu)秀的客戶端開源庫moment.js，用JavaScript編寫的，用于在瀏覽器上渲染日期和時間。Flask-Moment是一個集成moment.js到Jinja2模板的Flask擴展。可以通過pip來安裝：

(venv) $ pip install flask-moment

示例3-11展示擴展初始化。

示例3-11. hello.py：初始化Flask-Moment

from flask.ext.moment import Moment
moment = Moment(app)

Flask-Moment除了依賴moment.js外，還依賴jquery.js。這兩個庫需要直接包含在HTML文檔，這種情況下你可以選擇使用什么版本，或通過擴展提供的幫助函數(shù)來引用內容分發(fā)網絡（CDN）的測試版本庫。因為Bootstrap已經包含了jquery.js，所以只需要將moment.js增加到這個示例中。示例3-12展示這個庫是如何被加載到基礎模板scripts中的。

示例3-12. templates/base.html：導入moment.js庫

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}

為了可以使用時間戳，F(xiàn)lask-Moment創(chuàng)建moment類給模板使用。示例3-13傳遞current_time變量給模板去渲染。

示例3-13. hello.py：增加datetime變量

from datetime import datetime

@app.route("/") 
def index():
    return render_template("index.html", current_time=datetime.utcnow())

示例3-14展示如何在模板中渲染current_time。

示例3-14. templates/index.html：使用Flask-Moment渲染時間戳

The local date and time is {{ moment(current_time).format("LLL") }}.
That was {{ moment(current_time).fromNow(refresh=True) }}

format("LLL")根據客戶端電腦的時區(qū)和地區(qū)設置來格式化顯示日期和時間。參數(shù)決定了渲染的樣式，從L到LLL對應不同的詳細級別。format()函數(shù)還可以接受自定義的格式說明符。

fromNow()渲染樣式顯示在第二行，渲染一個相對時間戳并隨著時間的推移自動刷新它。最初這個時間戳將顯示為“幾秒鐘前”，但隨著時間的流逝刷新選項將保持更新，所以如果你離開已打開幾分鐘的頁面你會看到文本變?yōu)椤耙环昼娗啊?，然后“兩分鐘前”，等等?/p>

建議：如果你有克隆在GitHub上的應用程序，你現(xiàn)在可以運行git checkout 3e來切換到這個版本的應用程序。

Flask-Moment通過moment.js實現(xiàn)了format()，fromNow()，fromTime()， calendar()，valueOf()和unix()方法。查閱文檔，了解提供的所有格式化選項。

注：Flask-Moment假定時間戳由服務端應用程序中表示成UTC格式的“naive”datetime對象來處理。參閱標準庫datetime包文檔關于date和time對象的navie和aware信息。

Flask-Moment渲染的時間戳可以本地化成多種語言。在模板中通過傳遞語言代碼到lang()函數(shù)來選擇語言：

{{ moment.lang("es") }}

學完本章中討論的所有技術，您應該能夠為您的應用程序構建現(xiàn)代、用戶友好的網頁。下一章涉及模板沒有討論的一個方面：如何通過web表單與用戶進行交互。

云服務器 GPU云服務器 web-development Flask_Web web模板 Development

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/37461.html

Flask Web Development —— Web表單（上）

摘要：每個表單域都可以連接到一個或多個是一個用于檢查用戶提交的輸入是否合法的函數(shù)。表單域構造函數(shù)的第一個參數(shù)是一個，在渲染表單到時會使用。驗證確保提交的表單域不為空。表單域驗證都是直接從包中導入。表格展示了一組支持的標準表單域。第二章中介紹的request對象公開了所有客戶端發(fā)送的請求信息。特別是request.form可以訪問POST請求提交的表單數(shù)據。盡管Flask的request...

CODING 2019-07-24 17:49 評論0 收藏0
Flask Web Development —— 模板（上）

摘要：用真實的值替換變量并返回最終響應字符串，這個過程稱為渲染。示例展示模板實現(xiàn)該響應?？刂平Y構提供一些控制結構用于改變模板流。這個示例展示如何使用循環(huán)做到這些同樣支持宏，這和代碼中的函數(shù)很像。寫代碼最關鍵的是要易于維護且結構清晰整潔。目前為止，你看到的例子都過于簡單從而沒有做這方面的要求。Flask視圖函數(shù)希望將兩個應該完全獨立的任務一并處理，兩個任務有兩種代碼，一并處理勢必會引發(fā)問題。...

fizz 2019-07-24 17:47 評論0 收藏0
Flask Web Development —— 模板（中）

摘要：示例使用的模板的指令通過從引用來實現(xiàn)模板的繼承。上面的模板定義了三個，分別命名為和。同時返回相應錯誤的數(shù)字狀態(tài)碼。示例帶有導航欄的基礎應用程序模板這個模板中的塊中只是一個名為的元素，它包含了在派生模板中定義的名為的空。 2、集成Twitter Bootstrap的Flask-Bootstrap Bootstrap是Twitter的一個開源框架，提供用戶交互組件來創(chuàng)建一個清新且有吸引力...

eternalshallow 2019-07-24 17:47 評論0 收藏0
Flask Web Development —— Email

摘要：函數(shù)攜帶目的地址主題郵件體模板和一組關鍵字參數(shù)。許多擴展操作是在假設有活動的應用程序和請求上下文的情況下進行的。但是當函數(shù)在一個不同的線程上執(zhí)行，應用程序上下文需要人為地創(chuàng)建使用。例如，執(zhí)行函數(shù)可以將郵件發(fā)送到的任務隊列中。許多類型的應用程序都會在某些事件發(fā)生的時候通知用戶，常用的溝通方法就是電子郵件。盡管在Flask應用程序中，可以使用Python標準庫中的smtplib包來發(fā)送電...

SKYZACK 2019-07-31 11:35 評論0 收藏0
Flask Web Development —— Web表單（下）

摘要：局部變量用于保存從表單中接收到的名字，初始化時變量為。在語句中，這個名字被賦值給局部變量且表單域的數(shù)據屬性通過賦值為空字符串而被清除。示例重定向和用戶會話在上一個版本中，局部變量用于保存用戶在表單中輸入的姓名。 4、視圖函數(shù)中的表單操作在新版本的hello.py中，index()視圖函數(shù)渲染表單并接收其數(shù)據。示例4-4展示更新后的index()視圖函數(shù)。示例4-4. hello...

yeooo 2019-07-24 17:51 評論0 收藏0