Flask—Jinja2

版权声明:此博客出自HuQi,感谢您的转载 https://blog.csdn.net/JSYhq/article/details/88617111

一、Jinja2使用

1. 后端代码

STUDENT_DICT = {
    1: {'name': 'Old', 'age': 38, 'gender': '中'},
    2: {'name': 'Boy', 'age': 73, 'gender': '男'},
    3: {'name': 'EDU', 'age': 84, 'gender': '女'},
}

@app.route("/student")
def student():
    return render_template("student.html", stu_dict=STUDENT_DICT)

2. 前端代码

<tbody>
    {% for skey,sitem in stu_dict.items() %}
        <tr>
            <td>{{ skey }}</td>
            <td>{{ sitem["name"] }}</td>
            <td>{{ sitem.age }}</td>
            <td>
            	{% if stu.get("gender") == "中" %}
        		男
            	{% else %}
            		{{ stu.get("gender") }}
            	{% endif %}
            </td>
        </tr>
    {% endfor %}
</tbody>

二、模板语法介绍

1. 变量

# 应用把变量传递到模板,变量上面也可以有你能访问的属性或元素.
# 变量看起来是什么,完全取决于应用提供了什么,你可以使用点(.)来访问变量的属性;
# 如果变量或属性不存在,会返回一个未定义值

{{ foo.bar }}
{{ foo['bar'] }}

2. 逻辑

{% for %}
{% if %}

3. Markup

# Markup等价 django 的 mark_safe 用于返回有效的html标签
# 功能上时防止XSS攻击,想尽一切办法,将你的脚本内容在目标网站中的目标客户的浏览器上解析执行

# 两种方式使用markup
1. 前端
    {{ my_input|safe }}

2. 后端
    from flask import Flask, Markup
    @app.route("/student")
    def student():
        my_input = "<input type='text'>"
        new_input = Markup(my_input)
        
        return render_template("student.html", my_input=new_input)

4. 过滤器

1. 全局过滤器 - 后端定义后,前端直接使用
    (1)后端逻辑
    @app.template_global()
    def func(a, b):
        return a * b
    
    (2)前端逻辑
    {{ func(100,2) }}

2. 过滤器
    (1)后端逻辑
    @app.template_global()
    def func(a,b):
        return a * b
    
    @app.template_filter()
    def func2(c,d):
        return c * d
    
    (2)前端逻辑
    {{ func(1,2)|func2(10) }} // 前面func算出来的值,会自动传入func2第一个位置

5. 模板和继承

{% extends 'layout.html' %}
{% block body %}
{% endblock %}
# 插件定义
{% include 'asd.html' %}

6. 宏指令

{% macro func_mac(mytype, myname) %}
    <input type="{{ mytype }}" name="{{ myname }}">
{% endmacro %}

{{ func_mac('text', 'username') }}
{{ func_mac('password', 'pwd') }}

猜你喜欢

转载自blog.csdn.net/JSYhq/article/details/88617111