Flask Web Development —— 模板(下)
admin
2023-07-31 01:49:59
0

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表单与用户进行交互。

相关内容

热门资讯

Mobi、epub格式电子书如... 在wps里全局设置里有一个文件关联,打开,勾选电子书文件选项就可以了。
定时清理删除C:\Progra... C:\Program Files (x86)下面很多scoped_dir开头的文件夹 写个批处理 定...
scoped_dir32_70... 一台虚拟机C盘总是莫名奇妙的空间用完,导致很多软件没法再运行。经过仔细检查发现是C:\Program...
500 行 Python 代码... 语法分析器描述了一个句子的语法结构,用来帮助其他的应用进行推理。自然语言引入了很多意外的歧义,以我们...
小程序支付时提示:appid和... [Q]小程序支付时提示:appid和mch_id不匹配 [A]小程序和微信支付没有进行关联,访问“小...
pycparser 是一个用... `pycparser` 是一个用 Python 编写的 C 语言解析器。它可以用来解析 C 代码并构...
微信小程序使用slider实现... 众所周知哈,微信小程序里面的音频播放是没有进度条的,但最近有个项目呢,客户要求音频要有进度条控制,所...
65536是2的几次方 计算2... 65536是2的16次方:65536=2⁶ 65536是256的2次方:65536=256 6553...
Apache Doris 2.... 亲爱的社区小伙伴们,我们很高兴地向大家宣布,Apache Doris 2.0.0 版本已于...
项目管理和工程管理的区别 项目管理 项目管理,顾名思义就是专注于开发和完成项目的管理,以实现目标并满足成功标准和项目要求。 工...