table of Contents
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:
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:
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: