Express 教程 第 5 部分:显示库数据
现在,我们准备添加显示 LocalLibrary 网站书籍和其他数据的页面。这些页面将包括一个显示我们每个模型类型有多少记录的主页,以及我们所有模型的列表和详细信息页面。在此过程中,我们将获得从数据库获取记录以及使用模板的实践经验。
先决条件 | 完成之前的教程主题(包括 Express 教程第 4 部分:路由和控制器)。 |
---|---|
目标 | 了解如何使用async /await 执行异步数据库操作,如何使用 Pug 模板语言,以及如何在控制器函数中从 URL 获取数据。 |
概述
在我们之前的教程文章中,我们定义了 Mongoose 模型,我们可以用它来与数据库交互,并创建了一些初始的库记录。然后我们 创建了 LocalLibrary 网站所需的所有路由,但使用了“虚拟控制器”函数(这些是骨架控制器函数,当访问页面时只返回“未实现”消息)。
下一步是为显示我们库信息的页面提供正确的实现(我们将在后面的文章中介绍实现用于创建、更新或删除信息的表单的页面)。这包括更新控制器函数以使用我们的模型获取记录,并定义模板以将此信息显示给用户。
我们将首先提供概述/入门主题,解释如何在控制器函数中管理异步操作以及如何使用 Pug 编写模板。然后,我们将为每个主要的“只读”页面提供实现,并简要说明它们使用的任何特殊或新功能。
在本文结束时,您应该对路由、异步函数、视图和模型在实践中的工作原理有一个很好的端到端理解。
显示库数据教程子文章
以下子文章逐步介绍了添加我们需要显示所需网站页面所需的各种功能的过程。您需要依次阅读并完成每个子文章,然后再继续下一个。
总结
我们现在已经为我们的网站创建了所有“只读”页面:一个显示我们每个模型实例数量的首页,以及我们图书、图书实例、作者和流派的列表和详情页面。在此过程中,我们获得了关于控制器、使用异步操作时管理流程控制、使用Pug创建视图、使用模型查询站点数据库、将信息传递给视图以及创建和扩展模板的许多基本知识。挑战还将教会读者一些关于使用Luxon处理日期的知识。
在我们的下一篇文章中,我们将继续构建我们的知识,创建 HTML 表单和表单处理代码以开始修改站点存储的数据。
另请参阅
- 在 Express 中使用模板引擎(Express 文档)
- Pug(Pug 文档)
- Luxon(Luxon 文档)