作者列表頁面和型別列表頁面挑戰

作者列表頁面需要顯示資料庫中所有作者的列表,每個作者姓名連結到其關聯的作者詳細資訊頁面。出生日期和死亡日期應在同一行上列在姓名之後。

控制器

作者列表控制器函式需要獲取所有Author例項的列表,然後將它們傳遞給模板進行渲染。

開啟/controllers/authorController.js。找到檔案頂部附近匯出的author_list()控制器方法,並將其替換為以下程式碼。

js
// Display list of all Authors.
exports.author_list = asyncHandler(async (req, res, next) => {
  const allAuthors = await Author.find().sort({ family_name: 1 }).exec();
  res.render("author_list", {
    title: "Author List",
    author_list: allAuthors,
  });
});

路由控制器函式遵循與其他列表頁面相同的模式。它在Author模型上定義一個查詢,使用find()函式獲取所有作者,並使用sort()方法按字母順序對他們進行排序,family_nameexec()在末尾進行菊花鏈式連線,以便執行查詢並返回函式可以await的承諾。

承諾履行後,路由處理程式將渲染author_list(.pug)模板,使用模板鍵傳遞頁面title和作者列表(allAuthors)。

檢視

建立/views/author_list.pug並將它的內容替換為下面的文字。

pug
extends layout

block content
  h1= title

  if author_list.length
    ul
      each author in author_list
        li
          a(href=author.url) #{author.name}
          |  (#{author.date_of_birth} - #{author.date_of_death})
  else
    p There are no authors.

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

Author List Page - Express Local Library site

注意:作者生命週期日期的外觀很醜!您可以使用與用於BookInstance列表(將生命週期的虛擬屬性新增到Author模型)相同的方法來改進它。

但是,由於作者可能沒有去世或可能缺少出生/死亡資料,在這種情況下,我們需要忽略缺少的日期或對不存在的屬性的引用。一種解決方法是根據屬性是否已定義,返回格式化的日期或空字串。例如

return this.date_of_birth ? DateTime.fromJSDate(this.date_of_birth).toLocaleString(DateTime.DATE_MED) : '';

型別列表頁面 - 挑戰!

在本節中,您應該實現自己的流派列表頁面。該頁面應顯示資料庫中所有流派列表,每個流派連結到其關聯的詳細資訊頁面。下面顯示了預期結果的螢幕截圖。

Genre List - Express Local Library site

流派列表控制器函式需要獲取所有Genre例項的列表,然後將它們傳遞給模板進行渲染。

  1. 您需要編輯/controllers/genreController.js中的genre_list()
  2. 實現幾乎與author_list()控制器完全相同。
    • 按名稱升序排列結果。
  3. 要渲染的模板應該命名為genre_list.pug
  4. 要渲染的模板應傳遞變數title('Genre List') 和genre_list(從您的Genre.find()回撥返回的流派列表)。
  5. 檢視應與上面的螢幕截圖/要求匹配(這應該與作者列表檢視具有非常相似的結構/格式,但流派沒有日期)。

下一步

返回Express 教程第 5 部分:顯示庫資料

繼續第 5 部分的下一篇文章:流派詳細資訊頁面