书本实例列表页面 - 学习 Web 开发 编辑

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

控制器

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

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

// 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 ，並複制貼上底下的文字。

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 连结。假如每个东西都设定正确了，你的网站看起来应该像是底下的截图。

下一步

• 回到 Express 教程 5: 呈现图书馆数据
• 继续教程 5 下个部分: 日期格式化与使用 moment