Flask最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render

https://www.cnblogs.com/DragonFire/p/9259999.html

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

前端代码:

前端代码

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

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

第一种,从前端入手

前端代码:

前端代码

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

后端代码:

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_templateapp = 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_templateapp = 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最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法相关推荐

Flask最强攻略 - 跟DragonFire学Flask - 第十五篇 Flask-Script
其实本章就是为下一章做的铺垫啦,但是也要认真学习哦 Flask-Script 从字面意思上来看就是 Flask 的脚本是的,熟悉Django的同学是否还记得Django的启动命令呢? python ...
Flask最强攻略 - 跟DragonFire学Flask - 第三篇 Flask 中的 request 之先知道有这么个东西...
每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的为了了解Flask的request中都有什么东西,首先我们要写一个前后端的交互基于HTML + Flask 写一 ...
一起来学SpringBoot | 第四篇：整合Thymeleaf模板
SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...
Flask源码阅读-第四篇(flask\app.py)
flask.app该模块2000多行代码,主要完成应用的配置.初始化.蓝图注册.请求装饰器定义.应用的启动和监听,其中以下方法可以重点品读和关注 def setupmethod(f): @setupm ...
互联网大脑的情绪，智商和梦境-互联网神经学系列第四篇
这是互联网神经学系列的第四篇文章"互联网大脑的情绪.智商和梦境,互联网神经心理学" 1.互联网神经心理学的提出我们在互联网神经学系列的第三篇文章中详细介绍了互联网大脑的架构和运行 ...
跟着石头哥哥学cocos2d-x（四）--cocos2dx中的动画以及TexturePacker使用
2019独角兽企业重金招聘Python工程师标准>>> 之前向Andreas Loew申请了一枚TexturePacker注册码,很快都下来了,作为回报我打算还是写一篇关于Textu ...
重学OC第四篇：类结构之bits
文章目录前言一.bits有什么?方法?属性?成员变量? 1 class_data_bits_t 2 class_rw_t 2.1 class_rw_ext_t 2.2 class_ro_t 二.验 ...
《电机学》第四篇异步电机第13、14三相异步电动机原理/结构/特性第15章单相异步电动机
第13章异步电机的基本理论结构定子: 转子:鼠笼式(导条.短路环构成闭合回路).绕线式(外接电阻闭合回路) 绕线式可外串电阻,提高启动.调速性格. 工作原理异步电机的三种运行状态: 感应电 ...
Python轻量级Web框架Flask（4）——Flask会话技术和Flask模板语言
1.客户端会话技术: 会话:服务器端和客户端之间的交互一个服务器可以被多个浏览器访问,他们之间是通过http协议来完成访问的(1.先请求,后响应:2.响应后会断开连接:3.一次请求就结束了),coo ...

Flask最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法

Flask最强攻略 - 跟DragonFire学Flask - 第四篇 Flask 中的模板语言 Jinja2 及 render_template 的深度用法相关推荐

最新文章

热门文章