Flask - 模板语言jinja2 和render_template高级用法

目录

• Flask - 模板语言jinja2 和render_template高级用法
  • 一. 字典传递至前端
  • 二. 列表传入前端Jinja2 模板的操作:
  • 三. 大字典传入前端 Jinja2 模板
  • 四. 传递多个参数到前段
  • 五.利用 **{}字典的方式传递参数
  • 六. jinja2的高阶用法
    • safe
    • 在jinja2模板中执行Python函数
• 定义一个函数,把它传递给前端
  • • jinja模板复用 block
    • Jinja2模板语言的模块引用 include
    • Jinja2模板语言中的宏定义

Flask - 模板语言jinja2 和render_template高级用法

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

看下面一些概念认认脸:

{{ }} # 变量,非逻辑代码

{% %} # 逻辑代码

{% if session %} # if 语句

{% for foo in session %} # for 循环语句

@app.template_global() # 全局函数

Markup # 安全标签字符串儿

{% macro func() %}

{% endmacro %}

定义以下参数:

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

一. 字典传递至前端

后端:

@app.route("/student")
def index():
return render_template("student.html", student=STUDENT)
前端:

Welcome to Old Boy EDU

{{ student }}

{{ student.name }}

{{ student["age"] }}

{{ student.get("gender") }}

结果:

二. 列表传入前端Jinja2 模板的操作:

后端:

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

前端:

Welcome to Old Boy EDU

{{ student }}

{% for foo in student %}






{% endfor %}

{{ foo }}

{{ foo.name }}

{{ foo.get("age") }}

{{ foo["gender"] }}

结果:

三. 大字典传入前端 Jinja2 模板

后端:

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

前端:

Welcome to Old Boy EDU

{% for foo in student %}






{% endfor %}

{{ foo }}

{{ student.get(foo).name }}

{{ student[foo].get("age") }}

{{ student[foo]["gender"] }}

在遍历字典的时候,foo 其实是相当于拿出了字典中的Key

结果:

四. 传递多个参数到前段

后端:

@app.route("/allstudent")
def all_student():
return render_template("all_student.html", student=STUDENT ,
student_list = STUDENT_LIST,
student_dict= STUDENT_DICT)
前端:

_____________________________________

Welcome to Old Boy EDU : student

{{ student }}

{{ student.name }}

{{ student["age"] }}

{{ student.get("gender") }}

_____________________________________

Welcome to Old Boy EDU : student_list

{{ student_list }}

{% for foo in student_list %}






{% endfor %}

{{ foo }}

{{ foo.name }}

{{ foo.get("age") }}

{{ foo["gender"] }}

_____________________________________

Welcome to Old Boy EDU : student_dict

{{ student_dict }}

{% for foo in student_dict %}






{% endfor %}

{{ foo }}

{{ student_dict.get(foo).name }}

{{ student_dict[foo].get("age") }}

{{ student_dict[foo]["gender"] }}

结果:

五.利用 **{}字典的方式传递参数

@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 = ""
return render_template("index.html",tag=tag)

app.run("0.0.0.0",5000)

前端:

{{ tag | safe}}

第二种可以从后端入手:

from flask import Flask
from flask import render_template
from flask import Markup # 导入 flask 中的 Markup 模块

app = Flask(name)

@app.route("/")
def index():
tag = ""
markup_tag = Markup(tag) # Markup帮助咱们在HTML的标签上做了一层封装,让Jinja2模板语言知道这是一个安全的HTML标签
print(markup_tag,
type(markup_tag)) # <class 'markupsafe.Markup'>
return render_template("index.html", tag=markup_tag)

app.run("0.0.0.0", 5000, debug=True)

在jinja2模板中执行Python函数

1. 后端函数传到前段

后端代码:

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)

前段代码:

{{ tag }}


{{ tag(99,1) }}

2. 定义全局函数,无需后端传递给前端,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)

前段代码:

{{ a_b_sum(99,1) }}


{{ 1 | a_b_c_sum(197,2) }}

jinja模板复用 block

1.提供一个模板index.html

Welcome OldboyEDU

下面的内容是不一样的

{% endblock %}

上面的内容是不一样的,但是下面的内容是一样的

OldboyEDU is Good

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

{% extends "index.html" %}

{% block content %}

用户名:
密码:

Jinja2模板语言的模块引用 include

login.html 文件中的内容:

用户名:
密码:

index.html 文件中的内容

Welcome OldboyEDU

下面的内容是不一样的

{% include "login.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模板语言中的宏定义

前端代码:

{% macro type_text(name,type) %}

在下方是使用宏来生成input标签

{{ type_text("one","text") }}