Flask - 模板語言jinja2 和render_template高級用法

時間 2019-12-16

標籤 flask 模板語言 jinja2 jinja render template 高級用法欄目 Python 简体版

原文原文鏈接

目錄html

Flask - 模板語言jinja2 和render_template高級用法

Flask - 模板語言jinja2 和render_template高級用法

Django 的模板語言是 render_tempalte
Flask 的模板語言呢是jinja2
jinja2包含 render_tempalte

看下面一些概念認認臉:前端

{{ }}   # 變量,非邏輯代碼

{% %}   # 邏輯代碼

{% if session %}    # if 語句
{% endif %}


{% for foo in session %}    # for 循環語句  
{% endfor %}

@app.template_global() # 全局函數

Markup # 安全標籤字符串兒

{% macro func() %}

{% endmacro %}

定義如下參數:python

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': '女'},

一. 字典傳遞至前端

後端:flask

@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 模板的操做:

後端:session

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

前端:app

<!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 模板

後端:debug

@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

結果:

四. 傳遞多個參數到前段

後端:

@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>

結果:

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

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

六. jinja2的高階用法

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)

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ tag | safe}}  <!--  加上個 \  管道符,而後 safe  -->
</body>
</html>

第二種能夠從後端入手:

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)

在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>

jinja模板複用 block

1.提供一個模板index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Welcome OldboyEDU</h1>
    <h2>下面的內容是不同的</h2>
    {% block content %}

    {% endblock %}
    <h2>上面的內容是不同的,可是下面的內容是同樣的</h2>
    <h1>OldboyEDU is Good</h1>
</body>
</html>

2.login.html使用index.html模板

{% extends "index.html" %}

{% block content %}
    <form>
        用戶名:<input type="text" name="user">
        密碼:<input type="text" name="pwd">
    </form>
{% endblock %}

Jinja2模板語言的模塊引用 include

<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>
</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 頁面中

Jinja2模板語言中的宏定義

前端代碼:

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

{% 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>