资讯专栏INFORMATION COLUMN

Flask Web Development —— 模板(下)

raoyi / 3346人阅读

摘要:如果路由重组,模板中的链接将被打断而变得无法访问。静态文件应用程序不仅仅是由代码和模板组成。当服务器收到来自之前示例的,它会产生一个响应包含的文件内容。一个优雅的解决方案是允许服务器只发送时间给浏览器,由浏览器转为当地时间并渲染。

4、链接

任何应用程序都有多个路由,必然需要包含链接来连接不同的页面,例如导航栏。

在模板中,对于简单的路由直接写URLs做链接是非常琐碎麻烦的,而给带有变量部分的动态路由建立正确的URLs会变得更加复杂。此外,在代码中显式的写URLs会在路由上造成不必要的依赖。如果路由重组,模板中的链接将被打断而变得无法访问。

为了避免这些问题,Flask提供url_for()函数,它会根据存放在应用程序中的URL映射信息来生成URLs。

其最简单的用法,这个函数传入视图函数名(或通过app.add_url_route()定义的路由endpoint名)作为它的参数,然后返回它的URL。例如,在当前版本的hello.py调用url_for("index")将返回/。调用url_for("index", _external=True)将返回一个绝对URL,在该示例中为http://localhost:5000/

  

注:相对URLs足以满足生成链接来连接应用程序不同的路由。绝对URLs只有在链接被用于web浏览器的外部才是必须的,例如通过邮件发送链接。

可以使用url_for()并传递动态部分作为关键字参数来生成动态URLs。例如,url_for("user", name="join", external=True)会返回http://localhost:5000/user/john。

url_for()可以不限参数的使用动态路由。函数会增加扩展参数给查询字符串。例如url_for("index", page=2)会返回/?page=2

5、静态文件

Web应用程序不仅仅是由Python代码和模板组成。大部分的应用程序会使用静态文件,例如从HTML代码中引用的图片、JavaScript源文件和CSS。

你可能需要回忆一下,在第二章中检查hello.py应用程序的URL映射时,有一个static入口在里面。这也是为什么引用定义成/static/的静态文件会被当作特殊路由来对待。例如,一个url_for("static", filename="css/style.css", _external=True)调用会返回http://localhost:5000/static/css/styles.css。

在它的默认配置中,Flask会在位于应用程序根目录下名为static的子目录中寻找静态文件。可以在这个目录下的子目录组织管理文件。当服务器收到来自之前示例的URL,它会产生一个响应包含static/css/styles.css的文件内容。

示例3-10展示应用程序如何在基础模板中包含favicon.icon图标并让浏览器将其显示在地址栏。

示例3-10. templates/base.html:favicon定义

{% block head %}
{{ super() }}

 
{% endblock %}

图标定义被插入在head块里的最下面。注意super()是如何保留定义在基础模板中块的原始内容的。

  

建议:如果你有克隆在GitHub上的应用程序,你现在可以运行git checkout 3d来切换到这个版本的应用程序。

6、Flask-Moment中的本地化日期和时间

当用户工作在世界各个不同的地方,在web应用程序中处理日期和时间就变成了一个比较重要的问题。

服务器使用统一的时间单位,和每个用户的位置无关,所以使用世界标准时间(UTC)。对于用户,看到UTC格式的时间肯定会感到困惑,用户总是希望看到根据当地习惯显示的日期和时间。

一个优雅的解决方案是允许服务器只发送UTC时间给web浏览器,由浏览器转为当地时间并渲染。Web浏览器在这个问题上做的更好,因为他们可以访问用户电脑的所在的时区和地区设置。

有一个优秀的客户端开源库moment.js,用JavaScript编写的,用于在浏览器上渲染日期和时间。Flask-Moment是一个集成moment.js到Jinja2模板的Flask扩展。可以通过pip来安装:

(venv) $ pip install flask-moment

示例3-11展示扩展初始化。

示例3-11. hello.py:初始化Flask-Moment

from flask.ext.moment import Moment
moment = Moment(app)

Flask-Moment除了依赖moment.js外,还依赖jquery.js。这两个库需要直接包含在HTML文档,这种情况下你可以选择使用什么版本,或通过扩展提供的帮助函数来引用内容分发网络(CDN)的测试版本库。因为Bootstrap已经包含了jquery.js,所以只需要将moment.js增加到这个示例中。示例3-12展示这个库是如何被加载到基础模板scripts中的。

示例3-12. templates/base.html:导入moment.js库

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}

为了可以使用时间戳,Flask-Moment创建moment类给模板使用。示例3-13传递current_time变量给模板去渲染。

示例3-13. hello.py:增加datetime变量

from datetime import datetime

@app.route("/") 
def index():
    return render_template("index.html", current_time=datetime.utcnow())

示例3-14展示如何在模板中渲染current_time

示例3-14. templates/index.html:使用Flask-Moment渲染时间戳

The local date and time is {{ moment(current_time).format("LLL") }}.

That was {{ moment(current_time).fromNow(refresh=True) }}

format("LLL")根据客户端电脑的时区和地区设置来格式化显示日期和时间。参数决定了渲染的样式,从LLLL对应不同的详细级别。format()函数还可以接受自定义的格式说明符。

fromNow()渲染样式显示在第二行,渲染一个相对时间戳并随着时间的推移自动刷新它。最初这个时间戳将显示为“几秒钟前”,但随着时间的流逝刷新选项将保持更新,所以如果你离开已打开几分钟的页面你会看到文本变为“一分钟前”,然后“两分钟前”,等等。

  

建议:如果你有克隆在GitHub上的应用程序,你现在可以运行git checkout 3e来切换到这个版本的应用程序。

Flask-Moment通过moment.js实现了format()fromNow()fromTime()calendar()valueOf()unix()方法。查阅文档,了解提供的所有格式化选项。

  

注:Flask-Moment假定时间戳由服务端应用程序中表示成UTC格式的“naive”datetime对象来处理。参阅标准库datetime包文档关于datetime对象的navieaware信息。

Flask-Moment渲染的时间戳可以本地化成多种语言。在模板中通过传递语言代码到lang()函数来选择语言:

{{ moment.lang("es") }}

学完本章中讨论的所有技术,您应该能够为您的应用程序构建现代、用户友好的网页。下一章涉及模板没有讨论的一个方面:如何通过web表单与用户进行交互。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/37461.html

相关文章

  • Flask Web Development —— Web表单(上)

    摘要:每个表单域都可以连接到一个或多个是一个用于检查用户提交的输入是否合法的函数。表单域构造函数的第一个参数是一个,在渲染表单到时会使用。验证确保提交的表单域不为空。表单域验证都是直接从包中导入。表格展示了一组支持的标准表单域。 第二章中介绍的request对象公开了所有客户端发送的请求信息。特别是request.form可以访问POST请求提交的表单数据。 尽管Flask的request...

    CODING 评论0 收藏0
  • Flask Web Development —— 模板(上)

    摘要:用真实的值替换变量并返回最终响应字符串,这个过程称为渲染。示例展示模板实现该响应。控制结构提供一些控制结构用于改变模板流。这个示例展示如何使用循环做到这些同样支持宏,这和代码中的函数很像。 写代码最关键的是要易于维护且结构清晰整洁。目前为止,你看到的例子都过于简单从而没有做这方面的要求。Flask视图函数希望将两个应该完全独立的任务一并处理,两个任务有两种代码,一并处理势必会引发问题。...

    fizz 评论0 收藏0
  • Flask Web Development —— 模板(中)

    摘要:示例使用的模板的指令通过从引用来实现模板的继承。上面的模板定义了三个,分别命名为和。同时返回相应错误的数字状态码。示例带有导航栏的基础应用程序模板这个模板中的块中只是一个名为的元素,它包含了在派生模板中定义的名为的空。 2、集成Twitter Bootstrap的Flask-Bootstrap Bootstrap是Twitter的一个开源框架,提供用户交互组件来创建一个清新且有吸引力...

    eternalshallow 评论0 收藏0
  • Flask Web Development —— Email

    摘要:函数携带目的地址主题邮件体模板和一组关键字参数。许多扩展操作是在假设有活动的应用程序和请求上下文的情况下进行的。但是当函数在一个不同的线程上执行,应用程序上下文需要人为地创建使用。例如,执行函数可以将邮件发送到的任务队列中。 许多类型的应用程序都会在某些事件发生的时候通知用户,常用的沟通方法就是电子邮件。尽管在Flask应用程序中,可以使用Python标准库中的smtplib包来发送电...

    SKYZACK 评论0 收藏0
  • Flask Web Development —— Web表单(

    摘要:局部变量用于保存从表单中接收到的名字,初始化时变量为。在语句中,这个名字被赋值给局部变量且表单域的数据属性通过赋值为空字符串而被清除。示例重定向和用户会话在上一个版本中,局部变量用于保存用户在表单中输入的姓名。 4、视图函数中的表单操作 在新版本的hello.py中,index()视图函数渲染表单并接收其数据。示例4-4展示更新后的index()视图函数。 示例4-4. hello...

    yeooo 评论0 收藏0

发表评论

0条评论

raoyi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<