Flask教程(四)模板 - 迷途小书童的Note迷途小书童的Note

文章目录

软硬件环境

Windows 10 64bit
Anaconda3 with python 3.7
PyCharm 2019.3
Flask 1.1.1

视频看这里

此处是youtube的播放链接，需要科学上网。喜欢我的视频，请记得订阅我的频道，打开旁边的小铃铛，点赞并分享，感谢您的支持。

前言

在前面的教程中，我们的页面只是显示了一些简单的字符，还没有使用到html的各种元素，本节开始学习Flask当中的模板，来创建更加复杂、更加美观的网页。

在视图函数中使用html

先来看个实例

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return '<html><body><h1>Hello flask!</h1></body></html>'

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

在视图函数index中，返回的是一个html的字符串，标签<h1>表示的是一级标题，访问http://127.0.0.1:5000，可以看到标题版的Hello flask!

flask

但是考虑到实际的网页内容都很复杂，把html都写在视图函数里显然是不现实的，这个时候模板就出现了。

模板的使用

Flask提供了Jinja2模板引擎，它可以渲染外部的html网页文件，对应的函数是render_template，看下面这个例子

from flask import Flask, render_template

app = Flask(__name__)

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

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

接下来我们在工程下创建一个文件夹templates(Flask默认存放html文件的地方，static存放静态文件，如js、css、图片等)，然后在文件夹下新建index.html，输入下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
    <h1>Hello flask!</h1>
</body>
</html>

访问http://127.0.0.1:5000，可以看到标题是Index，内容是Hello flask!，同时也可以通过浏览器去查看网页的源代码，内容跟上面的index.html文件是一样的

flask

接下来就有个问题了，既然html内容已经独立出来了，怎么将数据通过视图传递到模板文件呢？来看下面这个实例

index.html文件内容

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

run.py则变成

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/<name>')
def index(name):
    return render_template('index.html', name=name)

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

可以看到我们在html文档中使用了{{ name }}这条语句，这是Jinja2模板中的定界符，这个name就是视图传递过来的数据。常用的定界符有如下几个