圖書例項詳情頁面和挑戰
圖書例項詳情頁面
BookInstance 詳情頁面需要顯示每個BookInstance的資訊,使用其(自動生成的)_id 欄位值進行識別。這將包括Book名稱(作為指向圖書詳情頁面的連結)以及記錄中的其他資訊。
控制器
開啟/controllers/bookinstanceController.js。找到匯出的bookinstance_detail()控制器方法,並將其替換為以下程式碼。
// 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並將下面的內容複製到其中。
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/。選擇“所有圖書例項”連結,然後選擇其中一項。如果所有設定都正確,您的網站應該看起來像以下螢幕截圖。
挑戰
目前,網站上顯示的大多數日期都使用預設的 JavaScript 格式(例如,Tue Oct 06 2020 15:49:58 GMT+1100 (AUS Eastern Daylight Time))。本文的挑戰是改進Author生命週期資訊(死亡/出生日期)和BookInstance 詳情頁面的日期顯示外觀,使用格式:Oct 6th, 2016。
注意:您可以使用與Book Instance List中相同的方案(為Author模型新增生命週期的虛擬屬性,並使用luxon格式化日期字串)。
要完成此挑戰,您必須
- 在BookInstance 詳情頁面中將變數
due_back替換為due_back_formatted。 - 更新
Author模型以新增生命週期的虛擬屬性。生命週期應如下所示:date_of_birth - date_of_death,其中兩個值的日期格式與BookInstance.due_back_formatted相同。 - 在所有當前顯式使用
date_of_birth和date_of_death的檢視中使用Author.lifespan。