[zh-cn] fixed some flaws and added some new translation

files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.md

@@ -3,35 +3,31 @@ title: 书本实例列表页面
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page
 ---
 
-接下来，我们将实作图书馆中所有书本实例 (`BookInstance`) 的列表页面。这个页面需要包含与每个 `BookInstance` (链接到其详细信息页面) 关联的书本 `Book` 标题，以及`BookInstance`模型中的其他信息，包含每个副本的状态，印记和唯一 ID。唯一 ID 的文字，应该链接到 `BookInstance` 详细信息页面。
+接下来，我们将实现图书馆中所有书本实例 (`BookInstance`) 的列表页面。这个页面需要包含与每个 `BookInstance` (链接到其详细信息页面) 关联的书本 `Book` 标题，以及 `BookInstance` 模型中的其他信息，包含每个副本的状态、印记和唯一 ID。唯一 ID 的文本，应该链接到 `BookInstance` 详细信息页面。
 
 ## 控制器
 
-`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,
-      });
-    });
-};
+// 呈现所有书本实例 (BookInstance) 的列表
+exports.bookinstance_list = asyncHandler(async (req, res, next) => {
+  const allBookInstances = await BookInstance.find().populate("book").exec();
+
+  res.render("bookinstance_list", {
+    title: "Book Instance List",
+    bookinstance_list: allBookInstances,
+  });
+});
 ```
 
-此方法使用模型的`find()`函数，返回所有`BookInstance`对象。然后它将一个调用，以菊花链方式连接到`populate()`，附加书本`book`字段，这将使用完整的`Book`文档，替换每个`BookInstance`存储的书本 ID。
+路由处理器调用 `BookInstance` 模型的 `find()` 函数，然后链式调用 `populate()` 函数，并将 `book` 字段作为参数传递——这将用完整的 `Book` 文档替换每个 `BookInstance` 对象中的**书本 ID（ObjectId）**。最后，在链式调用的末尾调用 `exec()` 函数来执行查询操作并返回一个 **Promise**。
 
-成功时，传递给查询的回调，会呈现 **bookinstance_list** (.pug) 模板，并将标题`title`和书籍实例列表`bookinstance_list`作为变量传递。
+路由处理器使用 `await` 关键字来等待 **Promise** 对象，直至 **Promise** 对象被解决才会执行后续代码。如果 **Promise** 对象被兑现，查询结果将被保存到 `allBookInstances` 变量中，然后路由处理器继续执行。
+
+代码最后的部分调用 `render()` 函数，指定 **bookinstance_list** (.pug) 模板，并将 `title` 和 `bookinstance_list` 的值传递到模板中。
 
 ## 视图
 
@@ -43,30 +39,31 @@ 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} )
+  if bookinstance_list.length
+    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.
+    p There are no book copies in this library.
 ```
 
-这个视图与其他视图非常相似。它扩展了布局，替换*内容*区块，显示从控制器传入的标题 `title`，并遍历 `bookinstance_list` 中的所有书籍副本。对于每个副本，我们都会显示它的状态（用颜色编码），如果书本不可用，则显示其预期返回日期。这里引入了一个新功能——我们可以在标签之后使用点符号表示法，来指定一个类别。因此，`span.text-success` 将被编译为 `<span class="text-success">`（也可以用 Pug 编写为 `span(class="text-success")`）。
+这个视图与其他视图非常相似。它扩展了布局，替换了内容 _content_ 区块，显示了从控制器传入的标题 `title`，并遍历了 `bookinstance_list` 中的所有书籍副本。对于每个副本，我们都会显示它的状态（用颜色编码），如果书本（book）不可用，则显示其预期返回日期。这里引入了一个新功能——我们可以在标签之后使用点符号表示法来指定一个类别。因此，`span.text-success` 将被编译为 `<span class="text-success">`（也可以用 Pug 编写为 `span(class="text-success")`）。
 
 ## 它看起来像是？
 
-运行本应用，打开浏览器访问 `http://localhost:3000/`，然后选择 _All book-instances_ 链接。假如每个东西都设置正确了，你的网站看起来应该像是底下的截图。
+运行本应用，打开浏览器访问 `http://localhost:3000/`，然后选择 _All book-instances_ 链接。如果每样东西都设定正确了，你的网站看起来应该像底下的截图。
 
-![BookInstance List Page - Express Local Library site](locallibary_express_bookinstance_list.png)
+![书本实例列表页面 - Express 教程：本地图书馆网站](locallibary_express_bookinstance_list.png)
 
 ## 下一步