共计 1813 个字符,预计需要花费 5 分钟才能阅读完成。
(本文翻译自:https://www.rubyguides.com/2019/11/rails-flash-messages/)
什么是即时信息?
即时信息是即时信息是一种将信息显示给你的 Rails 网站用户的一种方式,用于告诉他们发生了什么事。
示例:
- 密码被修改(确认提示)
- 用户没有找到(错误信息)
即时信息往往在 Controller 中设置即时信息,然后再视图中渲染出来。你的用户得到所需要的信息。
让我们来学习它如何工作。
如何使用即时信息
你可以通过使用 flash
助手函数,来发起提示信息。
他们用起来很像 Ruby hash。
即时信息对象具有像 keys
,any?
,或者 each
这种方法,要访问即时信息,则是使用 []
。
那么,你可以设置哪些类型的的消息呢?
默认情况下,你可以设置:
- notice
- alert
这是一个使用例子:
flash.alert = "User not found."
另一种风格:
flash[:alert] = "User not found."
(两者只是风格不同)
你可以使用这些代码,在你的 Controller Actions 中,比如 index
,create
,new
之类的。
另一种使用方式:
redirect_to :books_path, notice: "Book not found"
这允许你在一步中,重定向页面和创建即时消息。
这很棒呦!
Alert 对比 Notice
据我了解,alert
或者 notice
具体使用哪个,不是很重要。哪个用着合适,就用哪个。
我习惯使用 alert
显示错误信息,使用 notice
显示一些提示信息。
两者主要还是风格的区别。
举个例子
你可以将 alert
显示为红色,将 notice
显示为绿色。
你也可以根据需要,在控制器中,使用 add_flash_types
,来创建你自己的消息类型。
像这样:
class ApplicationController
add_flash_types :info, :error, :warning
end
我喜欢保持简单,所以内置的消息类型已经足够我用啦。
渲染即时信息
即时信息不会自动显示,你必须在你的视图上渲染他们,然后才能看到。您可以考虑将他们添加到布局视图上。
这是代码:
<% flash.each do |type, msg| %>
<div>
<%= msg %>
</div>
<% end %>
这这句代码放在你想显示它们的地方,通常是放在页面顶端,菜单栏下面。
记住:
即时消息只会显示一次,然后就会被移除,不会再显示。
美化你的即时消息
即时消息默认没有内置样式。
如果你使用 Bootstrap,你可以将 alert alert-info
CSS 类添加到即时消息上,它们会看起来好看很多。
例子:
<% flash.each do |type, msg| %>
<div class="alert alert-info">
<%= msg %>
</div>
<% end %>
如果你没有使用 Bootstrap,你可以根据你的需求,自定义通知的样式。
何时需要显示即时消息?
即时消息被显示出来后,将在控制器下一次动作时被移除。
根据这个特性,做一个总结:
- 如果你调用
redirect_to
,并显示出flash
hash 中的即时消息,那么一切正常 - 如果你调用
redirect_to
,但并没有显示出即时消息,那么消息仍然保存在flash
hash 中 - 如果你在设置消息到
flash
hash 同一个 action 中显示即时消息,那么flash
消息会被显示出来,但是flash
中的消息不会被删除,所以它会被显示两次。
所以……
该如何在当前的 action
中显示即时消息呢?
flash.now
闪亮登场。
这是一个例子:
def index
@books = Book.all
flash.now[:notice] = "We have exactly #{@books.size} books available."
end
这将在 index 视图渲染出即时消息。
notice
中的内容将被显示,随即就被删除掉,使用这种方式,消息不会被显示两次。
所以,当你想要使用 render
而不是重定向页面的时候,你需要使用 flash.now
来进行消息显示。
总结
在本文中,你学习到了关于 Rails 中,有关即时消息的知识,以及如何正确使用它。
最后,需要注意的是,即时消息与错误验证之间的区别。错误验证是与模型对象有关的,你需要使用模型的 errors 方法,来访问有关验证错误的信息,比如 @user.errors
。
现在是时候去写一些代码,来实践在本文中学到的知识啦。
感谢阅读。