Flask中的模板語言Jinja2及render_template
阿新 • • 發佈：2019-01-16
b- 復用 情況下 裝飾 ren bsp type form 管道符 
Flask中默認的模板語言是Jinja2
在學習Jinja2前render_template中留下的問題解決
1.首先我們要在後端定義幾個字符串,用於傳遞到前端
STUDENT = {‘name‘: ‘Old‘, ‘age‘: 38, ‘gender‘: ‘中‘}
STUDENT_LIST = [
{‘name‘: ‘wahaha‘, ‘age‘: 18, ‘gender‘: ‘男‘},
{‘name‘: ‘heihei‘, ‘age‘:50, ‘gender‘: ‘中‘},
{‘name‘: ‘hehe‘, ‘age‘:25, ‘gender‘: ‘
2.但是前提我們要知道Jinja2模板中的流程控制:
(1).Jinja2模板語言中的for
{% for foo in g %}
{% endfor %}
(2).Jinja2模板語言中的if
{% if
接下來,我們對這幾種情況分別進行傳遞,並在前端顯示成表格
3.使用STUDENT字典傳遞至前端
後端：
@app.route("/student") def index(): return render_template("student.html", student=STUDENT)
前端：
<!DOCTYPE html> <html lang="en"> <head> <metacharset="UTF-8"> <title>Title</title> </head> <body> <h1>無敵是多麼，多麼寂寞</h1> <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的對象操作
4.STUDENT_LIST列表傳入前端Jinja2模板的操作
(1).後端
@app.route("/student_list") def student_list(): return render_template("student_list.html", student=STUDENT_LIST)
(2).前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>無敵是多麼，多麼寂寞</h1> <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 就是列表中的每一個字典,再使用各種取值方式取出值即可
5.STUDENT_DICT 大字典傳入前端 Jinja2 模板
(1).後端：
@app.route("/student_dict") def student_dict(): return render_template("student_dict.html", student=STUDENT_DICT)
(2).前端：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>無敵是多麼，多麼寂寞</h1> <div>{{ student }}</div> <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>
6.結合所有的字符串兒全部專遞前端Jinja2 模板
(1).後端：
@app.route("/allstudent") def all_student(): return render_template("all_student.html", student=STUDENT, student_list=STUDENT_LIST, student_dict=STUDENT_DICT)
(2).前端：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> _____________________________________</div> 無敵是多麼，多麼寂寞: 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> 無敵是多麼，多麼寂寞: 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> 無敵是多麼，多麼寂寞 : 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中可以傳遞多個關鍵字
7.利用 **{}字典的方式傳遞參數
前端不變(標題6的前端代碼)
後端：
@app.route("/allstudent")
def all_student():
return render_template("all_student.html", **{"student":STUDENT ,
"student_list" : STUDENT_LIST,
"student_dict": STUDENT_DICT})
結果沒有任何變化
8.Jinja2的高階用法
Jinja2 模板語言為我們提供了很多功能接下來看一下它有什麽高級的用法
(1).safe：此時你與HTML只差一個safe
後端：
from flask import Flask, render_template app = Flask(__name__) @app.route("/") def index(): tag = "<input type=‘text‘ name=‘user‘ value=‘wahaha‘>" return render_template("index.html", tag=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> {{ tag }} </body> </html>
如果我們直接運行代碼直接訪問，你會在頁面看到:
似乎和我們想要結果不太一樣,有兩種解決方案：
- 從前端入手:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ tag | safe }} <!-- 加上個 \ 管道符,然後 safe --> </body> </html>
- 從後端入手:
from flask import Flask, render_template, Markup # 導入 flask 中的 Markup 模塊 app = Flask(__name__) @app.route("/") def index(): tag = "<input type=‘text‘ name=‘user‘ value=‘heiheihei‘>" 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)
兩種得到的效果是一樣
(2). 在Jinja2中執行Python函數(模板中執行函數)
首先在文件中定義一個函數
後端：
from flask import Flask,render_template 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>
看到結果就是，函數加()執行得到結果
(3).還可以定義全局函數，無需後端傳遞給前端，Jinja2直接就可以執行的函數
後端：
from flask import Flask, render_template 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中的特殊裝飾器
(4).Jinja2模板復用 block
如果我們前端頁面有大量重復頁面,沒必要每次都寫,可以使用模板復用的方式復用模板
前端：
index.html 文件中的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>無敵是多麼，多麼寂寞</h1> <h2>下面的內容是不一樣的</h2> {% block content %} {% endblock %} <h2>上面的內容是不一樣的,但是下面的內容是一樣的</h2> <h1>無敵是多麽寂寞</h1> </body> </html>index.html
login.html 文件中的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {% extends "index.html" %} {% block content %} <form> 用戶名:<input type="text" name="user"> 密碼:<input type="text" name="pwd"> </form> {% endblock %} </body> </html>login.html
home.html 文件中的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {% extends "index.html" %} {% block content %} <h1>哇哈哈，你找到我了</h1> {% endblock %} </body> </html>home.html
後端：
from flask import Flask, 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 中的內容發生了變化,其他的位置完全一樣
(5).Jinja2模板語言的模塊引用 include
login.html 文件中的內容:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> 用戶名:<input type="text" name="user"> 密碼:<input type="text" name="pwd"> </form> </body> </html>login.html
index.html 文件中的內容:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>無敵是多麼，多麼寂寞</h1> <h2>下面的內容是不一樣的</h2> {% include "login.html" %} <h2>上面的內容是不一樣的,但是下面的內容是一樣的</h2> <h1>無敵是多麽寂寞</h1> </body> </html>index.html
後端：
from flask import Flask, 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).Jinja2模板語言中的宏定義
前端：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>無敵是多麼，多麼寂寞</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