正文

flask第四篇flask中的模板语言jinja2及render_template的深度用法(代码片段)

weiwenzheng  weiwenzheng  2022-12-14  543

关键词：

是时候开始写个前端了,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)

前端代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8      tag 
 9 </body>
10 </html>

前端代码

如果我们直接运行代码直接访问,你会在页面看到什么呢?

技术图片

似乎和我们想要结果不太一样,有两种解决方案,

第一种,从前端入手

前端代码:

前端代码

还有一种方式是从后端入手

后端代码:

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

home.html 文件中的内容

home.html

后端代码:

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

<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的深度用法(代码片段)

是时候开始写个前端了,Flask中默认的模板语言是Jinja2现在我们来一步一步的学习一下Jinja2捎带手把render_template中留下的疑问解决一下首先我们要在后端定义几个字符串,用于传递到前端STUDENT=‘name‘:‘Old‘,‘age‘:38,‘gender‘:‘... 查看详情

flask中的模板语言jinja2及render_template(代码片段)

...age‘:25,‘gender‘:‘女‘,2.但是前提我们要知道Jinja2模板中的流程控制:(1).Jinja2模板语言中的for%forfooing%%endfor%(2).Jinja2模板语言中的if%ifg%%elifg%%else%%endif%接下来,我们对这几种情况分别进行传递,并在前端显示成表格3.使用STUDENT字典... 查看详情

3，flask中的模板语言jinja2及render_template的深度用法(代码片段)

...‘age‘:84,‘gender‘:‘女‘,但是前提我们要知道Jinja2模板中的流程控制:I.Jinja2模板语言中的for%forfooing%%endfor%II.Jinja2模板语言中的if%ifg%%elifg%%else%%endif%接下来,我们对这几种情况分别进行传递,并在前端显示成表格1.使用STUDENT字典传... 查看详情

flask模板语法(代码片段)

...‘,3:‘name‘:‘fy‘,‘age‘:84,‘gender‘:‘女‘,Jinja2模板中的流程控制: I.Jinja2模板语言中的for%forfooing%%endfor% II.Jinja2模板语言中的if%ifg%%elifg%%else%%endif% 1.使用STUDENT字典传递至前端后端:@app.route("/student")defindex()... 查看详情

flask第四篇使用flask的扩展实现简单页面登录功能

fromflaskimportFlask,render_template,request,redirect,sessionapp=Flask(__name__,template_folder=‘templates‘)app.secret_key="sdsfdsgdfgdfgfh"@app.before_requestdefprocess_request():ifrequest.path=="/lo 查看详情

flaskjinja2模板语言

Jinja2　　Jinja2是PythonWeb编程中的主流模板语言。因为flask是基于Jinja2和Werkzeug发展而来，在安装flask的时候jinja2自动就被装在上面了。　　之前提到了很多Jinja2的使用方法啊，下面将补充或者更加详细地说明Jinja2作为模板语言的使... 查看详情

flask基础之jinja2模板-流程控制

和其它编程语言一样，jinja2也有流程控制。一、测试　　在jinja2,测试（Test）是根据变量或表达式的值生成布尔结果的一种函数工具，测试关键字is　　jinja2 isdefined　　或　　jinja2 isdefined() #需要参数的测试，括... 查看详情

jinja2模板语言(代码片段)

...ja2模板语言；与django模板语言一样，都是和%%1，Jinja2模板中的流程控制:Jinja2模板语言中的for%forfooing%%endfor% Jinja2模板语言中的if%ifg%%elifg%%else%%endif%2，取值方式字典：可以使用点的方式，还可以使用字典的get("xx"),nam 查看详情

flask的template模板与jinja2语法(代码片段)

Flask的template模板与jinja2语法Flask使用的是Jinja2模板，所以其语法和Django基本无差别1、模板基本数据的渲染变量..列表%foriteminList%<li>item</li>%endfor%字典%fork,vinDict.items()%<li>kv</li>%endf 查看详情

flask框架下的jinja2模板引擎(代码片段)

...tps://www.cnblogs.com/chichung/p/9775099.html本文主要记录下jinja2的模板继承。模板继承是什么？在模板中，可能会遇到以下情况：多个模板具有完全相同的顶查看详情

使用 Flask/Jinja2 将 HTML 传递给模板

】使用Flask/Jinja2将HTML传递给模板【英文标题】：PassingHTMLtotemplateusingFlask/Jinja2【发布时间】：2011-03-1311:46:02【问题描述】：我正在为Flask和SQLAlchemy构建一个管理员，我想使用render_template将不同输入的HTML传递给我的视图。模板框... 查看详情

flask中的templates(代码片段)

...符串再响应给客户端，这一过程通常称为"渲染" 　　Flask中的模板是依赖于Jinja2的模板系统 2.模板的设置　　默认情况下，Flask会在程序文件夹中的templates的子文件夹中搜索模板　　默认情况下，需要手动创建templat 查看详情

flask基础之jinja2模板-语法定义(代码片段)

...视图、控制，下面要要介绍的jinja就是视图层的一个渲染模板，类似于jsp，下面来学习一、jinja2基本语法　　jinja2模板可以保存在任何基于文本的文件中，比如XML、HTML、CSV等，所以模板文件可以接受任何文件后缀。　　jinja2... 查看详情

flask全栈开发3模板(代码片段)

第四章模板介绍4.1第一节模板简介：在之前的章节中，视图函数只是直接返回文本，而在实际生产环境中其实很少这样用，因为实际的页面大多是带有样式和复杂逻辑的HTML代码，这可以让浏览器渲染出非常漂亮的页面。目前市... 查看详情

flask入门教程：jinja2模板用法

Jinja2模板引擎简介模板在前面的示例中，视图函数的主要作用是生成请求的响应，这是最简单的请求。实际上，视图函数有两个作用：处理业务逻辑和返回响应内容。在大型应用中，把业务逻辑和表现内容放... 查看详情

flask

Flask是一个基于Python开发并且依赖jinja2模板和WerkzeugWSGI服务的一个微型框架，对于Werkzeug本质是Socket服务端，其用于接收http请求并对请求进行预处理，然后触发Flask框架，开发人员基于Flask框架提供的功能对请求进行相应的处... 查看详情

使用 Flask 和 Jinja2 单击时无法加载模板 HTML [重复]

】使用Flask和Jinja2单击时无法加载模板HTML[重复]【英文标题】：TroubleloadingtemplateHTMLonclickusingFlaskandJinja2[duplicate]【发布时间】：2019-05-1020:15:27【问题描述】：我相信我对Jinja模板的呈现方式存在根本性的误解。我正在尝试通过GET... 查看详情

flask

Flask是一个基于Python开发并且依赖jinja2模板和WerkzeugWSGI服务的一个微型框架，对于Werkzeug本质是Socket服务端，其用于接收http请求并对请求进行预处理，然后触发Flask框架，开发人员基于Flask框架提供的功能对请求进行相应的处理，... 查看详情