書本實例詳情頁面與自我挑戰

書本實例詳情頁面

BookInstance 詳情頁面,需要呈現每一個 BookInstance 的信息,用 _id 欄位字段值(自動產生)做識別。它包含了 Book 名稱 (也是一個連結,連到 書本細節頁面),接著是紀錄中的其它的信息。

Controller 控制器

打開 /controllers/bookinstanceController.js. 找到 exported bookinstance_detail() 控制器方法,並用底下代碼置換。

js
// Display detail page for a specific BookInstance.
exports.bookinstance_detail = function (req, res, next) {
  BookInstance.findById(req.params.id)
    .populate("book")
    .exec(function (err, bookinstance) {
      if (err) {
        return next(err);
      }
      if (bookinstance == null) {
        // No results.
        var err = new Error("Book copy not found");
        err.status = 404;
        return next(err);
      }
      // Successful, so render.
      res.render("bookinstance_detail", {
        title: "Book:",
        bookinstance: bookinstance,
      });
    });
};

該方法使用從 URL(使用路由)中提取的特定書本實例的 ID,調用BookInstance.findById(),並通過請求參數(req.params.id),在控制器中訪問。然後調用populate()來獲取相關 Book 的詳細信息。

View 視圖

創建 /views/bookinstance_detail.pug ,並複製下面的內容。

js
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}

本模組中的所有東西,都在先前的章節演示過了。

它看起來像是?

運行本應用,並打開瀏覽器訪問 http://localhost:3000//。選擇 All book-instances 連結,然後選擇其中一本。如果每個東西都設定正確了,你的網站看起來應該像是底下的截圖。

BookInstance Detail Page - Express Local Library site

自我挑戰

目前,我們網站上顯示的大多數日期,都使用默認的 JavaScript 格式(例如 Tue Dec 06 2016 15:49:58 GMT+1100 (AUS 東部夏令時間))。本文的挑戰,是改善作者Author生命週期日期顯示的外觀信息(死亡/誔生日期)和BookInstance 詳細信息頁面,使用格式:December 6th, 2016。

备注: 你可以使用與我們用於 Book Instance List 的相同方法(將生命週期的虛擬屬性,添加到Author模型,並使用 moment 來設置日期字符串的格式)。

這個挑戰的要求:

  1. 用 BookInstance 詳細信息頁面中的 due_back_formatted 替換 due_back
  2. 更新作者模塊以添加壽命虛擬屬性。壽命應該有兩個值: date_of_birth - date_of_death,這兩個值的格式與 BookInstance.due_back_formatted的日期格式相同。
  3. 在當前使用 date_of_birthdate_of_death的所有視圖中,使用 Author.lifespan

下一步