摘要:示例使用的模板的指令通过从引用来实现模板的继承。上面的模板定义了三个,分别命名为和。同时返回相应错误的数字状态码。示例带有导航栏的基础应用程序模板这个模板中的块中只是一个名为的元素,它包含了在派生模板中定义的名为的空。
2、集成Twitter Bootstrap的Flask-Bootstrap
Bootstrap是Twitter的一个开源框架,提供用户交互组件来创建一个清新且有吸引力的web页面,并兼容所有现代web浏览器。
Bootstrap是一个客户端框架,服务端不直接参与。服务端需要做的就是提供HTML响应,引用层叠样式表(CSS)和JavaScript文件并通过HTML、CSS、和JavaScript代码来实例化需要的组件。模板是做这些的理想地方。
集成Bootstrap到应用程序最好的方式是在模板中做一些必要的改变。一个简单点的途径就是使用Flask-Bootstrap扩展去简化集成工作。可以通过pip来安装Flask-Bootstrap:
(venv) $ pip install flask-bootstrap
Flask扩展通常在应用程序实例被创建的时候初始化。示例3-4展示Flask-Bootstrap的初始化。
示例3-4. hello.py:Flask-Bootstrap初始化
from flask.ext.bootstrap import Bootstrap # ... bootstrap = Bootstrap(app)
和第二章的Flask-Script一样,Flask-Bootstrap从flask.ext命名空间导入并通过传递应用程序实例到构造函数来初始化。
一旦Flask-Bootstrap被初始化,一个包含所有Bootstrap文件的基础模板就可供应用程序使用了。这个模板利用Jinja2的模板继承,应用程序则可以扩展一个拥有通用页面结构,且包含Bootstrap导入的元素的基础模板。示例3-5展示作为派生模板的新版user.html。
_示例3-5. templates/user.html: 使用Flask-Bootstrap的模板
{% extends "bootstrap/base.html" %} {% block title %}Flasky{% endblock %} {% block navbar %}{% endblock %} {% block content %}{% endblock %}Hello, {{ name }}!
Jinja2的extends指令通过从Flask-Bootstrap引用bootstrap/base.html来实现模板的继承。Flask-Bootstrap的基础模板提供一个包含Bootstrap CSS和JavaScript文件的web页面骨架。
基础模板定义了一些可以被派生模板重写的block。block和endblock指令定义了被添加到基础模板中block的内容。
上面的user.html模板定义了三个block,分别命名为title、navbar和content。基础模板里的这些block输出派生模板定义的内容。title块比较简单;它的内容将出现在
在这个模板中,navbar块使用Bootstrap组件定义了一个简单的导航栏。content块有个名为container的 建议:如果你有克隆在GitHub上的应用程序,你现在可以运行git checkout 3b来切换到这个版本的应用程序。Bootstrap官方文档 是一个非常强大的学习资料,完全可以复制粘贴使用那些示例。 图片3-1. Twitter Bootstrap模板 Flask-Bootstrap的base.html模板定义了一些其他可供派生模板使用的block。表格3-2展示了完整的可用block列表。 表格3-2. Flask-Bootstrap基础模板中的block 表格3-2中的许多块用于Flask-Bootstrap自身,所以直接重写它们会引发问题。例如,styles和scripts块是Bootstrap定义文件的地方。如果应用程序需要新增自己的内容到已经有一些内容的块中,则必须使用Jinja2的super()。例如,如何在派生模板中写scripts块,来给文档增加新的JavaScript文件: 当你输入错误路径在你的浏览器地址栏,你会得到404错误代码页面。目前的错误页面很普通也没有吸引力,且没有一致的使用Bootstrap页面。 Flask允许应用程序自定义基于模板的错误页面,就像常规的路由。两个最常见的错误代码,404是在客户端请求的页面或路径不存在的时候触发;500是当存在未处理的异常时触发。示例3-6展示如何为这两个错误提供自定义处理。 示例3-6. hello.py:自定义错误页面 错误处理返回响应,和视图函数一样。同时返回相应错误的数字状态码。 在错误处理中引用的模板需要自己去写。这些模板需要和常规的页面一样的布局,所以在这个示例中需要导航栏和页面头部显示错误信息。 编写这些模板的简单方式是复制templates/user.html到templates/404.html和templates/500.html,然后改变这两个新文件的页面头部元素来给出相应的错误信息,但这会产生很多副本。 Jinja2的模板继承可以帮助我们解决这个问题。Flask-Bootstrap提供了一个带有基本布局页面的基础模板,应用程序可以定义自己的、带有完整页面布局的基础模板,包括导航栏和定义在派生模板中的页面内容。示例3-7展示了templates/base.html,它是一个继承自bootstrap/base.html的新模板且定义了导航栏,但对于其他模板则是一个基础模板,例如templates/user.html、templates/404.html和templates/500.html。 _示例3-7. templates/base.html:带有导航栏的基础应用程序模板 这个模板中的content块中只是一个名为container的 应用程序的模板将从该模板继承而不是直接从Flask-Bootstrap继承。示例3-8展示了从templates/base.html继承来构造一个自定义404错误页面是如此的简单。 示例3-8. templates/404.html:使用模板继承自定义404错误页面 图片3-2展示在浏览器中错误页面是怎样的。 图片3-2. 自定义404错误页面 现在templates/user.html模板可以通过继承基础模板来简化它,就像示例3-9展示的这样。 示例3-9. templates/user.html:使用模板继承简化页面模板 建议:如果你有克隆在GitHub上的应用程序,你现在可以运行git checkout 3c来切换到这个版本的应用程序。 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。 转载请注明本文地址:https://www.ucloud.cn/yun/37433.html 摘要:每个表单域都可以连接到一个或多个是一个用于检查用户提交的输入是否合法的函数。表单域构造函数的第一个参数是一个,在渲染表单到时会使用。验证确保提交的表单域不为空。表单域验证都是直接从包中导入。表格展示了一组支持的标准表单域。
第二章中介绍的request对象公开了所有客户端发送的请求信息。特别是request.form可以访问POST请求提交的表单数据。
尽管Flask的request... 摘要:如果路由重组,模板中的链接将被打断而变得无法访问。静态文件应用程序不仅仅是由代码和模板组成。当服务器收到来自之前示例的,它会产生一个响应包含的文件内容。一个优雅的解决方案是允许服务器只发送时间给浏览器,由浏览器转为当地时间并渲染。
4、链接
任何应用程序都有多个路由,必然需要包含链接来连接不同的页面,例如导航栏。
在模板中,对于简单的路由直接写URLs做链接是非常琐碎麻烦的,而给带... 摘要:用真实的值替换变量并返回最终响应字符串,这个过程称为渲染。示例展示模板实现该响应。控制结构提供一些控制结构用于改变模板流。这个示例展示如何使用循环做到这些同样支持宏,这和代码中的函数很像。
写代码最关键的是要易于维护且结构清晰整洁。目前为止,你看到的例子都过于简单从而没有做这方面的要求。Flask视图函数希望将两个应该完全独立的任务一并处理,两个任务有两种代码,一并处理势必会引发问题。... 摘要:函数携带目的地址主题邮件体模板和一组关键字参数。许多扩展操作是在假设有活动的应用程序和请求上下文的情况下进行的。但是当函数在一个不同的线程上执行,应用程序上下文需要人为地创建使用。例如,执行函数可以将邮件发送到的任务队列中。
许多类型的应用程序都会在某些事件发生的时候通知用户,常用的沟通方法就是电子邮件。尽管在Flask应用程序中,可以使用Python标准库中的smtplib包来发送电... 摘要:局部变量用于保存从表单中接收到的名字,初始化时变量为。在语句中,这个名字被赋值给局部变量且表单域的数据属性通过赋值为空字符串而被清除。示例重定向和用户会话在上一个版本中,局部变量用于保存用户在表单中输入的姓名。
4、视图函数中的表单操作
在新版本的hello.py中,index()视图函数渲染表单并接收其数据。示例4-4展示更新后的index()视图函数。
示例4-4. hello... 阅读 1437·2021-09-28 09:44 阅读 2500·2021-09-28 09:36 阅读 1143·2021-09-08 09:35 阅读 1981·2019-08-29 13:50 阅读 809·2019-08-29 13:29 阅读 1129·2019-08-29 13:15 阅读 1723·2019-08-29 13:00 阅读 2986·2019-08-26 16:16
{% block scripts %}
{{ super() }}
{% endblock %}
3、自定义错误页面
@app.errorhandler(404)
def page_not_found(e):
return render_template("404.html"), 404
@app.errorhandler(500)
def internal_server_error(e):
return render_template("500.html"), 500
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
{% endblock %}
{% block content %}
{% extends "base.html" %}
{% block title %}Flasky - Page Not Found{% endblock %}
{% block page_content %}
Not Found
{% extends "base.html" %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
Hello, {{ name }}!
相关文章
Flask Web Development —— Web表单(上)
Flask Web Development —— 模板(下)
Flask Web Development —— 模板(上)
Flask Web Development —— Email
Flask Web Development —— Web表单(下)
发表评论
0条评论
eternalshallow
男|高级讲师
TA的文章
阅读更多
如何提交百度新闻源?百度新闻源申请方法步骤
程序员年纪大了以后都去了哪里
NXP RT1064学习笔记(一)— 开发环境
css总结
如何使用Flexbox和CSS Grid,实现高效布局
史上前端面试最全问答(附答案)
前端面试题2017(篇幅长,附答案)
巧用命令行工具UCloud CLI,轻量操作API管理云资源