flask web开发实战源代码(flask实现web的登录和注册)
一、概述
在第二部分中,我将讨论如何使用模板。
学习完第一章之后,你已经拥有了一个虽然简单,但是可以成功运行web应用,它的文件结构如下:
microblog
venv
app
__init__.py
routes.py
microblog.py
在终端会话中设置环境变量flask_app=microblog.py,然后执行flask run命令来运行应用。 包含这个应用的web服务启动之后,你可以通过在web浏览器的地址栏中键入url http://localhost:5000/ 来验证。
本章将沿用这个应用,在此之上,你将学习如何生成包含复杂结构和诸多动态组件的网页。如果对这个应用和相关开发流程有所遗忘,请回顾第一章。
二、什么是模板?
我设计的微博应用程序的主页会有一个欢迎用户的标题。虽然目前的应用程序还没有实现用户概念,但这不妨碍我使用一个python字典来模拟一个用户,如下所示:
user = {'username':'miguel'}
创建模拟对象是一项实用的技术,它可以让你专注于应用程序的一部分,而无需为系统中尚不存在的其他部分分心。 在设计应用程序主页的时候,我可不希望因为没有一个用户系统来分散我的注意力,因此我使用了模拟用户对象,来继续接下来的工作。
原先的视图函数返回简单的字符串,我现在要将其扩展为包含完整html页面元素的字符串,如下所示:
from app import app
@app.route('/')
@app.route('/index')
def index():
user = {'username': 'miguel'}
return '''
<html>
<head>
<title>home page - microblog</title>
</head>
<body>
<h1>hello, ''' + user['username'] + '''!</h1>
</body>
</html>
运行flask run 更新视图功能,并查看应用程序在浏览器中的显示效果。
利用上述的代码更新这个视图函数,然后再次在浏览器打开它的url看看结果。
如果我说这个函数返回html的方式并不友好的话,你可能会觉得诧异。设想一下,当这个视图函数中的用户和博客不断变化时,里面的代码将会变得多么的复杂。应用的视图函数及其关联的url也会持续增长。如果哪天我决定更改这个应用的布局,那就不得不更新每个视图函数的html字符串。显然,随着应用的扩张,这种方式完全不可行。
将应用程序的后台逻辑和网页布局划分开来,你不觉得更容易组织管理吗?甚至你可以聘请一位web设计师来设计一个杀手级的网站前端,而你只需要用python编写后台应用逻辑。
模板有助于实现页面展现和业务逻辑之间的分离。 在flask中,模板被编写为单独的文件,存储在应用程序包内的templates文件夹中。 在确定你在microblog目录后,创建一个存储模板的目录:
在flask中,模板是作为单独的文件编写的,存放在应用程序 包内的 templates文件夹(约定俗成命名为 templates)下。
即在app目录下创建templates文件夹:
# mkdir templates
在下面可以看到你的第一个模板,它的功能与上面的index()视图函数返回的html页面相似。 把这个文件写在app/templates/index.html中:
<html>
<head>
<title>{{ title }} - microblog</title>
</head>
<body>
<h1>hello, {{ user.username }}!</h1>
</body>
</html>
这是一个标准的、简单的html页面。但有一点跟我们写html代码不同是title标签、h1标签中的 {{ … }}两对花括号,在此它是个 占位符,作用是将表达式(如文字、数学式子、比较运算符等,其实在python中是一个python语句)打印到模板进行输出。具体参考jinja2官网文档。
这些占位符表示html页面中可变的部分,并且只在运行时才知道。
这个html页面看起来非常简单,唯一值得关注的地方是{{ … }}。{{ … }}包含的内容是动态的,只有在运行时才知道具体表示成什么样子。
网页渲染转移到html模板之后,视图函数就能被简化:
现在html页面的呈现已在html模板中了,这样接着就可简化一下视图函数index()了。修改routes.py文件
app/routes.py:使用render_template()函数
from app import appfrom flask import render_template #从flask包中导入render_template函数
@app.route('/')
@app.route('/index')
def index():
user = {'username':'miguel'}
return render_template('index.html', title='home', user=user)
将模板(index.html)转换为完整html页面的操作称之为 呈现(render,译作 递交、表达、给予,在此译作 “渲染”)。为了渲染模板,由从flask包中导入的render_template()完成,此函数“携带”模板文件名(index.html)、模板参数的变量列表,并返回相同的模板,不过其中所有占位符都替换为实际值。
看起来好多了吧? 赶紧试试这个新版本的应用程序,看看模板是如何工作的。 在浏览器中加载页面后,你需要从浏览器查看html源代码并将其与原始模板进行比较。
render_template()函数调用flask框架原生依赖的jinja2模板引擎。 jinja2用render_template()函数传入的参数中的相应值替换{{…}}块。
控制结构—-if条件、for循环、继承
上述过程只是理解了:jinja2模板引擎 如何在渲染过程中用实际值 替换 (模板中的)占位符。
接下来将认识到更多 jinja2在模板文件中支持的更多强大操作:if条件、for循环、继承等。
源自官网的这句话:
there are a few kinds of delimiters. the default jinja delimiters are configured as follows:
{% ... %} for statements
{{ ... }} for expressions to print to the template output
{# ... #} for comments not included in the template output
# ... ## for line statements
if、for、继承均在{% … %}块中写控制语句。
if条件
形如:
{% if title %}
...语句块
{% else %}
...语句块
{% endif %}
app/templates/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>
上述代码中if语句块的功能是:若视图函数index()没有传递title占位符变量的值,则index.html模板将会提供默认值(else语句块中),而不是显示空标题。
尝试将routes.py中render_template()中的title=’home’,删除。效果:图略
for循环
在模板中形如:
{% for post in posts %}
...语句块
{% endfor %}
需求:登录用户可在主页中查看最新的帖子。
实现:
首先,用虚拟对象的方法来创建一些用户、帖子,以供显示。
app/routes.py:视图函数中的假帖子
from app import appfrom flask import render_template#从flask包中导入render_template函数
@app.route('/')
@app.route('/index')
def index():
user = {'username':'miguel'}#用户
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)
帖子列表 可包含任意数量的元素,由视图函数index()决定将在页面中显示的帖子数量。而模板index.html不能假设这有多少个帖子,因此它需要准备好以通用方式呈现视图发送来的尽可能多的帖子。在模板index.html中,用for循环遍历所有的帖子并呈现。
app/templates/index.html:在模板中的for循环
<html>
<head>
{% if title %}
<title>{{ title }} - microblog</title>
{% else %}
<title>welcome to microblog!</title>
{% endif %}
</head>
<body>
<h1>hello,{{ user.username }}!</h1>
{% for post in posts %}
<div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>
{% endfor %}
</body>
</html>
模板继承
形如:
{% extends "base.html" %}
{% block content %}
...
{% endblock %}
现在,大部分web应用程序在页面顶部有一个导航栏,它常包含一些常用链接:如登录、退出、编辑个人资料等。可以很轻松地将导航栏添加到index.html模板,甚至更多的html页面中。但随着应用程序的增长(页面数量的增多),这些页面都将使用相同的导航栏,不可能每一个页面都增加一份相同的导航栏代码。
jinja2具有模板继承功能,完美解决上述问题。在实际操作中,将所有模板共有的页面布局部分移至基础模板中,其他模板则继承自它。
实例:实现一个简单的导航栏,其他模板继承它。
在app/templates目录下创建一个基础模板文件 base.html。
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 content %}
{% endblock %}
</body>
</html>
在上述基础模板中,块block 控制语句用于定义派生模板可自行插入的位置。块block 被赋予唯一的名字 content,派生模板在提供其内容时可引用这个名称。
修改index.html这个模板,让其继承base.html模板。
app/templates/index.html:从基础模板继承
{% extends "base.html" %}
{% block content %}
<h1>hello,{{ user.username }}!</h1>
{% for post in posts %}
<div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>
{% endfor %}
{% endblock %}
base.html基础模板 实现处理常规页面的结构,则派生模板index.html简化大部分内容。
extends语句 建立了两个模板之间的继承关系,因此,jinja2就会知道:当它被要求渲染index.html时,需要将其嵌入base.html中。这俩模板具有匹配的block语句 名称content,这就是jinja2如何将两个模板合并为一个模板的方法。
今后,当再需要为应用程序创建其他页面时,就可省去编写相同代码的麻烦,并让应用程序的所有页面共享相同的外观,而只需一个步骤:创建继承自base.html模板的派生模板。
目前为止,项目结构:
microblog/
venv/
app/
templates/
base.html
index.html
__init__.py
routes.py
microblog.py
推荐阅读
-
flask web开发实战源代码(flask实现web的登录和注册)
-
flask web开发实战源代码(flask实现web的登录和注册)
-
一个基于flask的web应用诞生 用户注册功能开发(5)
-
一个基于flask的web应用诞生 用户注册功能开发(5)
-
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
-
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
-
用Python实现web端用户登录和注册功能的教程
-
Flask web开发处理POST请求实现(登录案例)
-
用Python实现web端用户登录和注册功能的教程
-
基于JSP和Servlet技术实现的Java Web的注册和登录的功能