第三篇 Flask 中的模板語言 Jinja2 及 render_template 的深度用法
阿新 • • 發佈：2019-02-26
tab bsp () 我們 ood 代碼 它的 ldb oct 
前端代碼
前端代碼
是時候開始寫個前端了,Flask中默認的模板語言是Jinja2
現在我們來一步一步的學習一下 Jinja2 捎帶手把 render_template 中留下的疑問解決一下
首先我們要在後端定義幾個字符串,用於傳遞到前端
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.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的對象操作
2. STUDENT_LIST 列表傳入前端Jinja2 模板的操作:
後端:
@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 文件中的內容
<!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>
login.html 文件中的內容
{% extends "index.html" %}
{% block content %}
<form>
用戶名:<input type="text" name="user">
密碼:<input type="text" name="pwd">
</form>
{% endblock %}
home.html 文件中的內容
{% extends "index.html" %}
{% block content %}
<h1>歡迎來到老男孩教育</h1>
{% endblock %}
後端代碼:
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>
宏定義一般情況下很少應用到,但是要知道有這麽個概念
第三篇 Flask 中的模板語言 Jinja2 及 render_template 的深度用法