作者列表页面和类型列表页面挑战

作者列表页面需要显示数据库中所有作者的列表,每个作者姓名链接到其关联的作者详细信息页面。出生日期和死亡日期应在同一行上列在姓名之后。

控制器

作者列表控制器函数需要获取所有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://127.0.0.1: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 部分的下一篇文章:流派详细信息页面