【Flask使用】全知識md文檔，4大部分60頁第3篇：Flask模板使用和案例

本文的主要內容：flask視圖&路由、虛擬環境安裝、路由各種定義、狀態保持、cookie、session、模板基本使用、過濾器&自定義過濾器、模板代碼復用：宏、繼承/包含、模板中特有變量和函數、Flask-WTF 表單、CSRF、數據庫操作、ORM、Flask-SQLAlchemy、增刪改查操作、案例、藍圖、單元測試

全套Flask筆記直接地址：請移步這里

共 4 章，42 子模塊

模板

基本使用
過濾器&自定義過濾器
控制代碼塊
宏、繼承、包含
Flask 的模板中特有變量和方法
web表單
CSRF

學習目標

能夠寫出 jinja2 中變量代碼塊和控制代碼塊的格式
能夠寫出在模板中字典，列表的取值方式
能夠寫出數組反轉的自定義過濾器（使用1種方式即可）
能夠說出Flask中模板代碼復用的三種方式
能夠使用代碼實現模板繼承的功能
能夠說出可以在模板中直接使用的 Flask 變量和函數
能夠使用 Flask-WTF 擴展實現注冊表單
能夠說出 CSRF 攻擊的原理

模板的使用

在項目下創建 templates 文件夾，用于存放所有的模板文件，并在目錄下創建一個模板html文件 temp_demo1.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
我的模板html內容
</body>
</html>

設置 templates 文件夾屬性以便能夠在代碼中有智能提示

設置 html 中的模板語言，以便在 html 有智能提示

創建視圖函數，將該模板內容進行渲染返回

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

訪問：http://127.0.0.1:5000/ 運行測試

代碼中傳入字符串，列表，字典到模板中

@app.route('/')
def index():# 往模板中傳入的數據my_str = 'Hello 黑馬程序員'my_int = 10my_array = [3, 4, 2, 1, 7, 9]my_dict = {'name': 'xiaoming','age': 18}return render_template('temp_demo1.html',my_str=my_str,my_int=my_int,my_array=my_array,my_dict=my_dict)

模板中代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
我的模板html內容
<br/>{{ my_str }}
<br/>{{ my_int }}
<br/>{{ my_array }}
<br/>{{ my_dict }}</body>
</html>

運行效果

我的模板html內容
Hello 黑馬程序員
10
[3, 4, 2, 1, 7, 9]
{‘name’: ‘xiaoming’, ‘age’: 18}Code injected by live-server

相關運算，取值

<br/> my_int + 10 的和為：{{ my_int + 10 }}
<br/> my_int + my_array第0個值的和為：{{ my_int + my_array[0] }}
<br/> my_array 第0個值為：{{ my_array[0] }}
<br/> my_array 第1個值為：{{ my_array.1 }}
<br/> my_dict 中 name 的值為：{{ my_dict['name'] }}
<br/> my_dict 中 age 的值為：{{ my_dict.age }}

結果

my_int + 10 的和為：20 
my_int + my_array第0個值的和為：13 
my_array 第0個值為：3 
my_array 第1個值為：4 
my_dict 中 name 的值為：xiaoming 
my_dict 中 age 的值為：18

過濾器

過濾器的本質就是函數。有時候我們不僅僅只是需要輸出變量的值，我們還需要修改變量的顯示，甚至格式化、運算等等，而在模板中是不能直接調用 Python 中的某些方法，那么這就用到了過濾器。

使用方式：

過濾器的使用方式為：變量名 | 過濾器。

{{variable | filter_name(*args)}}

如果沒有任何參數傳給過濾器,則可以把括號省略掉

{{variable | filter_name}}

如：``，這個過濾器的作用：把變量variable 的值的首字母轉換為大寫，其他字母轉換為小寫

鏈式調用

在 jinja2 中，過濾器是可以支持鏈式調用的，示例如下：

{{ "hello world" | reverse | upper }}

常見內建過濾器

字符串操作

safe：禁用轉義

<p>{{ '<em>hello</em>' | safe }}</p>

capitalize：把變量值的首字母轉成大寫，其余字母轉小寫

<p>{{ 'hello' | capitalize }}</p>

lower：把值轉成小寫

<p>{{ 'HELLO' | lower }}</p>

upper：把值轉成大寫

<p>{{ 'hello' | upper }}</p>

title：把值中的每個單詞的首字母都轉成大寫

<p>{{ 'hello' | title }}</p>

reverse：字符串反轉

<p>{{ 'olleh' | reverse }}</p>

format：格式化輸出

<p>{{ '%s is %d' | format('name',17) }}</p>

striptags：渲染之前把值中所有的HTML標簽都刪掉

<p>{{ '<em>hello</em>' | striptags }}</p>

列表操作

first：取第一個元素

<p>{{ [1,2,3,4,5,6] | first }}</p>

last：取最后一個元素

<p>{{ [1,2,3,4,5,6] | last }}</p>

length：列表長度

<p>{{ [1,2,3,4,5,6] | length }}</p>

sum：列表求和

<p>{{ [1,2,3,4,5,6] | sum }}</p>

sort：列表排序

<p>{{ [6,2,3,1,5,4] | sort }}</p>

語句塊過濾

{% filter upper %}#一大堆文字#
{% endfilter %}

自定義過濾器

過濾器的本質是函數。當模板內置的過濾器不能滿足需求，可以自定義過濾器。自定義過濾器有兩種實現方式：

一種是通過Flask應用對象的 add_template_filter 方法
通過裝飾器來實現自定義過濾器

重要：自定義的過濾器名稱如果和內置的過濾器重名，會覆蓋內置的過濾器。

需求：添加列表反轉的過濾器

方式一

通過調用應用程序實例的 add_template_filter 方法實現自定義過濾器。該方法第一個參數是函數名，第二個參數是自定義的過濾器名稱：

def do_listreverse(li):# 通過原列表創建一個新列表temp_li = list(li)# 將新列表進行返轉temp_li.reverse()return temp_liapp.add_template_filter(do_listreverse,'lireverse')

方式二

用裝飾器來實現自定義過濾器。裝飾器傳入的參數是自定義的過濾器名稱。

@app.template_filter('lireverse')
def do_listreverse(li):# 通過原列表創建一個新列表temp_li = list(li)# 將新列表進行返轉temp_li.reverse()return temp_li

在 html 中使用該自定義過濾器

<br/> my_array 原內容：{{ my_array }}
<br/> my_array 反轉：{{ my_array | lireverse }}

運行結果

my_array 原內容：[3, 4, 2, 1, 7, 9] 
my_array 反轉：[9, 7, 1, 2, 4, 3]

控制代碼塊

控制代碼塊主要包含兩個：

- if/else if /else / endif
- for / endfor

if語句

Jinja2 語法中的if語句跟 Python 中的 if 語句相似,后面的布爾值或返回布爾值的表達式將決定代碼中的哪個流程會被執行:

{%if user.is_logged_in() %}<a href='/logout'>Logout</a>
{% else %}<a href='/login'>Login</a>
{% endif %}

過濾器可以被用在 if 語句中:

{% if comments | length > 0 %}There are {{ comments | length }} comments
{% else %}There are no comments
{% endif %}

循環

我們可以在 Jinja2 中使用循環來迭代任何列表或者生成器函數

{% for post in posts %}<div><h1>{{ post.title }}</h1><p>{{ post.text | safe }}</p></div>
{% endfor %}

循環和if語句可以組合使用，以模擬 Python 循環中的 continue 功能，下面這個循環將只會渲染post.text不為None的那些post：

{% for post in posts if post.text %}<div><h1>{{ post.title }}</h1><p>{{ post.text | safe }}</p></div>
{% endfor %}

在一個 for 循環塊中你可以訪問這些特殊的變量:

變量	描述
loop.index	當前循環迭代的次數（從 1 開始）
loop.index0	當前循環迭代的次數（從 0 開始）
loop.revindex	到循環結束需要迭代的次數（從 1 開始）
loop.revindex0	到循環結束需要迭代的次數（從 0 開始）
loop.first	如果是第一次迭代，為 True 。
loop.last	如果是最后一次迭代，為 True 。
loop.length	序列中的項目數。
loop.cycle	在一串序列間期取值的輔助函數。見下面示例程序。

在循環內部,你可以使用一個叫做loop的特殊變量來獲得關于for循環的一些信息
- 比如：要是我們想知道當前被迭代的元素序號，并模擬Python中的enumerate函數做的事情，則可以使用loop變量的index屬性,例如:

{% for post in posts%}
{{loop.index}}, {{post.title}}
{% endfor %}

會輸出這樣的結果

1, Post title
2, Second Post

cycle函數會在每次循環的時候,返回其參數中的下一個元素,可以拿上面的例子來說明:

{% for post in posts%}
{{loop.cycle('odd','even')}} {{post.title}}
{% endfor %}

會輸出這樣的結果：

odd Post Title
even Second Post

示例程序

實現的效果

準備數據

  # 只顯示4行數據，背景顏色依次為：黃，綠，紅，紫my_list = [{"id": 1,"value": "我愛工作"},{"id": 2,"value": "工作使人快樂"},{"id": 3,"value": "沉迷于工作無法自拔"},{"id": 4,"value": "日漸消瘦"},{"id": 5,"value": "以夢為馬，越騎越傻"}
]

模板代碼

{% for item in my_list if item.id != 5 %}{% if loop.index == 1 %}<li style="background-color: orange">{{ item.value }}</li>{% elif loop.index == 2 %}<li style="background-color: green">{{ item.value }}</li>{% elif loop.index == 3 %}<li style="background-color: red">{{ item.value }}</li>{% else %}<li style="background-color: purple">{{ item.value }}</li>{% endif %}
{% endfor %}

模板代碼復用

在模板中，可能會遇到以下情況：

多個模板具有完全相同的頂部和底部內容
多個模板中具有相同的模板代碼內容，但是內容中部分值不一樣
多個模板中具有完全相同的 html 代碼塊內容

像遇到這種情況，可以使用 JinJa2 模板中的宏、繼承、包含來進行實現

宏

對宏(macro)的理解：

把它看作 Jinja2 中的一個函數，它會返回一個模板或者 HTML 字符串
為了避免反復地編寫同樣的模板代碼，出現代碼冗余，可以把他們寫成函數以進行重用
需要在多處重復使用的模板代碼片段可以寫入單獨的文件，再包含在所有模板中，以避免重復

使用

定義宏

{% macro input(name,value='',type='text') %}<input type="{{type}}" name="{{name}}"value="{{value}}" class="form-control">
{% endmacro %}

調用宏

{{ input('name' value='zs')}}

這會輸出

<input type="text" name="name"value="zs" class="form-control">

把宏單獨抽取出來，封裝成html文件，其它模板中導入使用，文件名可以自定義macro.html

{% macro function(type='text', name='', value='') %}
<input type="{{type}}" name="{{name}}"
value="{{value}}" class="form-control">{% endmacro %}

在其它模板文件中先導入，再調用

{% import 'macro.html' as func %}
{% func.function() %}

代碼演練

使用宏之前代碼

<form><label>用戶名：</label><input type="text" name="username"><br/><label>身份證號：</label><input type="text" name="idcard"><br/><label>密碼：</label><input type="password" name="password"><br/><label>確認密碼：</label><input type="password" name="password2"><br/><input type="submit" value="注冊">
</form>

定義宏

{#定義宏，相當于定義一個函數，在使用的時候直接調用該宏，傳入不同的參數就可以了#}
{% macro input(label="", type="text", name="", value="") %}
<label>{{ label }}</label><input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}

使用宏

<form>{{ input("用戶名：", name="username") }}<br/>{{ input("身份證號：", name="idcard") }}<br/>{{ input("密碼：", type="password", name="password") }}<br/>{{ input("確認密碼：", type="password", name="password2") }}<br/>{{ input(type="submit", value="注冊") }}
</form>

模板繼承

模板繼承是為了重用模板中的公共內容。一般Web開發中，繼承主要使用在網站的頂部菜單、底部。這些內容可以定義在父模板中，子模板直接繼承，而不需要重復書寫。

標簽定義的內容

{% block top %} {% endblock %}

相當于在父模板中挖個坑，當子模板繼承父模板時，可以進行填充。
子模板使用 extends 指令聲明這個模板繼承自哪個模板
父模板中定義的塊在子模板中被重新定義，在子模板中調用父模板的內容可以使用super()

父模板

base.html

{% block top %}頂部菜單
{% endblock top %}{% block content %}
{% endblock content %}{% block bottom %}底部
{% endblock bottom %}

子模板

extends指令聲明這個模板繼承自哪

{% extends 'base.html' %}
{% block content %}需要填充的內容
{% endblock content %}

模板繼承使用時注意點：
- 不支持多繼承
- 為了便于閱讀，在子模板中使用extends時，盡量寫在模板的第一行。
- 不能在一個模板文件中定義多個相同名字的block標簽。
- 當在頁面中使用多個block標簽時，建議給結束標簽起個名字，當多個block嵌套時，閱讀性更好。