書籍詳情頁

圖書詳情頁需要顯示特定Book的資訊（使用其自動生成的_id欄位值識別），以及庫中每個關聯副本（BookInstance）的資訊。無論在何處顯示作者、型別或圖書例項，這些都應該連結到該專案的關聯詳情頁。

控制器

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

js
// Display detail page for a specific book.
exports.book_detail = asyncHandler(async (req, res, next) => {
  // Get details of books, book instances for specific book
  const [book, bookInstances] = await Promise.all([
    Book.findById(req.params.id).populate("author").populate("genre").exec(),
    BookInstance.find({ book: req.params.id }).exec(),
  ]);

  if (book === null) {
    // No results.
    const err = new Error("Book not found");
    err.status = 404;
    return next(err);
  }

  res.render("book_detail", {
    title: book.title,
    book: book,
    book_instances: bookInstances,
  });
});

**注意：** 此步驟中不需要匯入任何其他模組，因為我們在實現主頁控制器時已經匯入了依賴項。

這種方法與型別詳情頁中描述的完全相同。路由控制器函式使用Promise.all()並行查詢指定的Book及其關聯副本（BookInstance）。如果找不到匹配的圖書，則返回一個帶有“404：未找到”錯誤的 Error 物件。如果找到圖書，則使用“book_detail”模板渲染檢索到的資料庫資訊。由於鍵 'title' 用於為網頁命名（如 'layout.pug' 中的標題中定義的那樣），因此這次我們在渲染網頁時傳遞results.book.title。

檢視

建立 ** /views/book_detail.pug ** 並新增以下文字。

pug
extends layout

block content
  h1 Title: #{book.title}

  p #[strong Author: ]
    a(href=book.author.url) #{book.author.name}
  p #[strong Summary:] #{book.summary}
  p #[strong ISBN:] #{book.isbn}
  p #[strong Genre: ]
    each val, index in book.genre
      a(href=val.url) #{val.name}
      if index < book.genre.length - 1
        |,&nbsp;

  div(style='margin-left:20px;margin-top:20px')
    h2(style='font-size: 1.5rem;') Copies

    each val in book_instances
      hr
      if val.status=='Available'
        p.text-success #{val.status}
      else if val.status=='Maintenance'
        p.text-danger #{val.status}
      else
        p.text-warning #{val.status}
      p #[strong Imprint:] #{val.imprint}
      if val.status!='Available'
        p #[strong Due back:] #{val.due_back}
      p #[strong Id: ]
        a(href=val.url) #{val._id}

    else
      p There are no copies of this book in the library.

此模板中幾乎所有內容都在之前的部分中演示過。

**注意：** 與圖書相關的型別列表在模板中實現如下。這在與圖書相關的每個型別之後添加了一個逗號和一個不間斷空格，除了最後一個型別。

pug
  p #[strong Genre: ]
    each val, index in book.genre
      a(href=val.url) #{val.name}
      if index < book.genre.length - 1
        |,&nbsp;

它長什麼樣？

執行應用程式並在瀏覽器中開啟https://:3000/。選擇所有圖書連結，然後選擇其中一本書。如果一切設定正確，您的頁面應該看起來像下面的螢幕截圖。

Book Detail Page - Express Local Library site

下一步