Hiển thị danh sách bài viết trong ruby on rails

Lượt xem: 771

Hãy quay lại bộ điều khiển của chúng ta trong app/controllers/articles_controller.rb và thay đổi hành động index để tìm nạp tất cả các bài viết từ cơ sở dữ liệu:

class ArticlesController < ApplicationController
  def index
    @articles = Article.all
  end
end

Các biến của bộ điều khiển có thể được truy cập bởi view. Điều đó có nghĩa là chúng ta có thể sử dụng @articles trong app/views/articles/index.html.erb. Hãy mở tệp đó và thay thế nội dung của nó bằng:

<h1>Danh sách bài viết </h1>

<ul>
  <% @articles.each do |article| %>
    <li>
      <%= article.title %>
    </li>
 <% end %>
</ul>


Đoạn mã trên là sự kết hợp giữa HTML và ERB. ERB là một hệ thống tạo khuôn mẫu đánh giá mã Ruby được nhúng trong tài liệu. Ở đây, chúng ta có thể thấy hai loại thẻ ERB: <% %> và <%= %>. Thẻ <% %> có nghĩa là "đánh giá mã Ruby kèm theo." Thẻ <%= %> có nghĩa là "đánh giá mã Ruby kèm theo và xuất giá trị mà nó trả về." Bất cứ điều gì bạn có thể viết trong một chương trình Ruby thông thường đều có thể đi vào bên trong các thẻ ERB này, mặc dù tốt nhất là bạn nên giữ nội dung của các thẻ ERB ngắn gọn để dễ đọc.

Vì không muốn xuất giá trị được trả về bởi @articles.each, nên chúng ta phải đính kèm mã đó trong <% %>. Tuy nhiên, vì muốn xuất giá trị được trả về bởi article.title (cho mỗi bài viết), nên chúng ta phải đính kèm mã đó vào <%= %>.

We can see the final result by visiting http://localhost:3000. (Hãy nhớ rằng bin/rails server phải đang chạy!) Đây là những gì xảy ra khi chúng ta làm điều đó:

1. Trình duyệt đưa ra yêu cầu: GET http://localhost:3000.

2. Ứng dụng Rails của chúng ta nhận được yêu cầu này.

3. Bộ định tuyến (route) Rails ánh xạ tuyến gốc tới action index của ArticlesController.

4. Hành động (action)  index sử dụng Article model (mô hình Bài viết) để tìm nạp tất cả các bài viết trong cơ sở dữ liệu.

5. Rails tự động hiển thị chế độ xem app/views/articles/index.html.erb.

6. Mã ERB trong view được đánh giá để xuất HTML.

7. Máy chủ gửi phản hồi chứa HTML trở lại trình duyệt.

Video thao tác cùng dandev