Flask 教程 第二十章:加点JavaScript魔法

本文翻译自The Flask Mega-Tutorial Part XX: Some JavaScript Magic

这是Flask Mega-Tutorial系列的第二十部分,我将添加一个功能,当你将鼠标悬停在用户的昵称上时,会弹出一个漂亮的窗口。

现在,构建一个Web应用而不使用JavaScript是不可能的。 你一定知道,JavaScript是Web浏览器中可本地运行的唯一语言。 在第十四章中,你看到我在Flask模板中添加了一个简单的JavaScript的启用链接,以提供实时的用户动态的语言翻译。 而在本章中,我将深入探讨该主题,并向你展示另一个有用的JavaScript技巧,给应用程序增添趣味来吸引用户。

社交网站的常见用户交互模式是,当你将鼠标悬停在用户的名称上时,可以在弹出窗口中显示用户的主要信息。 如果你从未注意到这一点,请访问Twitter,Facebook,LinkedIn或任何其他主要社交网站,当你看到用户名时,只需将鼠标指针放在上面几秒钟即可看到弹出窗口。 本章将致力于为Microblog实现该功能,你可以在下面看到预览效果:

Flask 教程 第二十章:加点JavaScript魔法_第1张图片

本章的GitHub链接为:Browse, Zip, Diff.

服务端的支持

在深入研究客户端之前,让我们先了解一下支持这些用户弹窗所需的服务器端的工作。 用户弹窗的内容将由新路由返回,它是现有个人主页路由的简化版本。 视图函数如下:

app/main/routes.py:用户弹窗视图函数。

1 @bp.route('/user//popup')
2 @login_required
3 def user_popup(username):
4     user = User.query.filter_by(username=username).first_or_404()
5     return render_template('user_popup.html', user=user)

该路由将被附加到/user//popup URL,并且将简单地加载所请求的用户,然后渲染到模板中。 该模板是个人主页的简化版本:

app/templates/user_popup.html:用户弹窗模板。

 1 class="table">
 2 3 43132
"64" style="border: 0px;">"{{ user.avatar(64) }}"> "border: 0px;"> 5

6 "{{ url_for('main.user', username=user.username) }}"> 7 {{ user.username }} 8 9

10 11 {% if user.about_me %}

{{ user.about_me }}

{% endif %} 12 {% if user.last_seen %} 13

{{ _('Last seen on') }}: 14 {{ moment(user.last_seen).format('lll') }}

15 {% endif %} 16

{{ _('%(count)d followers', count=user.followers.count()) }}, 17 {{ _('%(count)d following', count=user.followed.count()) }}

18 {% if user != current_user %} 19 {% if not current_user.is_following(user) %} 20 "{{ url_for('main.follow', username=user.username) }}"> 21 {{ _('Follow') }} 22 23 {% else %} 24 "{{ url_for('main.unfollow', username=user.username) }}"> 25 {{ _('Unfollow') }} 26 27 {% endif %} 28 {% endif %} 29
30

当用户将鼠标指针悬停在用户名上时,随后小节中编写的JavaScript代码将会调用此路由。客户端将服务器端返回的响应中的html内容显示在弹出窗口中。 当用户移开鼠标时,弹出窗口将被删除。 听起来很简单,对吧?

如果你想了解弹窗像什么样,现在可以运行应用,跳转到任何用户的个人主页,然后在地址栏的URL中追加/popup以查看全屏版本的弹出窗口内容。

Bootstrap Popover组件简介

在第十一章中,我向你介绍了可便捷地创建精美网页的Bootstrap框架。 到目前为止,我只使用了这个框架的一小部分。 Bootstrap捆绑了许多常见的UI元素,所有这些元素都在地址为https://getbootstrap.com的Bootstrap文档中有demo和示例。 其中一个组件是Popover(弹窗),在文档中将其描述为“用于容纳辅助信息的小的覆盖窗口”。 这正是我需要的! 
  
大多数bootstrap组件都是通过HTML标记定义的,该标记引用Bootstrap CSS的定义内容来添加漂亮的样式。 一些高级的组件还需要JavaScript。 应用程序在网页中包含这些组件的标准方式是在适当的位置添加HTML,然后为需要脚本支持的组件调用JavaScript函数,以便初始化或激活它。 popover组件确实需要JavaScript的支持。

要做弹窗的HTML部分非常简单,你只需要定义将触发弹窗的元素。 就我而言,就是处理每条用户动态中出现的可点击的用户名。 
app/templates/_post.html子模板具有已定义的用户名:

现在根据popover文档,我需要调用每个链接上的popover() JavaScript函数,就像上面出现在页面上的链接一样,这才能初始化弹出窗口。 初始化调用接受许多配置弹出窗口的选项,包括传递想要在弹出窗口中显示的内容,以及使用什么方法触发弹出窗口出现或消失(单击,悬停在元素上等),如果内容是纯文本或HTML,那么在文档中可以找到更多的选项。不幸的是,在阅读完这些信息之后,我的疑惑更多了,因为这个组件看起来并没有按照我需要的方式工作。 以下是我实现此功能需要解决的问题列表:

  • 在页面中会有很多用户名链接,每条用户动态都会显示一个。我需要有一种方法可以在页面渲染后用JavaScript中找到所有这些链接,以便我可以将它们初始化为弹出窗口。
  • Bootstrap文档中的popover示例都将目标HTML元素的data-content属性设置为popover的内容,因此当触发悬停事件时,Bootstrap需要做的只是显示弹出窗口。这对我来说要做的就不止这些了,因为我想对服务器进行Ajax调用以获取内容,并且只有当收到服务器的响应时,我才希望弹出窗口出现。
  • 使用“悬停”模式时,只要你将鼠标指针放在目标元素中,弹出窗口就会保持可见状态。当你移开鼠标时,弹出窗口将消失。这具有糟糕的副作用,即如果用户想要将鼠标指针移动到弹出窗口中,弹出窗口将消失。我需要找出一种方法来将悬停行为扩展为包含弹出窗口,以便用户可以移动到弹出窗口中,例如,单击那里的链接。

在开发基于浏览器的应用程序时,事情变得越来越复杂的情况,实际上并不罕见。 你必须非常仔细地考虑DOM元素如何相互作用,并使其行为方式提供良好的用户体验。

在页面加载完成后执行函数

很明显,我将需要在每个页面加载后立即运行一些JavaScript代码。 我要运行的函数将搜索页面中用户名的所有链接,并使用Bootstrap中的弹出窗口组件配置它们。

jQuery JavaScript库作为Bootstrap的依赖项加载,因此我将利用它。 当使用jQuery时,你可以用$(...)封装来注册一个函数,函数将会在页面加载完毕后运行。 我可以将它添加到app/templates/base.html模板中,以便它可以在应用程序的每个页面上运行:

app/templates/base.html:页面加载完毕后运行函数。

1 ...
2 

正如你所看到的,我已经在

你可能感兴趣的:(Flask 教程 第二十章:加点JavaScript魔法)