Flask - 扩展 - jinja2 - 模版处理信息 - {{}}

jinja2 的简介

Python 的 Jinja2 是一个现代且设计简洁的模板引擎，广泛用于Web开发中。它允许开发者使用模板语言来动态生成文本输出，特别适合生成HTML、XML或电子邮件内容。以下是 Jinja2 的一些主要作用和特点：

1. 变量替换：在模板中插入变量值，将占位符替换成实际数据。
2. 循环和条件语句：模板中可以包含循环和条件逻辑，实现复杂的文本处理。
3. 自动转义：自动对变量进行HTML转义，提高Web应用的安全性。
4. 继承和包含：支持模板继承，可以创建基础模板并被其他模板继承，实现布局的复用。
5. 自定义函数和过滤器：可以定义自定义的模板函数和过滤器，扩展模板引擎的功能。
6. 集成环境：与Web框架如Flask和Django集成，简化Web应用的开发流程。

Jinja2 提供了强大的模板功能，使得开发者能够编写更加清晰和可维护的模板代码，是现代Web开发中不可或缺的工具之一。

作用：从Flask传递信息到HTML（模版）

基本用法

基本{{ info }}
方法{{%  %}}
注释{{#  #}}
注释{# {{page.book()}} #}

参考Flask - return方法

简单模版
python

@app.route("/", methods=["GET"])
def hello_flask():
    all = User.query.filter_by().all()
    info = "ok"
    return render_template("index.html",all=all,info=info)

html

<p>{{all}}</p>
<p>{{info}}</p>

模版 - 无参数

python

return render_template("index.html")

没参数也就没有的写

模版 - 有参数

python

return render_template("index.html",all=all,info=info)

html

<p>{{all}}</p>
<p>{{info}}</p>

字符串返回到模板

python

方式一：
return "fail"
方式二：
info = "error"
return info

html

<p>{{info}}</p>

列表返回到模板

python

方式一：
return ["A","B","C"]
方式二：
info = ["A","B","C"]
return info

html

<p>{{info[0]}}</p>
<p>{{info[1]}}</p>
<p>{{info[2]}}</p>
按顺序：显示ABC

有参数 - 数据库

python

info = User.query.filter_by(id=1)
return info

html

<ul>
    {% for a in info %}
        <li>{{a.name}}</li>
    {% endfor %}
</ul>

迭代字典

{% for key, value in row.items() %}
    {{ key }}  {{ value }}      
{% endfor %}

解释：
1.查数据库有多行多列，是可以的
2.jinja2的for循环可以遍历出来
注意：复杂的遍历去官网搜索

if函数

{% if 条件1 %}
           语句块1
    {% elif 条件2 %}
            语句块2
    {% else %}
            不符合所有条件
{% endif %}

例子

    <p>
        {% for item in list1 %}
            {% if item|length > 8 %}
                {{ item }} <br>
            {% elif item|length < 6 %}
                {{ "wwwwww" }}  <br>
            {% else %}
                {{ "qqqqqq" }}   <br>
            {% endif %}
        {% endfor %}
    </p>

xx是{{xx}}不用写括号

判断非空

{% if item %}
    {{ item }}
{% endif %}

就跟python 的if item : 类似语句 - if xxx: else: - 判断有无，判断是否

与或非

or and

{% if flag=="A" or flag=="B" %}

javascript和css里的jinja2

在模版文件html里写上

let data = {{data|tojson}}
console.log(data)

要注意的是，全部数据不可以空，空的话pandas可以用内容 - df.fillna() - NaN转换，来解决 fillna(‘[]’)