Flask 网站微架构(三) 之 Jinja2 模板编程

in Python with 0 comment

Jinja2是python web编程中主流的模板语言,从Django模板发展而来,比Django模板的性能更好。由于Flask是基于Werkzeug和Jinja2发展而来,所以在安装Flask时会自动安装Jinja2,无需单独安装。

Jinja2语法

Jinja2模板可以保存在任何基于文本的文件中,比如xml, html, csv等,所以模板文件本省可以接收任何文件后缀,比如html, xml等。

普通内容: 没有任何特殊的含义
变量: {{变量}}
表达式: {%……%}
注释: {#……#}


过滤器

过滤器通过管道符号“|”与变量连接,并且可以通过圆括号传递参数。

{{my_variable|default('my_variable is not define')}}
abs(number) #绝对值
capitalize(s) #首字母大写
center(value, width=80) #接收一个字符串,将其置于80的长度并居中,不足的字符用空格填充
format(value, *attribute) #字符串格式化功能, value是格式定义的, attribute是可以变长参数,接收占位符代表的值


流程控制

{% if name >0 %}
{% elif name = 0 %}
{% endif %}
{%for i in seq %}
{% endfor %}

cat main.html

{% for i in seqs %}
    <h3>{{ i }}</h3>
{% endfor %}

cat demon2.py

@app.route('/test/<string:abc>')
def index(abc=None):
    return render_template('html/main.html', name=abc, seqs=['1', '2', '3'])

运行结果如下:
2.png

{{ name is defined }}        #变量是否被定义
defined    #是否被定义,返回布尔值
iterable(value)   #是否可迭代
number(value)    #是否是数字
sequence(value)   #是否是序列,序列同样是可迭代对象
string(value)    #是否是字符串
undefined(value)     #是否没有定义

cat main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<body>
{#<h1 style="margin: auto;"> 你好! </h1>#}
{% if name is defined %}
        <h2>hei {{name}}</h2>
{%  else %}
        <h3> name is not defined!</h3>
{% endif %}
</body>
</html>

cat demon1.py

@app.route('/test/<string:abc>')
def index(abc=None):
    return render_template('html/main.html', name=abc)             ##name对应前端main.html中的变量名name

结果如下:

1.png

模板继承

父模板中:
<div id= "content" >{% block content %}{% endblock %}</div>

子模板sub.html:

{% extends "base.html" %}
{% block content %}

    <p class= "import" >
          我是子模板
    </p>

{% endblock %}

调用:render_template('sub.html')
例:
cat demon2.py

@app.route("/extends")
def extends():
    return render_template('html/sub.html')

cat sub.html

{% extends 'html/main.html' %}
{% block content %}
    <h3>my name is extends</h3>
{% endblock %}

cat main.html

<h1>index</h1>
<div>
    {% block content %}{% endblock %}
</div>

浏览器访问:http://127.0.0.1:5000/extends
3.png

Responses