Flask Jinja2模板引擎

简介

Jinja2是Python下一个被广泛应用的模版引擎,他的设计思想来源于Django的模板引擎,并扩展了其语法和一系列强大的功能。其中最显著的一个是增加了沙箱执行功能和可选的自动转义功能,这对大多应用的安全性来说是非常重要的(来源百度百科)。

Jinja2模板

Flask是一款开发Web服务端的框架,所以肯定是离不开页面的。上一章,我们使用路由返回数据时,返回内容中包含的有少量的HTML代码,如果需要的HTML代码多了,就很繁琐了,这时我们就可以使用Jinja2模板引擎。

  • Flask提供的 render_template 函数封装了Jinja2模板引擎;
  • render_template 函数的第一个参数是模板的文件名,后面的参数都是键值对,表示向模板中传递的参数值。

基本使用

创建一个视图函数渲染模板以及设置模板参数。

@app.route("/hello/<name>")
def hello(name):
    return render_template("hello.html", name=name)

render_template函数第一个参数对应的是模板的文件名,后面的参数为向模板中传递的参数值。
Flask在程序文件夹中的templates子文件夹中根据模板文件名来寻找对应的模板。
所以需要在templates子文件夹下定义一个hello.html文件。
在这里插入图片描述
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	{# name为视图函数传递过来的参数 #}
    <h1>Hello, {{ name }}!</h1>
</body>
</html>

其中用 {{}} 来表示变量名,用于接收视图函数传递的参数,其变量名与视图函数传递的键名需要一致;
{# #} 表示注释,注释的内容不会在html中被渲染出来。运行效果如下:

在这里插入图片描述
上面使用模板接收了简单的变量,除此之外还可以接收字典,列表,对象和获取session中的内容等。下面来看一下使用模板接收一些复杂的类型数据。
修改后的视图函数代码:

@app.route("/hello/<name>")
def hello(name):
    mydict = {
        "name": '李四',
        'age': 18
    }
    mylist = ['aaa', 'bbb', 'ccc']
    session['name'] = "abc"
    return render_template("hello.html", name=name, mydict=mydict, mylist=mylist);

模板页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hello, {{ name }}!</h1>
    <h1>获取字典数据:{{ mydict['name'] }} --- {{ mydict['age'] }}</h1>
    <h1>获取列表数据:{{ mylist[1] }}</h1>
    <h1>通过过滤器修改变量(把值转换为大写形式):{{ mylist[0] | upper }}</h1>
    <h1>获取session中的内容:{{ session.get("name") }}</h1>
    <h1>请求头信息:{{ request.headers }}</h1>
</body>
</html>

运行效果如下:
在这里插入图片描述

除了上面用到的upper过滤器,Jinja2还提供了很多过滤器,如下是Jinja2常用的过滤器。

过滤器名说明
safe渲染值时不转义
capitalize把值的首字母转换成大写,其他字母转换成小写
lower把值转换成小写形式
upper把值转换成大写形式
title把值中每个单词的首字母都转换成大写
trim把值的首尾空格去掉
striptags渲染之前把值中所有的HTML标签都删掉

控制结构

Jinja2中提供了很多种控制结构,可以用来改变模块的渲染流程,如if、for等。
在Jinja2中使用if控制结构,语法格式和python的语法格式一样,但必须写在{% %}中,不同python的是有开始标签就必须要有结束标签。

{% if comment %}
    <p>{{ comment }}</p>
{% else %}
    <p>comment字典为空</p>
{% endif %}

for循环的使用,遍历一个字典中的所有数据。

{% for user in users %}
    <p>姓名:{{ user['name'] }}, 年龄:{{ user['age'] }}</p>
{% endfor %}

上述的变量都是在视图函数返回时传递的,视图函数代码如下:

@app.route('/contro')
def contro():
    users = [
        {"name": "张三", "age":20},
        {"name": "李四", "age":25},
        {"name": "王五", "age":16},
        {"name": "小华", "age":22}
    ]
    comment = []
    return render_template("contro.html", comment=comment, users=users)

页面完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% if users %}
        {% for user in users %}
            <p>姓名:{{ user['name'] }}, 年龄:{{ user['age'] }}</p>
        {% endfor %}
    {% else %}
        <p>没有学生信息!</p>
    {% endif %}

    {% if comment %}
        <p>{{ comment }}</p>
    {% else %}
        <p>comment字典为空</p>
    {% endif %}
</body>
</html>

运行效果如下
在这里插入图片描述

模板继承

在实际开发中有时候会有很多重复使用的模块代码片段,这时我们可以把这些模块代码写入一个单独的文件,需要用时,直接继承使用,以避免重复编写。
创建一个名为base.html的基模板,用于编写公共部分模块。代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
            {# 其他页面可以重写标题 #}
        {% endblock %}
    </title>
    {% block css %}
        {# 其他页面可以自定义加载样式文件 #}
    {% endblock %}
</head>
<body>
{% block content %}
    {# 其他页面内容 #}
{% endblock %}
</body>
</html>

block标签定义的元素可在继承模块中修改。上述定义了title、css、content三个模块,其他文件继承后可以重写这些模块中的内容。
新建一个模板文件继承base.html模板

{# 继承base.htm模块 #}
{% extends 'base.html' %}

{% block title %}
    重写base.html中title模块的内容
{% endblock %}

{% block content %}
    {# 重写base.html中content模块内容 #}
    {% if users %}
        {% for user in users %}
            <p>姓名:{{ user['name'] }}, 年龄:{{ user['age'] }}</p>
        {% endfor %}
    {% else %}
        <p>没有学生信息!</p>
    {% endif %}

    {% if comment %}
        <p>{{ comment }}</p>
    {% else %}
        <p>comment字典为空</p>
    {% endif %}
{% endblock %}

extentds关键字声明继承base.html模块,之后重写了base.html模板中的title和content模块。运行效果如下:
在这里插入图片描述

评论 2 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

小马 同学

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值