flask jinja2模版操作

胖兔always

于 2024-05-10 21:02:23 发布

阅读量1.9k

点赞数 48

本文链接：https://blog.csdn.net/qq_43031450/article/details/138675792

版权

python 同时被 3 个专栏收录

3 篇文章 7 订阅

订阅专栏

jinja2

1 篇文章 0 订阅

订阅专栏

flask

1 篇文章 0 订阅

订阅专栏

说明

在Flask中，Jinja2是默认的模板引擎，它用于生成动态内容并将其呈现给用户。Flask中的Jinja2模板引擎提供了一种简单而强大的方法来创建动态网页。

基本使用

首先需要创建一个模版文件夹，也可以创建一个文件夹再将其标识为模版文件夹

创建py文件，导入flask模块，开始使用。

from flask import Flask, render_template

app = Flask(__name__, template_folder='templates')

注：template_folder为选择模版文件夹

1，变量传递

以使用双括号{{ }}来插入变量，传递到模版中。

from flask import Flask, render_template

app = Flask(__name__, template_folder='templates')


@app.route('/')
def index():
    name = 'Always'
    text1 = 'Hello jinja2'
    return render_template('index.html', name=name, text1=text1)


if __name__ == '__main__':
    app.run()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jinja2</title>
</head>
<body>
    <h1>{{ name }}</h1>
    <p>{{ text1 }}!</p>
</body>
</html>

网页效果

参数放在{{..}}可以在html中直接使用。

2，控制结构

在Jinja2模板中，可以使用控制结构{{%..%}来实现条件判断、循环等功能。

if语句

from flask import Flask, render_template

app = Flask(__name__, template_folder='templates')


@app.route('/')
def index():
    name = 'Always'
    text1 = 'Hello jinja2'
    numeral = '12'
    return render_template('insete.html', name=name, text1=text1, numeral=numeral)


if __name__ == '__main__':
    app.run()

insete.html

{% if numeral %}
    <p>当前 不为空</p>
{% else %}
    <p>当前 为空</p>
{% endif %}

网页效果

判断py代码中的numeral参数是否为空，如果不为空则返回 ‘不为空’，为空则返回‘为空’

语法和python一样

注意：结尾一定需要加 {%...%} ！

for循环

from flask import Flask, render_template

app = Flask(__name__, template_folder='templates')


@app.route('/')
def index():
    list_one = ['兔子', '猫', '狗', '牛马']
    return render_template('insete.html', list_one=list_one)


if __name__ == '__main__':
    app.run()

insete.html

<ul>
{% for lis in list_one %}
    <li>{{ lis }}</li>
{% endfor %}
</ul>

页面效果

3 ，注释

在Jinja2模板中，可以使用{# ... #}语法来添加注释。注释可以帮助在模板中添加说明或者临时禁用一些代码，而这些注释在渲染模板时会被忽略。

<body>
    <h1>标题1</h1>
    {# 注释 #}

</body>

效果

说明：jinja2中的注释效果，html页面中不会显示注释内容

4，过滤器

在Jinja2模板中，过滤器（filters）是一种用于修改变量输出的功能。可以在模板中使用过滤器来对变量进行转换、格式化或者筛选，以满足特定的需求。

内置过滤器

Jinja2提供了许多内置过滤器。也可以自定义过滤器来扩展其功能。以下是一些常用的内置过滤器：

1、 upper：将字符串转换为大写。

{{ "hello" | upper }}  <!-- 输出: HELLO -->

2、 lower：将字符串转换为小写。

{{ "HELLO" | lower }}  <!-- 输出: hello -->

3 、 capitalize：将字符串首字母大写。

{{ "hello world" | capitalize }}  <!-- 输出: Hello world -->

4、 length：获取列表或字符串的长度

{{ [1, 2, 3] | length }}  <!-- 输出: 3 -->

5、 default：设置默认值，当变量为None或空时使用默认值。

{{ my_variable | default("No value") }}

自定义过滤器

在 Flask 中，模板渲染通常是通过 Jinja2 模板引擎来完成的。Jinja2 提供了一种方式来定义和使用自定义过滤器，这些过滤器可以在模板中用于转换或处理变量。

在遇到一些需求时，可以通过自定义过滤器批量转换某些数据格式。就例如：手机号转换

from flask import Flask, render_template

app = Flask(__name__, template_folder='templates')


@app.template_filter('mpn')
def mask_phone_number(value):
    middle_part = '*' * 5
    phone_number = f"{value[:3]}{middle_part}{value[8:]}"
    return phone_number


@app.route('/')
def index():
    number = '16621111259'
    return render_template('base.html', number=number)


if __name__ == '__main__':
    app.run()

@app.template_filter('mpn') ：为过滤器装饰器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义过滤器</title>
</head>
<body>
    <p>手机号过滤:  {{ number| mpn }}</p>
    <p>手机号过滤+翻转:  {{ number| mpn | reverse }}</p>
</body>
</html>

页面效果

在模板文件中，使用自定义的过滤器来替换手机号中间的数字为*。在第二个中为自定义的过滤器加上自带的内置过滤器再次进行翻转。

5，模版继承

在Jinja2模板中，可以使用模板继承来避免重复编写相似的HTML结构，并实现页面布局的复用。模板继承允许创建一个基础模板，然后在子模板中继承并扩展基础模板的内容。

from flask import Flask, render_template

app = Flask(__name__, template_folder='templates')


@app.route('/')
def index():
    return render_template('son1.html')


if __name__ == '__main__':
    app.run()

base.html 基础模版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}我的网站{% endblock %}</title>
</head>
<body>
<header>
    <h1>模版继承</h1>
</header>
<main>
    {% block content %}
    {% endblock %}
</main>
<footer>
    &copy; 2024-05-10 always胖兔
</footer>
</body>
</html>

son1.html 子模版

{% extends "base.html" %}

{% block title %}
    首页 - 我的网站
{% endblock %}

{% block content %}
    <h2>主页</h2>
    <p>欢迎来到“我的网站”主页。</p>
{% endblock %}

页面效果

说明：{% block ... %} {%endblock%} 为模版继承的标准格式

{% extends "base.html" %}：这一行表示这个模板继承了另一个名为 base.html 的模板。

{% block title %} 和 {% endblock %}：这两行定义了一个名为 title 的块。

{% block content %} 和 {% endblock %}：同样的，这两行定义了一个名为 content 的块。

6，模版包含

在Jinja2模板中，可以使用include指令来包含其他模板文件的内容。这使得在模板中可以重复使用一些通用的部分，减少代码重复量以及方便后续代码的修改与优化。例如页眉、页脚、侧边栏等待。

from flask import Flask, render_template

app = Flask(__name__, template_folder='templates')


@app.route('/')
def index():
    return render_template('base.html')


if __name__ == '__main__':
    app.run()

base.html 主要页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jinja2</title>
</head>
<body>
    {% include 'header.html' %}

    <main>
        <p>这里是内容 one</p>
        <p>这里是内容 two</p>
    </main>

    {% include 'footer.html' %}
</body>
</html>

header.html 网页头部

<header>
    <h1>欢迎来到我的网站</h1>
</header>

footer.html 网页尾部

<footer>
    &copy; 2024/05/10  ----胖兔always
</footer>

渲染base.html模板时，Jinja2会将header.html和footer.html中的内容插入到相应的位置，从而生成完整的HTML页面。

{% include ... %}

7、转义

在Jinja2模板中，默认情况下，Jinja2 会自动转义模板中的变量，以防止跨站脚本攻击（XSS）。这意味着在模板中插入变量时，特殊字符（如 <、>、& 等）会被转换为相应的 HTML 实体。

from flask import Flask, render_template

app = Flask(__name__, template_folder='templates')


@app.template_filter('mpn')
def mask_phone_number(value):
    middle_part = '*' * 5
    phone_number = f"{value[:3]}{middle_part}{value[8:]}"
    return phone_number


@app.route('/')
def index():
    html1 = '<p>标题一</p>'
    return render_template('base.html', html1=html1)


if __name__ == '__main__':
    app.run()

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Escaping Example</title>
</head>
<body>
    <p>转义前: {{ html1}}</p>
    <p>转义后: {{ html1 | safe }}</p>
</body>
</html>

效果图