Flask—模板渲染jinja2 和render_template高级用法

分类：Flask作者：编程之家用户

Flask 与 Django 的对比：

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

看下面一些概念认认脸:

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

{% %}	# 逻辑代码

{% if session %}	# if 语句
{% endif %}

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

@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)

前端:

<!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 模板的操作:

后端:

@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 模板

后端:

@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

结果:

四. 传递多个参数到前段

后端:

@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>

结果:

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

@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 = "<input type='text' name='user' value='DragonFire'>"
    return render_template("index.html",tag=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>

第二种可以从后端入手:

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)

在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)

前段代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ tag }}
    <br>
    {{ tag(99,1) }}
</body>
</html>

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

jinja模板复用 block

1.提供一个模板index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Welcome OldboyEDU</h1>
    <h2>下面的内容是不一样的</h2>
    {% block content %}

    {% endblock %}
    <h2>上面的内容是不一样的,但是下面的内容是一样的</h2>
    <h1>OldboyEDU is Good</h1>
</body>
</html>

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

{% extends "index.html" %}

{% block content %}
    <form>
        用户名:<input type="text" name="user">
        密码:<input type="text" name="pwd">
    </form>
{% endblock %}

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>
</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 页面中

Jinja2模板语言中的宏定义

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

{% 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>

　　

原文地址：https://www.cnblogs.com/aitree/p/14367500.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

【Flask框架】——16 Jinja2模板
Jinja2：是Python的Web项目中被广泛应用的模板引擎，是由Python实现的模板语言，Jinja2 的作者也是 Flask 的作者。他的设计思想来源于Django的模板引擎，并扩展了其语法和一系列强大的功能，其是Flask内置的模板语言。
Fullcalendar日历使用，包括视图选择、事件插入、编辑事件、事件状态更改、事件添加和删除、事件拖动调整，自定义头部，加入el-popover显示图片、图片预览、添加附件链接等，支持手机显示
Fullcalendar日历使用，包括视图选择、事件插入、编辑事件、事件状态更改、事件添加和删除、事件拖动调整，自定义头部，加入el-popover显示图片、图片预览、添加附件链接等，支持手机显示。
OpenAi[ChatGPT] 使用Python对接OpenAi APi 实现智能QQ机器人-学习详解篇
监听QQ消息并不需要我们写代码，因为市面上已经有很多开源QQ机器人框架，在这里我们使用go-cqhttp官方文档:go-cqhttp如果您感兴趣的话，可以阅读一下官方文档，如果不想看，直接看我的文章即可。
【Flask框架】——09 视图和URL总结
【Flask框架】—— 视图和URL总结
python Web开发 flask轻量级Web框架实战项目--实现功能--账号密码登录界面(连接数据库Mysql)
python+web+flask轻量级框架的实战小项目。登录功能，后续功能可自行丰富。
企业微信可信域名个人配置方法，个人添加企业微信可信IP方法
有了这个就可以配置可信IP，关键是不需要企业认证，个人信息就可以做。
Python Flask框架-开发简单博客-认证蓝图
本专栏是对Flask官方文档中个人博客搭建进行的归纳总结，与官方文档结合事半功倍。 本人经验，学习一门语言或框架时，请首先阅读官方文档。学习完毕后，再看其他相关文章（如本系列文章），才是正确的学习道路。
Python Flask框架-开发简单博客-定义和操作数据库
本专栏是对Flask官方文档中个人博客搭建进行的归纳总结，与官方文档结合事半功倍。基础薄弱的同学请戳Flask官方文档教程 本人经验，学习一门语言或框架时，请首先阅读官方文档。学习完毕后，再看其他相关文章（如本系列文章），才是正确的学习道路。 如果python都完全不熟悉，一定不要着急学习框架，请首先学习python官方文档，一步一个脚印。要不然从入门到放弃是大概率事件。 Python 官方文档教程
快到年末了，用Python绘制饼状图对商品库存进行分析
快到年末了 相信大家都在忙着处理年末数据 刚好有一个是对超市的商品库存进行分析的学员案例 真的非常简单~
从0到1搭建一个简易的在线客服问答系统(附源码)
一个简易的问答系统就这样完成了，当然，这个项目还可以进一步完善，比如 将数据存入Elasticsearch，通过它先进行初步的检索，然后再通过这个系统，当然我们也可以用其他的架构实现。如果你对这系统还有其他的疑问，也可以再下面进行留言！！！
10 模版继承和页面之间的调用
#模版继承和页面之间的调用@app.route(&quot;/bl&quot;)def bl(): return render_template(&quot;file_2.html&quot;)主ht
5 获取Form表单取值
#form表达提交@app.route(&quot;/data&quot;,methods=[&#39;GET&#39;,&#39;POST&#39;]) #methods 让当前路由支持GET 和
5 获取Form表单取值
#form表达提交@app.route(&quot;/data&quot;,methods=[&#39;GET&#39;,&#39;POST&#39;]) #methods 让当前路由支持GET 和
11 session 使用
#session 使用app.secret_key = &quot;dsada12212132dsad1232113&quot;app.config[&#39;PERMANENT_SESSION_LI
7 文件上传
#文件上传@app.route(&quot;/file&quot;,methods=[&#39;GET&#39;,&#39;POST&#39;])def file(): if request.meth
3 跳转操作
#跳转操作:redirect@app.route(&quot;/red&quot;)def red(): return redirect(&quot;/login&quot;)
11 session 使用
#session 使用app.secret_key = &quot;dsada12212132dsad1232113&quot;app.config[&#39;PERMANENT_SESSION_LI
6 获取请求头和URL信息
@app.route(&quot;/req&quot;,methods=[&#39;GET&#39;,&#39;POST&#39;])def req(): print(request.headers)
10 模版继承和页面之间的调用
#模版继承和页面之间的调用@app.route(&quot;/bl&quot;)def bl(): return render_template(&quot;file_2.html&quot;)主ht
4 文件操作 支持图片 视频 mp3 文本等
#文件操作:send_file,支持图片 视频 mp3 文本等@app.route(&quot;/img&quot;)def img(): return send_file(&quot;1.jpg&q
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot