Cách sử dụng tin nhắn Flash trong Rails

Tin nhắn flash là gì?

Tin nhắn flash là một cách để giao tiếp thông tin với người dùng ứng dụng Rails của bạn để họ có thể biết điều gì xảy ra do hành động của họ.

Thông báo mẫu :

• “Mật khẩu đã được thay đổi chính xác” (xác nhận)
• “Không tìm thấy người dùng” (lỗi)

Bạn đặt các thông báo flash này trong bộ điều khiển của mình, sau đó hiển thị chúng trong dạng xem của bạn. Người dùng của bạn sau đó có thể hành động theo đó.

Hãy cùng tìm hiểu chính xác cách thức hoạt động của điều này!

Cách sử dụng tin nhắn Flash

Bạn có thể làm việc với các tin nhắn thông báo này bằng flash phương pháp trợ giúp.

Nó hoạt động giống như một hàm băm của Ruby.

Đối tượng flash có các phương thức như keys , any? hoặc each &bạn có thể truy cập một tin nhắn cụ thể bằng [] .

Bạn có thể đặt những loại tin nhắn flash nào?

Theo mặc định, bạn có :

• thông báo
• cảnh báo

Đây là ví dụ về cách sử dụng nó :

flash.alert = "User not found."

Hoặc nếu bạn thích :

flash[:alert] = "User not found."

(Chỉ khác biệt về kiểu dáng.)

Bạn có thể sử dụng mã này bên trong các hành động của bộ điều khiển, chẳng hạn như index , create , new , v.v.

Một cách khác là đây :

redirect_to :books_path, notice: "Book not found"

Điều này cho phép bạn chuyển hướng và tạo một tin nhắn nhanh trong một bước.

Tốt!

Cảnh báo so với Thông báo

Theo như tôi hiểu thì không thực sự quan trọng nếu bạn sử dụng alert hoặc notice .

Sử dụng phương pháp cảm thấy tự nhiên hơn cho tình huống của bạn.

Tôi thích nghĩ về alert dưới dạng thông báo lỗi và notice như một thông báo xác nhận.

Việc tách chúng ra giúp bạn tạo kiểu khác nhau.

Ví dụ :

Bạn có thể hiển thị cảnh báo màu đỏ và thông báo màu xanh lục.

Bạn cũng có thể tạo các loại flash của riêng mình bằng cách sử dụng add_flash_types phương pháp bộ điều khiển.

Như thế này :

class ApplicationController
  add_flash_types :info, :error, :warning
end

Tôi thích giữ mọi thứ đơn giản, vì vậy tôi gắn bó với các loại tích hợp sẵn 🙂

Kết xuất tin nhắn Flash

Tin nhắn flash không tự động được hiển thị.

Bạn phải hiển thị chúng bên trong một trong các chế độ xem của mình để người dùng có thể nhìn thấy chúng.

Xem xét thêm điều này vào bố cục ứng dụng của bạn.

Đây là một ví dụ về mã :

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

Đặt nó ở bất cứ nơi nào bạn muốn hiển thị thông báo của mình, thường là ở đầu trang, bên dưới thanh menu.

Hãy nhớ :

Sau khi bạn hiển thị một tin nhắn, nó sẽ bị xóa khỏi flash , vì vậy nó sẽ không được hiển thị lại.

Tạo kiểu cho Thông báo &Tin nhắn Cảnh báo của bạn

Tin nhắn flash không có bất kỳ kiểu dáng hoặc thiết kế tích hợp nào.

Giải pháp?

Nếu đang sử dụng Bootstrap, bạn có thể sử dụng "alert alert-info" Lớp CSS để làm cho tin nhắn flash trông đẹp mắt.

Ví dụ :

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

Có vẻ như thế này :

Nếu bạn KHÔNG sử dụng Bootstrap, thì bạn có thể viết CSS của riêng mình để làm cho nó trông theo cách bạn muốn.

Khi nào các tin nhắn Flash được hiển thị?

Thông báo flash chỉ bị xóa trong hành động tiếp theo của bộ điều khiển, sau khi bạn hiển thị chúng.

Hàm ý :

• Nếu bạn redirect_to , sau đó hiển thị flash tin nhắn, điều đó tốt
• Nếu bạn redirect_to &KHÔNG hiển thị thông báo, thông báo sẽ hiển thị xung quanh, trong flash băm
• Nếu bạn render trên cùng một hành động mà bạn đang đặt flash tin nhắn, flash đó tin nhắn sẽ khả dụng, nhưng KHÔNG bị xóa, vì vậy tin nhắn sẽ vẫn tồn tại và có khả năng được hiển thị hai lần

Vì vậy…

Điều gì xảy ra nếu bạn muốn đặt thông báo flash cho hành động hiện tại ?

Đó là nơi flash.now đi vào!

Đây là một ví dụ :

def index
  @books = Book.all

  flash.now[:notice] = "We have exactly #{@books.size} books available."
end

Điều này sẽ hiển thị index xem.

notice thông báo sẽ được hiển thị và xóa khỏi flash vì vậy nó sẽ không được hiển thị hai lần.

Nói cách khác :

Bạn chỉ cần sử dụng flash.now nếu bạn định render thay vì chuyển hướng.

Tóm tắt

Bạn đã học về tin nhắn flash trong Rails và cách sử dụng chúng đúng cách!

Btw, tin nhắn flash không giống như lỗi xác thực. Xác thực được liên kết với đối tượng mô hình và bạn truy cập các thông báo xác thực này với errors , như @user.errors .

Bây giờ đến lượt bạn áp dụng điều này vào thực tế bằng cách viết một số mã.

Cảm ơn vì đã đọc!