Flask 中的模板語言 Jinja2 及 render_template 的深度用法

時間  2019-11-13
標籤 flask 模板 語言 jinja2 jinja render template 深度 用法 欄目 Python 简体版
原文   原文鏈接

是時候開始寫個前端了,Flask中默認的模板語言是Jinja2html

如今咱們來一步一步的學習一下 Jinja2 捎帶手把 render_template 中留下的疑問解決一下前端

首先咱們要在後端定義幾個字符串,用於傳遞到前端flask

STUDENT = {'name': 'Old', 'age': 38, 'gender': '中'},

STUDENT_LIST = [
    {'name': 'Old', 'age': 38, 'gender': '中'},
    {'name': 'Boy', 'age': 73, 'gender': '男'},
    {'name': 'EDU', 'age': 84, 'gender': '女'}
]

STUDENT_DICT = {
    1: {'name': 'Old', 'age': 38, 'gender': '中'},
    2: {'name': 'Boy', 'age': 73, 'gender': '男'},
    3: {'name': 'EDU', 'age': 84, 'gender': '女'},
}

 

可是前提咱們要知道Jinja2模板中的流程控制:後端

I. Jinja2模板語言中的 for

{% for foo in g %}

{% endfor %}

 

II. Jinja2模板語言中的 if

{% if g %}

{% elif g %}
    
{% else %}
    
{% endif %}

接下來,咱們對這幾種狀況分別進行傳遞,並在前端顯示成表格安全

1. 使用STUDENT字典傳遞至前端

後端:app

@app.route("/student")
def index():
    return render_template("student.html", student=STUDENT)

 

前端:函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Old Boy EDU</title>
</head>
<body>
Welcome to Old Boy EDU
<div>{{ student }}</div>
<table border="1px">
    <tr>
        <td>{{ student.name }}</td>
        <td>{{ student["age"] }}</td>
        <td>{{ student.get("gender") }}</td>
    </tr>
</table>
</body>
</html>

 

結果:學習

從這個例子中,能夠看出來,字典傳入前端Jinja2 模板語言中的取值操做, 與Python中的Dict操做極爲類似,而且多了一個student.name的對象操做spa

 

2. STUDENT_LIST 列表傳入前端Jinja2 模板的操做:

後端:debug

@app.route("/student_list")
def student_list():
    return render_template("student_list.html", student=STUDENT_LIST)

 

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Old Boy EDU</title>
</head>
<body>
Welcome to Old Boy EDU
<div>{{ student }}</div>
<table border="1xp">
    {% for foo in student %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ foo.name }}</td>
            <td>{{ foo.get("age") }}</td>
            <td>{{ foo["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>

 

結果:

這裏咱們能夠看出若是是須要循環遍歷的話,Jinja2 給咱們的方案是

    {% for foo in student %}
        <tr>
            <td>{{ foo }}</td>
        </tr>
    {% endfor %}

上述代碼中的 foo 就是列表中的每個字典,再使用各類取值方式取出值便可

 

3.STUDENT_DICT 大字典傳入前端 Jinja2 模板

後端:

@app.route("/student_dict")
def student_dict():
    return render_template("student_dict.html", student=STUDENT_DICT)

 

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Old Boy EDU</title>
</head>
<body>
Welcome to Old Boy EDU
<table>
    {% for foo in student %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ student.get(foo).name }}</td>
            <td>{{ student[foo].get("age") }}</td>
            <td>{{ student[foo]["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>

 

在遍歷字典的時候,foo 實際上是至關於拿出了字典中的Key

結果:

 

4.結合全部的字符串兒所有專遞前端Jinja2 模板

後端:

@app.route("/allstudent")
def all_student():
    return render_template("all_student.html", student=STUDENT ,
                           student_list = STUDENT_LIST,
                           student_dict= STUDENT_DICT)

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Old Boy EDU</title>
</head>
<body>
<div> _____________________________________</div>
Welcome to Old Boy EDU : student
<div>{{ student }}</div>
<table border="1px">
    <tr>
        <td>{{ student.name }}</td>
        <td>{{ student["age"] }}</td>
        <td>{{ student.get("gender") }}</td>
    </tr>
</table>
<div> _____________________________________</div>
Welcome to Old Boy EDU : student_list
<div>{{ student_list }}</div>
<table border="1xp">
    {% for foo in student_list %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ foo.name }}</td>
            <td>{{ foo.get("age") }}</td>
            <td>{{ foo["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
<div> _____________________________________</div>
Welcome to Old Boy EDU : student_dict
<div>{{ student_dict }}</div>
<table border="1xp">
    {% for foo in student_dict %}
        <tr>
            <td>{{ foo }}</td>
            <td>{{ student_dict.get(foo).name }}</td>
            <td>{{ student_dict[foo].get("age") }}</td>
            <td>{{ student_dict[foo]["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>

 

結果:

這裏能夠看出來,render_template中能夠傳遞多個關鍵字

 

5.利用 **{}字典的方式傳遞參數

前端不變(標題4的前端代碼)

後端:

@app.route("/allstudent")
def all_student():
    return render_template("all_student.html", **{"student":STUDENT ,
                           "student_list" : STUDENT_LIST,
                           "student_dict": STUDENT_DICT})

 

 

6. Jinja2 的高階用法

Jinja2 模板語言爲咱們提供了不少功能接下來看一下它有什麼高級的用法

6.1. safe : 此時你與HTML只差一個 safe

後端代碼:

from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route("/")
def index():
    tag = "<input type='text' name='user' value='DragonFire'>"
    return render_template("index.html",tag=tag)


app.run("0.0.0.0",5000)

 

前端代碼:

  前端代碼

若是咱們直接運行代碼直接訪問,你會在頁面看到什麼呢?

彷佛和咱們想要結果不太同樣,有兩種解決方案,

第一種,從前端入手

前端代碼:

  前端代碼

還有一種方式是從後端入手

後端代碼:

from flask import Flask
from flask import render_template
from flask import Markup  # 導入 flask 中的 Markup 模塊

app = Flask(__name__)


@app.route("/")
def index():
    tag = "<input type='text' name='user' value='DragonFire'>"
    markup_tag = Markup(tag)  # Markup幫助我們在HTML的標籤上作了一層封裝,讓Jinja2模板語言知道這是一個安全的HTML標籤
    print(markup_tag,
          type(markup_tag))  # <input type='text' name='user' value='DragonFire'> <class 'markupsafe.Markup'>
    return render_template("index.html", tag=markup_tag)


app.run("0.0.0.0", 5000, debug=True)

 

兩種獲得的效果是同樣

 

6.2 在Jinja2中執行Python函數(模板中執行函數)

首先在文件中定義一個函數

後端代碼:

from flask import Flask
from flask import render_template
from flask import Markup  # 導入 flask 中的 Markup 模塊

app = Flask(__name__)

#定義一個函數,把它傳遞給前端
def a_b_sum(a,b):
    return a+b

@app.route("/")
def index():
    return render_template("index.html", tag=a_b_sum)


app.run("0.0.0.0", 5000, debug=True)

 

前端代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ tag }}
    <br>
    {{ tag(99,1) }}
</body>
</html>

 

看到結果就是,函數加()執行獲得結果

還能夠定義全局函數,無需後端傳遞給前端,Jinja2直接就能夠執行的函數

後端代碼:

from flask import Flask
from flask import render_template
from flask import Markup  # 導入 flask 中的 Markup 模塊

app = Flask(__name__)


@app.template_global()  # 定義全局模板函數
def a_b_sum(a, b):
    return a + b


@app.template_filter()  # 定義全局模板函數
def a_b_c_sum(a, b, c):
    return a + b + c


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


app.run("0.0.0.0", 5000, debug=True)

 

前端代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ a_b_sum(99,1) }}
    <br>
    {{ 1 | a_b_c_sum(197,2) }}
</body>
</html>

 

兩個函數的調用方式不太同樣

尤爲是@app.template_filter() 它的調用方式比較特別,這是兩個Flask中的特殊裝飾器

 

6.3 Jinja2模板複用 block

若是咱們前端頁面有大量重複頁面,不必每次都寫,可使用模板複用的方式複用模板

前端代碼:

index.html 文件中的內容

  index.html

login.html 文件中的內容

  login.html

home.html 文件中的內容

  home.html

後端代碼:

from flask import Flask
from flask import render_template

app = Flask(__name__)


@app.route("/login")
def login():
    return render_template("login.html")


@app.route("/home")
def home():
    return render_template("home.html")


app.run("0.0.0.0", 5000, debug=True)

 

而後咱們能夠看到什麼呢?

大概是這樣一個效果

在這兩個頁面中,只有 block 中的內容發生了變化,其餘的位置徹底同樣

 

6.4 Jinja2模板語言的模塊引用 include

login.html 文件中的內容:

<form>
    用戶名:<input type="text" name="user">
    密碼:<input type="text" name="pwd">
</form>

 

index.html 文件中的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Welcome OldboyEDU</h1>
    <h2>下面的內容是不同的</h2>
    {% include "login.html" %}
    <h2>上面的內容是不同的,可是下面的內容是同樣的</h2>
    <h1>OldboyEDU is Good</h1>
</body>
</html>

 

後端代碼:

from flask import Flask
from flask import render_template

app = Flask(__name__)


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


app.run("0.0.0.0", 5000, debug=True)

 

看到的結果

這就是將 login.html 當成一個模塊,加載到 index.html 頁面中

 

6.5 Jinja2模板語言中的宏定義

前端代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>Welcome OldboyEDU</h1>

{% macro type_text(name,type) %}
    <input type="{{ type }}" name="{{ name }}" value="{{ name }}">
{% endmacro %}

<h2>在下方是使用宏來生成input標籤</h2>

{{ type_text("one","text") }}
{{ type_text("two","text") }}

</body>
</html>

 

宏定義通常狀況下不多應用到,可是要知道有這麼個概念

 

第四篇,完結

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程