Python---Flask--02--模板

時間 2019-12-13

原文原文鏈接

把業務邏輯和表現邏輯混在一塊兒會致使代碼難以理解和維護。假設要爲一個大型表格構建HTML 代碼，表格中的數據由數據庫中讀取的數據以及必要的 HTML 字符串鏈接在一塊兒。把表現邏輯移到模板中可以提高程序的可維護性。javascript

模板是一個包含響應文本的文件，其中包含用佔位變量表示的動態部分，其具體值只在請求的上下文中才能知道。使用真實值替換變量，再返回最終獲得的響應字符串，這一過程稱爲渲染。爲了渲染模板，Flask 使用了一個名爲 Jinja2 的強大模板引擎。css

Flask 默認的模板文件存放在templates目錄下面。html

建立模板

建立teamplates/index.html模板java

<h1>Hello Flask</h1>

建立teamplate/user.html模板python

<h1>{{ name }}</h1>

渲染模板

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/)
def index():
    return render_template('index.html')

@app.route('/user')
def user():
    return render_template('user.html', name='Flask')


if __name__ == '__main__':
    app.run(DEBUG=True)

模板變量

在模板中使用的 {{ name }} 結構表示一個變量，它是一種特殊的佔位符，告訴模
板引擎這個位置的值從渲染模板時使用的數據中獲取。
Jinja2 能識別全部類型的變量，甚至是一些複雜的類型，例如列表、字典和對象。在模板
中使用變量的一些示例以下：數據庫

<p>A value from a dictionary: {{ mydict['key'] }}.</p>
<p>A value from a list: {{ mylist[3] }}.</p>
<p>A value from a list, with a variable index: {{ mylist[myintvar] }}.</p>
<p>A value from an object's method: {{ myobj.somemethod() }}.</p>

可使用過濾器修改變量，過濾器名添加在變量名以後，中間使用豎線分隔。例如，下述
模板以首字母大寫形式顯示變量 name 的值：flask

Hello, {{ name|capitalize }}

列出了 Jinja2 提供的部分經常使用過濾器。
Jinja2變量過濾器bootstrap

過濾器名	說　　明
safe	渲染值時不轉義
capitalize	把值的首字母轉換成大寫，其餘字母轉換成小寫
lower	把值轉換成小寫形式
upper	把值轉換成大寫形式
title	把值中每一個單詞的首字母都轉換成大寫
trim	把值的首尾空格去掉
striptags	渲染以前把值中全部的 HTML 標籤都刪掉
safe	過濾器值得特別說明一下。默認狀況下，出於安全考慮，Jinja2 會轉義全部變量。例

如，若是一個變量的值爲 '<h1>Hello</h1>'，Jinja2 會將其渲染成 '<h1>Hello</
h1>'，瀏覽器能顯示這個 h1 元素，但不會進行解釋。不少狀況下須要顯示變量中存儲
的 HTML 代碼，這時就可以使用 safe 過濾器。api

控制結構

Jinja2 提供了多種控制結構，可用來改變模板的渲染流程。使用簡單的例子介紹其中最有用的控制結構。
下面這個例子展現瞭如何在模板中使用條件控制語句：瀏覽器

{% if user %}
 Hello, {{ user }}!
{% else %}
 Hello, Stranger!
{% endif %}

另外一種常見需求是在模板中渲染一組元素。下例展現瞭如何使用 for 循環實現這一需求：

<ul>
 {% for comment in comments %}
 <li>{{ comment }}</li>
 {% endfor %}
</ul>

Jinja2 還支持宏。宏相似於 Python 代碼中的函數。例如：

{% macro render_comment(comment) %}
 <li>{{ comment }}</li>
{% endmacro %}
<ul>
 {% for comment in comments %}
 {{ render_comment(comment) }}
 {% endfor %}
</ul>

爲了重複使用宏，咱們能夠將其保存在單獨的文件中，而後在須要使用的模板中導入：

{% import 'macros.html' as macros %}
<ul>
 {% for comment in comments %}
 {{ macros.render_comment(comment) }}
 {% endfor %}
</ul>

須要在多處重複使用的模板代碼片斷能夠寫入單獨的文件，再包含在全部模板中，以免重複：

{% include 'common.html' %}

另外一種重複使用代碼的強大方式是模板繼承，它相似於 Python 代碼中的類繼承。首先，建立一個名爲 base.html 的基模板：

<html>
<head>
 {% block head %}
 <title>{% block title %}{% endblock %} - My Application</title>
 {% endblock %}
</head>
<body>
 {% block body %}
 {% endblock %}
</body>
</html>

block 標籤訂義的元素可在衍生模板中修改。在本例中，咱們定義了名爲 head、title 和body 的塊。注意，title 包含在 head 中。下面這個示例是基模板的衍生模板：

{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
 {{ super() }}
 <style>
 </style>
{% endblock %}
{% block body %}
<h1>Hello, World!</h1>
{% endblock %}

extends 指令聲明這個模板衍生自 base.html。在 extends 指令以後，基模板中的 3 個塊被從新定義，模板引擎會將其插入適當的位置。注意新定義的 head 塊，在基模板中其內容不是空的，因此使用 super() 獲取原來的內容。稍後會展現這些控制結構的具體用法，讓你瞭解一下它們的工做原理。

使用Flask_bootstrap 擴展

Bootstrap（http://getbootstrap.com/）是 Twitter 開發的一個開源框架，它提供的用戶界面組件可用於建立整潔且具備吸引力的網頁，並且這些網頁還能兼容全部現代 Web 瀏覽器。
Bootstrap 是客戶端框架，所以不會直接涉及服務器。服務器須要作的只是提供引用了Bootstrap 層疊樣式表（CSS）和 JavaScript 文件的 HTML 響應，並在 HTML、CSS 和JavaScript 代碼中實例化所需組件。這些操做最理想的執行場所就是模板。
要想在程序中集成 Bootstrap，顯然要對模板作全部必要的改動。不過，更簡單的方法是使用一個名爲 Flask-Bootstrap 的 Flask 擴展，簡化集成的過程。

安裝

pip install flask_bootstrap

使用

初始化Flask_bootstrap

from flask import Flask
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstarp = Bootstrap(app)

templates/user.html：使用 Flask-Bootstrap 的模板

{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle"
 data-toggle="collapse" data-target=".navbar-collapse">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="/">Flasky</a>
 </div>
 <div class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li><a href="/">Home</a></li>
 </ul>
 </div>
 </div>
</div>
{% endblock %}
{% block content %}
<div class="container">
 <div class="page-header">
 <h1>Hello, {{ name }}!</h1>
 </div>
</div>
{% endblock %}

Jinja2 中的 extends 指令從 Flask-Bootstrap 中導入 bootstrap/base.html，從而實現模板繼承。Flask-Bootstrap 中的基模板提供了一個網頁框架，引入了 Bootstrap 中的全部 CSS 和模板JavaScript 文件。
基模板中定義了可在衍生模板中重定義的塊。block 和 endblock 指令定義的塊中的內容可添加到基模板中。
上面這個 user.html 模板定義了 3 個塊，分別名爲 title、navbar 和 content。這些塊都是基模板提供的，可在衍生模板中從新定義。title 塊的做用很明顯，其中的內容會出如今渲染後的 HTML 文檔頭部，放在標籤中。navbar 和 content 這兩個塊分別表示頁
面中的導航條和主體內容。
在這個模板中，navbar 塊使用 Bootstrap 組件定義了一個簡單的導航條。content 塊中有個

容器，其中包含一個頁面頭部。以前版本的模板中的歡迎信息，如今就放在這個頁面頭部。

Flask-Bootstrap 的 base.html 模板還定義了不少其餘塊，均可在衍生模板中使用。表 3-2 列
出了全部可用的快。
Flask-Bootstrap基模板中定義的塊
|塊　　名| 說　　明|
|---|---|
|doc| 整個 HTML 文檔|
|html_attribs| 標籤的屬性|
|html| 標籤中的內容|
|head | 標籤中的內容|
|title | 標籤中的內容|
|metas| 一組標籤|
|styles |層疊樣式表定義|
|body_attribs| 標籤的屬性|
|body | 標籤中的內容|
|navbar| 用戶定義的導航條|
|content |用戶定義的頁面內容|
|scripts| 文檔底部的 JavaScript 聲明|
表中的不少塊都是 Flask-Bootstrap 自用的，若是直接重定義可能會致使一些問題。例如，Bootstrap 所需的文件在 styles 和 scripts 塊中聲明。若是程序須要向已經有內容的塊中添加新內容，必須使用 Jinja2 提供的 super() 函數。例如，若是要在衍生模板中添加新的 JavaScript 文件，須要這麼定義 scripts 塊：

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>

模板中的連接

任何具備多個路由的程序都須要能夠鏈接不一樣頁面的連接，例如導航條。

在模板中直接編寫簡單路由的 URL 連接不難，但對於包含可變部分的動態路由，在模板中構建正確的 URL 就很困難。並且，直接編寫 URL 會對代碼中定義的路由產生沒必要要的依賴關係。若是從新定義路由，模板中的連接可能會失效。
爲了不這些問題，Flask 提供了 url_for() 輔助函數，它可使用程序 URL 映射中保存的信息生成 URL。

url_for() 函數最簡單的用法是以視圖函數名（或者 app.add_url_route() 定義路由時使用的端點名）做爲參數，返回對應的 URL。例如，在當前版本的 hello.py 程序中調用 url_for('index') 獲得的結果是 /。調用 url_for('index', _external=True) 返回的則是絕對地
址，在這個示例中是 http://localhost:5000/。生成鏈接程序內不一樣路由的連接時，使用相對地址就足夠了。若是要生成在瀏覽器以外使用的連接，則必須使用絕對地址，例如在電子郵件中發送的連接。

使用 url_for() 生成動態地址時，將動態部分做爲關鍵字參數傳入。例如，url_for('user', name='john', _external=True) 的返回結果是 http://localhost:5000/user/john。

傳入 url_for() 的關鍵字參數不只限於動態路由中的參數。函數能將任何額外參數添加到查詢字符串中。例如，url_for('index', page=2) 的返回結果是 /?page=2。

靜態文件

Web 程序不是僅由 Python 代碼和模板組成。大多數程序還會使用靜態文件，例如 HTML代碼中引用的圖片、JavaScript 源碼文件和 CSS。

這是由於對靜態文件的引用被當成一個特殊的路由，即 /static/ 。例如，調用url_for('static', filename='css/styles.css', _external=True) 得到的結果是 http://localhost:5000/static/css/styles.css。

默認設置下，Flask 在程序根目錄中名爲 static 的子目錄中尋找靜態文件。若是須要，可在static 文件夾中使用子文件夾存放文件。服務器收到前面那個 URL 後，會生成一個響應，包含文件系統中 static/css/styles.css 文件的內容。

如何在程序的基模板中放置 favicon.ico 圖標。這個圖標會顯示在瀏覽器的
地址欄中。
templates/base.html：定義收藏夾圖標

{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename = 'favicon.ico') }}"
 type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename = 'favicon.ico') }}"
 type="image/x-icon">
{% endblock %}

圖標的聲明會插入 head 塊的末尾。注意如何使用 super() 保留基模板中定義的塊的原始內容。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。