圖書例項列表頁面

接下來，我們將實現圖書副本列表（BookInstance）在圖書館中的展示。此頁面需要包含與每個BookInstance關聯的Book的標題（連結到其詳細資訊頁面），以及BookInstance模型中的其他資訊，包括每份副本的狀態、印記和唯一 ID。唯一 ID 文字應連結到BookInstance的詳細資訊頁面。

控制器

BookInstance列表控制器函式需要獲取所有圖書例項的列表，填充關聯的圖書資訊，然後將列表傳遞給模板進行渲染。

開啟/controllers/bookinstanceController.js。找到匯出的bookinstance_list()控制器方法，並將其替換為以下程式碼。

js
// Display list of all BookInstances.
exports.bookinstance_list = asyncHandler(async (req, res, next) => {
  const allBookInstances = await BookInstance.find().populate("book").exec();

  res.render("bookinstance_list", {
    title: "Book Instance List",
    bookinstance_list: allBookInstances,
  });
});

路由處理程式在BookInstance模型上呼叫find()函式，然後使用book欄位依次呼叫populate() - 這將用完整的Book文件替換每個BookInstance儲存的圖書 ID。然後，在末尾依次呼叫exec()以執行查詢並返回一個 Promise。

路由處理程式使用await等待 Promise，暫停執行直到其完成。如果 Promise 成功，查詢結果將儲存到allBookInstances變數中，並且路由處理程式繼續執行。

程式碼的最後一部分呼叫render()，指定bookinstance_list（.pug）模板並將title和bookinstance_list的值傳遞到模板中。

檢視

建立/views/bookinstance_list.pug並將下面的文字複製到其中。

pug
extends layout

block content
  h1= title

  if bookinstance_list.length
    ul
      each val in bookinstance_list
        li
          a(href=val.url) #{val.book.title} : #{val.imprint} - 
          if val.status=='Available'
            span.text-success #{val.status}
          else if val.status=='Maintenance'
            span.text-danger #{val.status}
          else
            span.text-warning #{val.status}
          if val.status!='Available'
            span  (Due: #{val.due_back} )

  else
    p There are no book copies in this library.

此檢視與所有其他檢視非常相似。它擴充套件了佈局，替換了content塊，顯示從控制器傳遞的title，並遍歷bookinstance_list中的所有圖書副本。對於每個副本，我們顯示其狀態（顏色編碼），如果圖書不可用，則顯示其預計歸還日期。引入了一項新功能 - 我們可以在標籤後使用點表示法來分配類。因此，span.text-success將編譯為<span class="text-success">（也可以在 Pug 中寫成span(class="text-success")）。

它是什麼樣子的？

執行應用程式，在瀏覽器中開啟https://:3000/，然後選擇所有圖書例項連結。如果一切設定正確，您的網站應該如下面的螢幕截圖所示。

BookInstance List Page - Express Local Library site

後續步驟