YouTube:https://www.youtube.com/c/xugaoxiang;Bilibili: 迷途小书童的Note;微信公众号: Dev_Club

Flask教程(四)模板

Flask Web 迷途小书童 2评论

软硬件环境

  • 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存放静态文件,如jscss、图片等),然后在文件夹下新建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

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就是视图传递过来的数据。常用的定界符有如下几个

  • {% ... %} 代表这是语句块
  • {{ ... }} 获取表达式的值
  • {# ... #} 代表注释

来到视图部分,我们接受URL传递过来的数据,然后通过render_template传递给html文档

最后程序执行的效果如下

flask

源码下载

https://github.com/xugaoxiang/FlaskTutorial

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. Many thanks extremely helpful. Will certainly share site with my buddies.
    BrianRoose2020-03-31 00:08 回复
    • Thanks.
      迷途小书童2020-03-31 00:23 回复