3.render_template渲染模板及jinja2

时间 2019-12-07

标签 3.render render template 渲染模板 jinja2 jinja 繁體版

原文原文链接

咱们以前的视图函数，返回的都是简单的'Hello Wolrd'之类的字符串，怎么返回一个html呢？首先咱们在templates文件夹创建一个html文件，内容随便写一点以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
<h1>This is index page</h1>
</body>
</html>

咱们可使用Flask对象app的send_static_file方法，使视图函数返回一个静态的html文件，但如今咱们不使用这种方法，而是使用flask的render_template函数，它功能更强大。
从flask中导入render_template，总体代码以下：python

from flask import Flask, render_template
import config

app = Flask(__name__)
app.config.from_object(config)


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

if __name__ == '__main__':
    app.run()

render_template函数会自动在templates文件夹中找到对应的html，所以咱们不用写完整的html文件路径。用浏览器访问'/'这个地址，显示结果以下：flask

那么为什么称之为模板呢？由于render_template不只能渲染静态的html文件，也能传递参数给html，使一个html模板根据参数的不一样显示不一样的内容，这是由于flask使用了jinja2这个模板引擎。要使用模板，在render_template参数中以key=value形式传入变量，在html中使用{{key}}来显示传入的变量，例如：后端

# 视图函数
@app.route('/')
def index():
    return render_template('index.html', contents='This is index page')

# html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
<h1>{{ contents }}</h1>
</body>
</html>

浏览器显示的结果与上文是同样的。咱们还能够直接把一个类的实例传递过去，并在模板中访问类的属性，例如假设一个类对象obj有a和b属性，关键部分的代码以下：浏览器

# 视图函数中
return render_template('index.html', object=obj)

...
# html中
<p>a: {{ object.a }}</p>
<p>b: {{ object.b }}</p>

传入一个字典也能够，而且在模板中既能够用dict[key]，也能够用dict.key。app

使用过滤器，能够在html中对传入的变量进行处理，其格式是{{ 变量 | 过滤器 }}，例如将前文的{{ contents }}修改成{{ contents | upper}}，浏览器显示的内容就变成了：函数

因此咱们能够很容易就理解，过滤器其实就是以变量为参数的函数，返回处理后的结果，在后端同样能够先用字符串对象的upper()函数处理好再传递给模板，效果是彻底同样的。jinja2自带了一些过滤器，例如length/reverse/lower等等，而且咱们也能够本身按照需求自定义过滤器，模板还支持{{ 变量 | 过滤器1 | 过滤器2 | ... }}这样的操做。想要深刻了解的话，能够搜索jinja2过滤器去进一步学习。学习

模板中还可使用if else和for in控制语句，与变量使用{{ }}不一样，控制语句要放在{% %}里，例如前文的contents传入一个list：spa

contents=[i for i in range(10)]

html中代码以下：code

<h1>
    {% for i in contents %}
        {{ i }}{# 注意i也要用两个大括号 #}
    {% endfor %}
</h1>

使用for遍历contents的内容，并用{{ i }}显示出来，同时还用{# #}加了一个注释，还要注意须要使用{% endfor %}来提示循环区域的结束，由于html不像python那样经过缩进来判断循环的区域，if也是同理。浏览器显示结果：

最后for和if结合使用：

<h1>header</h1>
    {% for i in contents %}
        <p>
        {% if i%2 == 0 %}
            {{ i }}是偶数{# 注意i也要用两个大括号 #}
        {% else %}
            {{ i }}是奇数
        {% endif %}
        </p>
    {% endfor %}

结果以下（只是演示一下，不要吐槽排版和美观）：