03-jinja2模板引擎

阿新 • • 發佈：2020-11-21

Flask內建的模板語言，它的設計思想來源於 Django 的模板引擎，並擴充套件了其語法和一系列強大的功能。

渲染模版函式

Flask提供的 render_template 函式封裝了該模板引擎
render_template 函式的第一個引數是模板的檔名，後面的引數都是鍵值對，表示模板中變數對應的真實值。

一、模板引擎的基本使用

1、載入模板並傳遞資料到模板中

from flask import Flask,render_template

app = Flask(__name__,template_folder="templates")

@app.route("/")
def 
 index():
    data = {}
    data["title"] = "我的第一個flask網頁"
    data["num"] = 100
    return render_template( "index1.html", **data )

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

template_folder指定模板在哪個位置

新建一個templates資料夾

index.html為

<!DOCTYPE html>
<html lang="en">
<head>
    < 
meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>{{title}}</h1>
    <p>num={{num}}</p>
</body>
</html>

2、模板語句

from flask import Flask,render_template

app = Flask(__name__,template_folder="templates")

@app.route("/")
def 
 index():
    data = {}
    data["info"] = {
        "name":"xiaoming",
        "age":19,
        "sex":True,
        "class": "1009"
    }
    data["student_list"] = ["xiaoming","xiaobai","xiaohei","xiaoan"]

    data["goods_list"] = [
        {"id":10,"name":"Python7天入門到放棄","price":99.9,"num":100},
        {"id":11,"name":"Python3天入門到放棄","price":99.9,"num":100},
        {"id":12,"name":"Python5天入門到放棄","price":99.9,"num":100},
        {"id":13,"name":"Go7天入門到放棄","price":99.9,"num":100},
        {"id":14,"name":"Go5天入門到放棄","price":99.9,"num":100},
        {"id":15,"name":"Linux7天入門到放棄","price":99.9,"num":100},
    ]

    return render_template( "index2.html", **data )

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

index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>訪問字典資料中的成員</p>
    <p>{{ info["name"] }}</p>
    <p>{{ info.name }}</p>

    <p>訪問列表數中的成員，點語法不支援負數下標</p>
    <p>{{ student_list.0 }}</p>
    <p>{{ student_list.2 }}</p>
    <p>{{ student_list[-1] }}</p>
    <p>{{ student_list[2] }}</p>

    <p>if判斷</p>
    {% if info.age < 18 %}
        <p>小明請出去</p>
    {% endif %}

    {% if info.age > 10 %}
        <p>小明同學</p>
    {% else %}
        <p>小明小朋友</p>
    {% endif %}

    {% if info.age < 10 %}
        <p>小明小朋友</p>
    {% elif info.age < 18 %}
        <p>小明同學</p>
    {% else %}
        <p>大明同學</p>
    {% endif %}

    <p>for迴圈</p>

    <ul>
        {% for student in student_list %}
            {% if loop.last %}
            <li style="background-color:#000;color:#fff;">{{ student }}</li>
            {% else %}
            <li>{{ student }}</li>
            {% endif %}
        {% endfor %}
    </ul>

    <table border="1" align="center" width="680px">
        <tr>
            <td>序號</td>
            <td>ID</td>
            <td>名稱</td>
            <td>價格</td>
            <td>庫存</td>
        </tr>
        {# flask的註釋 #}
        {# loop 是jinja模板引擎提供給開發者獲取迴圈中的資訊物件 #}
        {# loop.index  顯示本次迴圈的次數,從1開始 #}
        {# loop.index0 顯示本次迴圈的次數,從0開始 #}
        {# loop.first  顯示本次是否屬於迴圈的第一次,是則為真 #}
        {% for goods in goods_list %}
            {% if loop.index % 2 %}
            <tr bgcolor="#00bfff">
            {% else %}
            <tr>
            {% endif %}
                <td>{{ loop.index0 }}</td>
                <td>{{ goods.id }}</td>
                <td>{{ goods.name }}</td>
                <td>{{ goods.price }}</td>
                <td>{{ goods.num }}</td>
            </tr>
        {% endfor %}
    </table>

</body>
</html>

3、模板中顯示內建變數或函式

你可以在自己的模板中訪問一些 Flask 預設內建的函式和物件

config

你可以從模板中直接訪問Flask當前的config物件:

{{config.SQLALCHEMY_DATABASE_URI}}
sqlite:///database.db

request

就是flask中代表當前請求的request物件：

{{request.url}}
http://127.0.0.1

session

為Flask的session物件，顯示session資料

{{session.new}}
True

g變數

在檢視函式中設定g變數的 name 屬性的值，然後在模板中直接可以取出

{{ g.name }}

url_for()

url_for會根據傳入的路由器函式名,返回該路由對應的URL,在模板中始終使用url_for()就可以安全的修改路由繫結的URL,則不比擔心模板中渲染出錯的連結:

{{url_for('home')}}

如果我們定義的路由URL是帶有引數的,則可以把它們作為關鍵字引數傳入url_for(),Flask會把他們填充進最終生成的URL中:

{{ url_for('index', post_id=1)}}
/1

程式碼：

from flask import Flask, render_template
# 初始化
app = Flask(import_name=__name__,template_folder='templates')

# 配置終端指令碼執行專案
from flask_script import Manager
manager = Manager(app)

# 宣告和載入配置
class Config():
    DEBUG = True
    SECRET_KEY = "abc"
app.config.from_object(Config)

# 編寫路由檢視
@app.route(rule='/')
def index():
    data={}
    data["title"] = "我的專案"
    data["list"] = ["a","b","c"]
    data["dict"] = {
        "name":"xiaoming",
        "id":100,
    }
    return render_template("index.html",**data)

from flask import session
@app.route("/session/set")
def set_session():
    session["name"] = "root"
    return "ok"

if __name__ == '__main__':
    # 執行flask
    manager.run()

模板 templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <div>{{title}}</div>
    <div>{{list}}</div>
    <div>{{list[0]}}</div>
    <div>{{list.0}}</div>
    <div>{{list[-1]}}</div>
    <div>{{dict}}</div>
    <div>{{dict['name']}}</div>
    {# flask模板引擎的註釋 #}
    {# <div>{{dict.name}}</div> #}
    <div>{{config}}</div>
    <div>{{config.DEBUG}}</div>
    <div>name={{request.args.name}}</div>
    <div>session.name={{session.name}}</div>
    <div>{{config.PREFERRED_URL_SCHEME}}://{{request.headers.Host}}{{url_for("set_session")}}</div>
</body>
</html>

示例2:

from flask import Flask,render_template,session

app = Flask(__name__,template_folder="templates")

app.config["SECRET_KEY"] = "1234asda"

@app.route("/")
def index():
    data = {}
    session["name"]="xiaohuihui"
    return render_template( "index3.html", **data )

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

index3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {# 獲取上下文物件 #}
    <p>{{ request.url }}</p>
    <p>{{ request.method }}</p>

    <p>{{ session }}</p>
    <p>{{ session.name }}</p>

    <p>{{ config.DEBUG }}</p>

    <p>{{ url_for("index") }}</p>

</body>
</html>

二、過濾器

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

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

{{variable | filter_name(args1,args2,....)}}

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

{{variable | filter_name }}

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

在 jinja2 中，過濾器是可以支援鏈式呼叫的，示例如下：

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

1、內建過濾器

字串操作

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>
<p>{{ "如果x<y，z>x，那麼x和z之間是否相等？" | striptags }}</p>

truncate: 字串截斷

<p>{{ 'hello every one' | truncate(9)}}</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 %}

示例:

from flask import Flask,render_template,session

app = Flask(__name__,  # 當前flask應用執行的模組
            static_folder="static", # 當前flask應用儲存靜態資源[css/js/img/音視訊]
            static_url_path="/lib", # 當前flask應用提供給外界訪問的路徑字首，必須以/開頭
            template_folder="templates"
    )

app.config["SECRET_KEY"] = "1234asda"

@app.route("/")
def index():
    data = {}
    data["message"] = "hello,python, after 7 day, byebye"
    data["image"] = "<img src='/lib/images/1.jpg'>"
    return render_template( "index4.html", **data )

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

index4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    img{
        width: 100px;
    }
    </style>
</head>
<body>
    <p>{{ message | upper }}</p>
    <p>{{ image | safe }}</p>
    <p>{{ message | reverse | upper }}</p>
    <p>{{ '<em>hello</em>' | striptags }}</p>
    <p>{{ "如果x<y，z>x，那麼x和z之間是否相等？" | striptags }}</p>

    <p>{{ '床前明月光，疑是地上霜。' | truncate(5,False,'...', 0)}}</p>

    <p>{{ [1,1,2,3,4,5,1,2,2,3,4] | unique | list }}</p>
</body>
</html>

2、自定義過濾器

from flask import Flask,render_template

app = Flask(__name__,  # 當前flask應用執行的模組
            static_folder="static", # 當前flask應用儲存靜態資源[css/js/img/音視訊]
            static_url_path="/lib", # 當前flask應用提供給外界訪問的路徑字首，必須以/開頭
            template_folder="templates"
    )

app.config["SECRET_KEY"] = "1234asda"

# 自定義過濾器函式
def do_mobile(content):

    return content[:3]+"*****"+content[-3:]
app.add_template_filter(do_mobile,"mobile")

@app.route("/")
def index():
    data = {}
    data["mobile_list"] = [
        "13513241123",
        "13513241123",
        "13513241123",
        "13513241123",
        "13513241123",
    ]
    return render_template( "index5.html", **data )

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

index5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% for mobile in mobile_list %}
    <p>{{ mobile | mobile }}</p>
    {% endfor %}
</body>
</html>

三、模板繼承

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

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

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

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

標籤定義的內容

{% block top %} {% endblock %}

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

from flask import Flask,render_template

app = Flask(__name__,  # 當前flask應用執行的模組
            template_folder="templates"
    )

@app.route("/")
def index():
    data = {}
    return render_template( "index6.html", **data )

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

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}父級模板的內容{% endblock %}</title>
    {% block hander %}{% endblock hander %}
</head>
<body>
    {% block content %}
        <p>父級模板的content</p>
    {% endblock content %}
</body>
</html>

index6.html

{% extends "base.html" %}
{% block title %}來自子模板的標題{% endblock title %}
{% block hander %}
    <script>
    alert(1)
    </script>
{% endblock hander %}

{% block content %}
    {{ super() }}
    <p>子模板的內容</p>
    {{ super() }}
{% endblock %}

模板繼承使用時注意點：

不支援多繼承
為了便於閱讀，在子模板中使用extends時，儘量寫在模板的第一行。
不能在一個模板檔案中定義多個相同名字的block標籤。
當在頁面中使用多個block標籤時，建議給結束標籤起個名字，當多個block巢狀時，閱讀性更好。

四、在 Flask 專案中解決 CSRF 攻擊

pip install flask_wtf

在 Flask 中， Flask-wtf 擴充套件有一套完善的 csrf 防護體系，對於我們開發者來說，使用起來非常簡單

設定應用程式的 secret_key，用於加密生成的 csrf_token 的值

# 1. session加密的時候已經配置過了.如果沒有在配置項中設定,則如下:
app.secret_key = "#此處可以寫隨機字串#"

# 2. 也可以寫在配置類中。
class Config(object):
    DEBUG = True
    SECRET_KEY = "dsad32DASSLD*13%^32"
    
"""載入配置"""
app.config.from_object(Config)

匯入 flask_wtf.csrf 中的 CSRFProtect 類，進行初始化，並在初始化的時候關聯 app

from flask.ext.wtf import CSRFProtect
CSRFProtect(app)

在表單中使用 CSRF 令牌:

<form method="post" action="/">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
</form>

示例：

from flask import Flask,render_template,request
from flask_wtf import CSRFProtect
app = Flask(__name__,  # 當前flask應用執行的模組
            template_folder="templates"
    )

csrf = CSRFProtect(app)

app.config["SECRET_KEY"] = "1234asda"

@app.route("/")
def index():
    data = {}
    return render_template( "index7.html", **data )

@app.route("/login",methods=["POST"])
def login():
    print(request.form)
    return "ok"

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

index7.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="{{ url_for('login') }}" method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" >
        賬號: <input type="text" name="username" value=""><br><br>
        密碼: <input type="password" name="password" value=""><br><br>
        <input type="submit" value="登入">
    </form>
</body>
</html>