书本实例列表页面

接下来，我们将实作图书馆中所有书本实例 (BookInstance) 的列表页面。这个页面需要包含与每个 BookInstance (链接到其详细信息页面) 关联的书本 Book 标题，以及BookInstance模型中的其他信息，包含每个副本的状态，印记和唯一 ID。唯一 ID 的文字，应该链接到 BookInstance 详细信息页面。

控制器

BookInstance列表控制器函数，需要获取所有书本实例的列表，填充关联的书本信息，然后将列表传递给模板以进行呈现。

打开 /controllers/bookinstanceController.js。找到导出的 bookinstance_list() 控制器方法，并用以下代码替换它（更改后的代码以粗体显示）。

js
// Display list of all BookInstances.
exports.bookinstance_list = function (req, res, next) {
  BookInstance.find()
    .populate("book")
    .exec(function (err, list_bookinstances) {
      if (err) {
        return next(err);
      }
      // Successful, so render
      res.render("bookinstance_list", {
        title: "Book Instance List",
        bookinstance_list: list_bookinstances,
      });
    });
};

此方法使用模型的find()函数，返回所有BookInstance对象。然后它将一个调用，以菊花链方式连接到populate()，附加书本book字段，这将使用完整的Book文档，替换每个BookInstance存储的书本 ID。

成功时，传递给查询的回调，会呈现 bookinstance_list (.pug) 模板，并将标题title和书籍实例列表bookinstance_list作为变量传递。

视图

创建 /views/bookinstance_list.pug，并复制粘贴下面的文本。

pug
extends layout

block content
  h1= title

  ul
  each val in bookinstance_list
    li
      a(href=val.url) #{val.book.title} : #{val.imprint} -
      if val.status=='Available'
        span.text-success #{val.status}
      else if val.status=='Maintenance'
        span.text-danger #{val.status}
      else
        span.text-warning #{val.status}
      if val.status!='Available'
        span  (Due: #{val.due_back} )

  else
    li There are no book copies in this library.

这个视图与其他视图非常相似。它扩展了布局，替换内容区块，显示从控制器传入的标题 title，并遍历 bookinstance_list 中的所有书籍副本。对于每个副本，我们都会显示它的状态（用颜色编码），如果书本不可用，则显示其预期返回日期。这里引入了一个新功能——我们可以在标签之后使用点符号表示法，来指定一个类别。因此，span.text-success 将被编译为 <span class="text-success">（也可以用 Pug 编写为 span(class="text-success")）。

它看起来像是？

运行本应用，打开浏览器访问 http://localhost:3000/，然后选择 All book-instances 链接。假如每个东西都设置正确了，你的网站看起来应该像是底下的截图。

BookInstance List Page - Express Local Library site

下一步