我们现在准备好要新增网页,以显示本地图书馆网站的书本与其它资料。这些网页将包括一个主页 ,显示我们每个模型的型态有多少笔纪录,以及我们所有模型的清单与细节页面。借此,我们将得到从数据库取得纪录、以及使用样版的实务经验。

前置条件: 完成先前教程主题 (包含 Express 教程 Part 4: 路由与控制器)。
目标:

了解如何使用非同步模组与Pug 样版语言,以及如何从我们的控制器函式中的URL得取资料。

概览

在我们先前的教程中,定义了可以用来跟资料库互动的 Mongoose models ,并创建了一些初始的图书馆纪录。我们接着创建本地图书馆网站需要的所有路由  ,但仅使用"空壳控制器" 函式(这些是骨架控制器函式,当一个网页被存取时,只回传一个"未实作" 信息)。

下一步,是为这些显示图书馆信息的网页,提供充分的实作(我们将在后面的文章,检视网页表单的实作,像是创建、更新、删除信息)。这包含了更新控制器函式,以利用我们的模型取得纪录,并定义模板,为使用者显示这些信息。

我们在一开始,提供概略的总览/重点主题,解释在控制器函式中,如何管理非同步操作,以及如何使用Pug撰写模板。然后我们将为每一个主要的 "唯读" 网页提供实作步骤,并且在使用到任何特别的、或新的特性时,会附上简短的解释说明。

本教程的最后,你对路由、非同步函式、视图、模型如何实际运作,应该有了更好的理解。

本教程的章节

本教程分为下列章节,说明为了显示图书馆网站页面,如何新增各种特性 。在进入下一个教程之前,你需要阅读并逐一实作下列章节。

  1. 使用 async 進行非同步流控制
  2. 模版入门
  3. 本地图书馆基础样版
  4. 主页
  5. 书本清单页面
  6. 书本实例清单页面
  7. 日期格式化-使用 moment
  8. 作者清单面页、分类清单页面、与自我挑战
  9. 分类细节页面
  10. 书本细节页面
  11. 作者细节页面
  12. 书本实例细节页面、与自我挑战

总结

我们现在已经为我们的网站,创建了所有 "唯读" 的页面: 一个主页,可以显示每一个模组的实例数量,书本的列表与详细信息页面,书本的实例、作者、分类。沿着目前的学习路径,我们学到了许多基本知识,有控制器、在非同步作业时管理流控制、使用Pug创建视图、使用模型查询数据库、如何从视图传送信息到模板、如何创建并扩展模板。而完成挑战的人,还会学到如何用moment处理日期。

在下一篇文章,我们将依据目前为止学到的知识,创建HTML 表单以及表单管理代码,开始修改储存在网站中的资料。

参见

 

本教程文章列表

 

文档标签和贡献者

此页面的贡献者: edgar-chen
最后编辑者: edgar-chen,