[Flask template language Jinja2] --2019-08-06 15:48:34

Original link: http://106.13.73.98/__/110/

@ (Jinja2 template language)
***
supplementary import static files:

<link rel="stylesheet" href="{{ url_for('static', filename='css/clock.css') }}">

Falsk default template language is Jinja2
{{}}used when references or execution
{%%}logic to use

Process Control

for grammar

{% for foo in g %}
    # 逻辑...
{% endfor %}

if grammar

{% if g %}

{% elif g %}
    
{% else %}
    
{% endif %}

Began testing
***
We are ready to back-end code:

from flask import Flask, render_template

app = Flask(__name__)

info = {
    1: {'name': '张三', 'age': '30', 'gender': '男'},
    2: {'name': '李四', 'age': '40', 'gender': '女'},
    3: {'name': '王五', 'age': '50', 'gender': '未知'},
}


@app.route('/')
def test():
    return render_template('test.html', info=info)
  # 还可以使用下面这种方式传递字典:
  # return render_template('test.html', **{'info': info})
app.run('0.0.0.0', 5000, debug=True)


He began to write front-end:

<table border="1px">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    </thead>
    <tbody>
    {% for k in info %} {# 循环字典还可用keys, values, items方法 #}
        <tr>
            <td>{{ k }}</td>
            <td>{{ info.get(k).name }}</td>
            <td>{{ info[k].get('age') }}</td>
            <td>
                {% if info[k]['gender'] == '未知' %}
                    男
                {% else %}
                    {{ info[k]['gender'] }}
                {% endif %}
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>


Below showing the effect of:
Here Insert Picture Description

Template language Escape

Security reasons, the default string is not passed in front of the escape.

Starting from the back end --Markup
***
backend code:

from flask import Flask, render_template, Markup

app = Flask(__name__)


@app.route('/')
def test():
    tag = '<label><input type="text" value="我将被转义"></label>'
    # 受用Markup在HTML标签上做一层封装,当Jinja2模版语言知道这是一个安全的HTML标签
    ret = Markup(tag)
    return render_template('test.html', ret=ret)


app.run('0.0.0.0', 5000, debug=True)


Front-end code:

{{ ret }}


Achieve results:
Here Insert Picture Description

Starting from the front --safe
***
backend code:

from flask import Flask, render_template, Markup

app = Flask(__name__)


@app.route('/')
def test():
    tag = '<label><input type="text" value="我将被转义"></label>'
    return render_template('test.html', tag=tag)


app.run('0.0.0.0', 5000, debug=True)


Front-end code:

{{ tag|safe }}


Well, to visit to verify it.
***

Python functions used in the template

Method a: use the global function defined template_global
***
distal Code:

from flask import Flask, render_template

app = Flask(__name__)


@app.template_global()  # 定义全局模版函数
def axb(a, b):
    return a * b


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


app.run('0.0.0.0', 5000, debug=True)


Front-end code:

{{ axb(10, 10) }}

Method 2: front end pass function
***
backend code:

from flask import Flask, render_template

app = Flask(__name__)

axb = lambda a, b: a * b


@app.route('/')
def test():
    return render_template('test.html', axb=axb)


app.run('0.0.0.0', 5000, debug=True)


Front-end code:

{{ axb(10, 10) }}


Jinja2 template reuse of block

We must first define a master file index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>此处省略800行</div>
    {% block content %}

    {% endblock %}
    <div>此处省略800行</div>
</body>
</html>

Then refer to it in another HTML file:

{% extends "index.html" %}
{% block content %}
<div>此处省略800行</div>
{% endblock %}


The templates include reference Jinja2

Define a block of code:

<form>
    用户名:<input type="text" name="user">
    密码:<input type="password" name="pwd">
</form>

Then refer to it in another HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>此处省略800行</div>
    {% include "login.html" %}
    <div>此处省略800行</div>
</body>
</html>


Jinja2 template macro definition of the macro

Macro definition is rarely used.

Front-end code:

<body>
{# 先定义一个函数 #}
{% macro type_text(type, name) %}
    <input type="{{ type }}" name="{{ name }}" value="{{ name }}">
{% endmacro %}

{# 调用函数 #}
{{ type_text('text', 'username') }}
{{ type_text('password', 'userpwd') }}
</body>

Display of results as follows:
Here Insert Picture Description

Guess you like

Origin www.cnblogs.com/gqy02/p/11309448.html