如何使用Rails的Flash消息

DebugUsery
196 阅读4分钟

什么是Flash消息？

闪光信息是在应用程序的界面上弹出的通知和警报，以便与用户交流和方便互动。应用程序经常应用闪光信息来告诉用户登录是否正确或确认点击按钮所触发的行动是否成功。例如。

  • "您已登录"
  • "您的个人资料已被更新"

题外话：在BootrAils，我们使用Flash消息和Bootstrap的Toasts组件。关于这一点的更多信息见文章末尾。

为什么要在你的应用程序中使用flash消息？

Flash消息是一种良好的UI/UX实践，目前被大多数应用程序所采用，因为它是引导用户浏览界面的好方法，并在用户触发动作时减少不确定性。

Flash信息鼓励用户自主，并帮助他们识别错误。

例如，如果用户输入了错误的密码或使用了某个字段不支持的格式，应用程序就能发出错误警报并指出正确的操作方法。

  • "您的密码是错误的，请再试一次"
  • "请至少输入50个字符来发表您的评论"

在给用户提供支持时，使用闪光信息也是一种财富，因为支持人员很容易询问用户他们在界面的什么地方，以及他们收到了什么信息。

在界面中应用通知的优势很明显，并以不同的方式增加价值。此外，从开发的角度来看，闪光信息非常容易集成和维护。然而，当在一个应用程序中实现通知策略时，我们需要注意不要产生太多的消息。那会增加代码的复杂性，并造成用户的垃圾信息的感觉。

闪存信息的类型

在所有flash消息都是通知的基础上，我们可以把不同类型的flash消息理解为一条消息的不同意图。默认情况下，Ruby on Rails提供了两种类型的flash消息，[:notice] 和[:alert] 。因此，我们可以使用通知消息来向用户发送小的信息和确认，使用警报消息来提出错误。

如果你需要添加更多类型的消息意图，以使你的代码更加清晰，并添加样式选项，这在Rails中也是可以实现的。你只需要按照下面的方法将它们添加到应用控制器中，flash方法就会将它们整合起来。

class ApplicationController < ActionController::Base
  add_flash_types :info, :error, :success
end

如何用Ruby on Rails实现flash消息

将flash消息与Ruby on Rails集成是非常容易的，因为你只需要使用flash辅助方法。

Flash消息被包含在一个应用程序的不同控制器的方法中。你只需要调用flash，并在后面加上消息的类型和作为字符串的内容。例如，如果你想确认个人资料的信息已被更新，你只需在用户控制器的特定方法中按以下步骤操作。

class UserController < ApplicationController
  def update
    /* some code before */
    if @user.update
      flash[:notice] = "Your profile has been updated."
    end
    /* some other code after */
  end
end

闪存信息的渲染和样式设计

按照Rails应用程序的MVC模式逻辑，控制器负责界面的逻辑。因此，在向控制器添加flash消息后，我们需要在应用程序的不同视图中显示它们。

我们可以到应用程序的每个视图中，渲染不同类型的消息。由于消息的显示发生在用户被重定向到一个页面或页面重新加载之后，下面的代码通常被添加在视图的顶部。

<% flash.each do |type, msg| %>
  <div>
    <%= msg %>
  </div>
<% end %>

这种做法是可以接受的，但是，对于大尺寸的应用程序来说，它是不可扩展的，而且会使你的代码变得不干燥。渲染flash消息的最有效的方法是创建一个共享文件，并在应用程序视图文件的主体中渲染它application.html.erb 。

<%= render 'shared/flashes' %\>

同时，我们必须按照惯例语法在视图的共享文件夹中创建一个共享文件flashes.html.erb 。

这个文件的目标是循环浏览所有关注其性质的Flash消息（警报、通知、信息、成功等）。

在这一点上，我们也能够在应用程序中对通知进行样式设计。通知信息与错误信息有不同的风格，这是有道理的，对吗？[:notice] 和[:info] 信息的风格通常比较平滑，与应用程序的视图相融合，因为我们不想给用户带来压力。

而[:alert] 和[:error] 信息则更加醒目，倾向于使用红色或黄色的亮色。

你可以添加不同的类，并在相关的.scss 文件中进行处理，以使你的应用程序中的消息风格化，或者你可以使用Bootstrap等提供通知组件的库来使你的Flash消息风格化。Bootstrap警报组件根据消息的意图提供了不同的样式（主要、次要、成功、危险、警告、信息、浅色和深色）。它还有一个选项，可以轻松地添加一个解散按钮（强烈建议用来改善界面的UI/UX），在你的字符串内容中添加链接以重新引导用户，以及添加内容分割器以包含额外的信息部分。

下面，作为总结，你会发现一个共享Flash文件的例子，该文件循环显示不同的Flash信息，并使用bootstrap来设计通知和警报通知。

<% if notice %>
  <div class="alert alert-info alert-dismissible fade show m-1" role="alert">
    <%= notice %>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
<% end %>

<% if alert %>
  <div class="alert alert-warning alert-dismissible fade show m-1" role="alert">
    <%= alert %>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
<% end %>

我们如何用BootrAils使用flash消息

以下是flash消息的呈现方式。

flash message

闪存信息

你可以在上面看到用户已经成功注销了。

题外话如果你想要更多的截图，你可以在主页上查看这些截图。

我们使用了一个固定位置的祝酒词：无论用户在Y位置上处于什么位置，用户都会看到这个信息。你可以用叉子把它关掉，反正几秒钟后这个信息就会消失。

总结

通知实际上是互联网上一个非常常见的功能：向用户提供一些关于刚刚发生的事情的线索。在Rails中，实现这种功能的一种常见的、内置的方式是Flash消息。

avatar
文章
阅读
粉丝