一,基本使用
flask中默認使用的jinja2模板語言;與django模板語言一樣,都是 {{ }} 和 {% %}
1 ,Jinja2模板中的流程控制:
- Jinja2模板語言中的 for
{% for foo in g %} {% endfor %}
- Jinja2模板語言中的 if
{% if g %} {% elif g %} {% else %} {% endif %}
2, 取值方式
- 字典:可以使用點的方式,還可以使用字典的get("xx"), name["xx"]的方式
- 列表:支持obj.0和obj[0]的方式取值
注意:**{}字典的方式傳遞參數
@app.route("/allstudent") def all_student(): return render_template("all_student.html", **{"student":STUDENT , "student_list" : STUDENT_LIST, "student_dict": STUDENT_DICT})
相當於以關鍵字的方式傳遞模板語言中,那么前端就可以之間{{obj}}取值了
二,高階使用
1,safe
from flask import Flask from flask import render_template app = Flask(__name__) @app.route("/") def index(): tag = "<input type='text' name='user' value='eee'>" return render_template("index.html",tag=tag) # 后端也可以直接使用Markup(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> 前端代碼
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直接就可以執行的函數
后端代碼:
@app.template_global() # 把該函數放在全局,每個模板都可以用 def my_add(*args): return sum(args) @app.template_filter() def oushu_filter(num): if num % 2 == 0: return "{}是偶數".format(num) return "{}是奇數".format(num)
前端代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 后端傳過來的函數,模板調用執行的結果: {#{{ func(1, 2, 3, 4) }}#} {{ my_add(1, 2, 4, 5) }} <p>篩選函數的結果:{{ my_add(1, 2, 4, 8) | oushu_filter }}</p> </body> </html>
3 Jinja2模板復用 block
如果我們前端頁面有大量重復頁面,沒必要每次都寫,可以使用模板復用的方式復用模板
前端代碼:
base.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 這個頁面是大家共有的:可以繼承這個頁面簡化代碼 標題 不同的地方使用block <div> {% block my_block_test %} {% endblock my_block_test %} </div> </body> </html>
extent_test.html
{% extends "base.html" %} {% block my_block_test %} <h1>巴拉巴拉</h1> {% endblock %}
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</h1> <h2>下面的內容是不一樣的</h2> {% include "login.html" %} <h2>上面的內容是不一樣的,但是下面的內容是一樣的</h2> <h1>fffff</h1> </body> </html>
5 Jinja2模板語言中的宏定義
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Welcome</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>