Flask最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法
https://www.cnblogs.com/DragonFire/p/9259999.html
?
是時候開始寫個前端了,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_templateapp = 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_templateapp = 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_templateapp = 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最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 类和类之间的关系解析-1
- 下一篇： 通达信指标公式颜色代码、图标、函数 大全