500字范文,内容丰富有趣,生活中的好帮手!
500字范文 > Flask奇妙探索之旅(二)之模板

Flask奇妙探索之旅(二)之模板

时间:2021-12-31 12:09:09

相关推荐

Flask奇妙探索之旅(二)之模板

本文参考来源The-Flask-Mega-Tutorial-zh在翻译的基础上加进了个人的部分理解,仅做个人的学习记录之用。

上一节我们使用Flask构建了自己的第一个Web应用,通过在虚拟环境运行flask run来启动,通过在浏览器中输入URL http://localhost:5000/来查看。

模板

Flask使用Jinja2作为默认模板引擎,让我们在了解此之前先使用Python字典来模拟一个用户:

user = {'username': 'Davil'}

通过模拟用户对象可以使我们来专注于主页的构建,在上一节中视图函数microblog\app\routes.py返回了Hello,World字串,这次让我们返回一完整的HTML页面。代码如下:

from app import my_app #从包app中导入实例化的my_app对象# 装饰器语法糖,关联 index()返回的页面与URL路径@my_app.route('/') @my_app.route('/index')def index():user = {'username': 'Devil'}#字典,使两者实现对应关系return '''<html><head><title>Home Page - Microblog</title></head><body><h1>Hello, ''' + user['username'] + '''!</h1></body></html>'''

此处使得HTML布局和应用程序的逻辑混杂在一起,不利于组织管理,在Flask中,模板为单独文件,放在microblog\templates文件夹下,让我们在此目录下新建第一个index.html模板:

<html><head><title>{{ title }} - Microblog</title></head><body><h1>Hello, {{ user.username }}!</h1><!--{{...}}中包含的内容是动态的,在此我把它理解为一个变量--> </body></html>

由于在模板中定义了index.html,完成了页面迁移,这样就使视图函数得到简化,更新后的视图函数如下:

from flask import render_template #通过 render_template()方法渲染模板from app import my_app@my_app.route('/')@my_app.route('/index')def index():user = {'username': 'Devil'}return render_template('index.html', title='Home', user=user)#此函数第一个参数为模板路径文件名,后面的参数为向模板传递的键值对

将模板转换为完整的HTML页面的操作称为渲染,为了了解更多关于渲染模板及Flask的其他问题,可以访问此网站,开始提到Jinja2为Flask默认模板,Jinja2用render_template()函数传入的参数中的相应值替换{{...}}块,从index.html可知,其中包含两处动态内容,分别是<title>{{ title }} - Microblog</title><h1>Hello, {{ user.username }}!</h1>,通过渲染,进行了替换,若我们没有传入title=“Home”,又不想输出一个空标题,结合编程经验,我们可以通过条件语句解决这个问题。

条件语句

让我们使用条件语句更新index.html模板:

<html><head>{% if title %} <!--模板内控制语句格式{%...%}--><title>{{ title }} - Microblog</title>{% else %}<title>Welcome to Microblog!</title>{% endif %}</head><body><h1>Hello, {{ user.username }}!</h1></body></html>

从上面代码可以看出若没有传入title参数,就会打印出Welcome to Microblog!标题

循环语句

下面使用模拟对象来创建一些模拟用户和动态

from flask import render_templatefrom app import app@app.route('/')@app.route('/index')def index():user = {'username': 'Devil'}posts = [{'author': {'username': 'John'},'body': 'Beautiful day in Portland!'},{'author': {'username': 'Susan'},'body': 'The Avengers movie was so cool!'}]return render_template('index.html', title='Home', user=user, posts=posts)

在此处建立了一个列表,每个元素是一个字典

在模板方面,需要解决以通用的方式来渲染用户动态,通过for循环语句可以解决这个问题

<html><head>{% if title %}<title>{{ title }} - Microblog</title>{% else %}<title>Welcome to Microblog</title>{% endif %}</head><body><h1>Hi, {{ user.username }}!</h1>{% for post in posts %}<div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>{% endfor %}</body></html>

此处可以运行起来应用,看看是不是可以看到用户动态了,本机运行如下:

模板的继承

大多Web应用在页面均有一个导航栏,就如同Wordpress搭建的网站上,有登入、登出、首页之类的,通过HTML可以轻松实现将这些功能添加进index.html里。不过,在浏览网站的过程中我们发现导航条存在于网站的每个页面中,这种会造成代码冗杂,通过模板继承可以解决这个问题,在此处想到了C++的继承,子类继承父类的方法和属性,有着异曲同工之妙。 下面进行基类模板的编写app/templates/base.html

<html><head>{% if title %}<title>{{ title }} - Microblog</title>{% else %}<title>Welcome to Microblog</title>{% endif %}</head><body><div>Microblog: <a href="/index">Home</a></div><hr>{% block Devil %}{% endblock %}</body></html>

在这个基础模板中特殊的语句为{% block content %}{% endblock %},content为定义的块名,基类中间如果包含有内容,则会被继承基类中的子项覆盖。而其为名称,我们可以对其进行重命名,在my_app中,将块名命名为Devil,则现在index.html可简化为:

{% extends "base.html" %}<!--与模板块名对应-->{% block Devil %}<h1>Hi, {{ user.username }}!</h1>{% for post in posts %}<div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>{% endfor %}{% endblock %}

第一句表明此模板继承于base.html,这样Jinja2就可知道将index.html嵌入基础模板当中,此种方式就减少了代码量,下面运行一下试试吧!本机的运行情况如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。