圖書例項詳情頁面和挑戰

圖書例項詳情頁面

BookInstance 詳情頁面需要顯示每個BookInstance的資訊,使用其(自動生成的)_id 欄位值進行識別。這將包括Book名稱(作為指向圖書詳情頁面的連結)以及記錄中的其他資訊。

控制器

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

js
// Display detail page for a specific BookInstance.
exports.bookinstance_detail = asyncHandler(async (req, res, next) => {
  const bookInstance = await BookInstance.findById(req.params.id)
    .populate("book")
    .exec();

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

  res.render("bookinstance_detail", {
    title: "Book:",
    bookinstance: bookInstance,
  });
});

實現方式與其他模型詳情頁面的實現方式非常相似。路由控制器函式使用從 URL 中提取的特定圖書例項的 ID(使用路由)呼叫BookInstance.findById(),並透過請求引數在控制器中訪問:req.params.id。然後它呼叫populate()來獲取關聯Book的詳細資訊。如果找不到匹配的BookInstance,則會將錯誤傳送到 Express 中介軟體。否則,將使用**bookinstance_detail.pug**檢視呈現返回的資料。

檢視

建立/views/bookinstance_detail.pug並將下面的內容複製到其中。

pug
extends layout

block content

  h1 ID: #{bookinstance._id}

  p #[strong Title: ]
    a(href=bookinstance.book.url) #{bookinstance.book.title}
  p #[strong Imprint:] #{bookinstance.imprint}

  p #[strong Status: ]
    if bookinstance.status=='Available'
      span.text-success #{bookinstance.status}
    else if bookinstance.status=='Maintenance'
      span.text-danger #{bookinstance.status}
    else
      span.text-warning #{bookinstance.status}

  if bookinstance.status!='Available'
    p #[strong Due back:] #{bookinstance.due_back}

此模板中的所有內容都在前面的章節中演示過。

它是什麼樣子的?

執行應用程式並在瀏覽器中開啟https://:3000/。選擇“所有圖書例項”連結,然後選擇其中一項。如果所有設定都正確,您的網站應該看起來像以下螢幕截圖。

BookInstance Detail Page - Express Local Library site

挑戰

目前,網站上顯示的大多數日期都使用預設的 JavaScript 格式(例如,Tue Oct 06 2020 15:49:58 GMT+1100 (AUS Eastern Daylight Time))。本文的挑戰是改進Author生命週期資訊(死亡/出生日期)和BookInstance 詳情頁面的日期顯示外觀,使用格式:Oct 6th, 2016。

注意:您可以使用與Book Instance List中相同的方案(為Author模型新增生命週期的虛擬屬性,並使用luxon格式化日期字串)。

要完成此挑戰,您必須

  1. BookInstance 詳情頁面中將變數due_back替換為due_back_formatted
  2. 更新Author模型以新增生命週期的虛擬屬性。生命週期應如下所示:date_of_birth - date_of_death,其中兩個值的日期格式與BookInstance.due_back_formatted相同。
  3. 在所有當前顯式使用date_of_birthdate_of_death的檢視中使用Author.lifespan

後續步驟