一个实际操作的例子

现在我们已经对Pug的语法及其工作原理有了合理的了解，让我们通过构建一个小型的<一个href＝＂https://expressjs.com/">Express.js应用程序来演示Pug的几个更高级的功能。

此示例的代码可在<一个href＝＂https://github.com/sitepoint-editors/beginners-guide-to-pug">GitHub．

注意:如果您以前没有用过Express，不用担心。它是一个Node.js的web框架，为构建web应用程序提供了一组健壮的功能。如果你想了解更多，请查看我们的<一个href＝＂//www.shaoxingby.com/create-new-express-js-apps-with-express-generator/">开始与Express教程．

首先，让我们创建一个新项目并安装Express:

mkdirpug-expresscdpug-expressnpminit - ynpm我表达

接下来创建一个app.js在pug-express文件夹:

触摸app.js

然后添加以下内容:

常量表达＝需要（“表达”）；常量应用程序＝表达（）；应用程序．得到（' / '，（要求的事情，res）= >｛res．发送（“Hello, World !”）；｝）；应用程序．听（3000，（）= >｛控制台．日志（“监听端口3000……”）；｝）；

这里我们声明了一个路由(/)，它将用文本“Hello, World!”来响应GET请求。我们可以在浏览器中测试这一点，通过启动服务器节点app.js然后参观<一个href＝＂http://localhost:3000＂>http://localhost:3000．

如果你看到这样的东西，那么事情就按照计划进行了:

添加数据

这个Express应用程序不会做任何太壮观的事情。我们将构建一个简单的员工目录，该目录从数据库中获取员工列表，并将其显示在一个表中。为此，我们需要一个数据库和一些数据。

然而，对于这个小示例来说，安装和配置数据库有点繁琐，所以我将使用一个名为<一个href＝＂https://github.com/typicode/json-server">json-server．这将允许我们创建一个db.json文件，它将转换为一个REST API，我们可以执行CRUD操作。

让我们来安装它:

npmI -g json-server

现在创建前面提到的db.json项目根目录下的文件:

触摸db.json

最后，我们需要一些JSON来填充它。我们将使用<一个href＝＂https://randomuser.me/">随机用户发生器，这是一个免费的开源API，用于生成随机用户数据。二十五个人就够了，所以去https://randomuser.me/api/?results=25然后把结果复制到db.json．

最后，在第二个终端窗口中启动服务器:

Json-server——查看db。json - p＝3001

这将导致json-server在端口3001上启动，并监视数据库文件的更改。

将Pug设置为模板引擎

Express对使用Pug提供了出色的支持，因此只需要进行很少的配置。

首先，让我们添加Pug到我们的项目:

npm我哈巴狗

然后在app.js我们需要告诉Express使用Pug:

应用程序．集（“视图引擎”，“哈巴狗”）；

接下来，创建一个的观点目录，然后在的观点目录，添加index.pug文件:

mkdir的观点触摸视图/ index.pug

向该文件添加一些内容:

doctype html超文本标记语言（朗＝“en”）头标题你好,世界!身体h1你好,世界!

然后改变app.js像这样:

常量表达＝需要（“表达”）；常量应用程序＝表达（）；应用程序．集（“视图引擎”，“哈巴狗”）；应用程序．得到（' / '，（要求的事情，res）= >｛res．渲染（“指数”）；｝）；应用程序．听（3000，（）= >｛控制台．日志（“监听端口3000……”）；｝）；

最后，重新启动Node服务器，然后刷新浏览器，你应该会看到:

就是这样。你可以出发了。

构建员工目录

列表中的下一个任务是将一些数据交给Pug模板来显示。为此，我们需要一个从json服务器获取数据的方法。不幸的是，获取API没有在Node中实现，所以让我们使用<一个href＝＂https://github.com/axios/axios">axios，而不是流行的HTTP客户端:

npm我axios

然后改变app.js像这样:

常量表达＝需要（“表达”）；常量axios＝需要（“axios”）；常量应用程序＝表达（）；应用程序．集（“视图引擎”，“哈巴狗”）；应用程序．得到（' / '，异步（要求的事情，res）= >｛常量查询＝等待axios．得到（“http://localhost: 3001 /结果”）；res．渲染（“指数”，｛员工：查询．数据｝）；｝）；应用程序．听（3000，（）= >｛控制台．日志（“监听端口3000……”）；｝）；

这里发生了几件事。我们已经把路由处理程序变成了<一个href＝＂https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">异步函数，这样我们就可以等待员工数据从json服务器返回，然后再将其交给模板。

然后我们像以前一样呈现索引，但这一次我们传递给它一个包含所有数据的对象文字。

注意:每次更改时都必须重新启动Node服务器app.js．如果你觉得这很烦人，那就走人吧<一个href＝＂https://www.npmjs.com/package/nodemon">nodemon，它会为你做这些。

现在说说哈巴狗。改变index.pug看起来像下面这样:

doctype html超文本标记语言（朗＝“en”）头标题员工目录链接（rel＝“样式表”href＝“https://cdn.jsdelivr.net/npm/semantic-ui@2.3.3 / dist / semantic.min.css”）风格．table.ui. celledimg{显示:inline-block;}页脚{边距:35px 0 15px 0;Text-align: center}身体主要#主要h1。ui.center背景.header员工目录。ui.container表格。ui.celled.table.center背景theadtrth《阿凡达》th第一个名字th姓th电子邮件th电话th城市tbody每一个员工在员工tr道明img。ui.mini.rounded.image（src＝员工．图片．缩略图）道明# {employee.name.first}道明# {employee.name.last}道明# {employee.email}道明# {employee.phone}道明# {employee.location.city}tfoottrth（colspan＝“6”）页脚p©#{new Date().getFullYear()}我的公司

希望没有什么令人惊讶的事情发生。我们使用<一个href＝＂https://www.npmjs.com/package/semantic-ui-css">semantic-ui-css一些造型，以及一些我们自己的风格。

然后，在表体中，我们迭代数组员工我们从这里传入app.js并将它们的详细信息输出到一个表中。

在页面的底部是我们的版权声明和当前年份的页脚。

如果你现在刷新页面，你会看到:

模板继承

这已经很好了，但是为了使事情圆满，我将演示如何构造我们的视图，以便随着项目的发展提供最大的灵活性。

我们先来创建一个layout.pug在的观点目录:

触摸视图/ layout.pug

然后添加以下内容:

doctype html超文本标记语言头标题员工目录链接（rel＝“样式表”href＝“https://cdn.jsdelivr.net/npm/semantic-ui@2.3.3 / dist / semantic.min.css”）风格．table.ui. celledimg{显示:inline-block;}页脚{边距:35px 0 15px 0;Text-align: center}身体主要#主要h1。ui.center背景.header员工目录。ui.container块的内容块页脚页脚p©#{new Date().getFullYear()}我的公司

我们在这里所做的是创建一个布局文件，它可以被项目中的其他Pug文件扩展。当您有大量的Pug文件时，这将节省大量的代码。

它的工作方式是我们定义了两个内容块(块的内容而且块页脚)，子模板可以替换。在的情况下页脚块，我们还定义了一些回退内容，如果子模板没有重新定义该块，这些内容将被呈现。

现在我们可以讲index.pug从布局中继承的文件:

扩展layout.pug块的内容表格。ui.celled.table.center背景theadtrth《阿凡达》th第一个名字th姓th电子邮件th电话th城市tbody每一个员工在员工tr道明img。ui.mini.rounded.image（src＝员工．图片．缩略图）道明# {employee.name.first}道明# {employee.name.last}道明# {employee.email}道明# {employee.phone}道明# {employee.location.city}tfoottrth（colspan＝“6”）

结果与之前的结果相同，但现在的代码具有更好的结构。

mixin

Mixins允许您创建Pug的可重用块。我们可以使用它将表行提取到它自己的文件中。

创建一个名为mixin在的观点文件夹，并在该文件夹中创建名为_tableRow.pug：

mkdir视图/混合触摸视图/混合/ _tableRow.pug

类型声明mixinmixin关键字。它们被编译为函数，并可以接受参数。将以下内容添加到视图/混合/ _tableRow.pug：

mixintableRow（员工）tr道明img。ui.mini.rounded.image（src＝员工．图片．缩略图）道明# {employee.name.first}道明# {employee.name.last}道明# {employee.email}道明# {employee.phone}道明# {employee.location.city}

现在改变index.pug像这样:

扩展layout.pug包括mixin / _tableRow块的内容表格。ui.celled.table.center背景theadtrth《阿凡达》th第一个名字th姓th电子邮件th电话th城市tbody每一个员工在员工+ tableRow（员工）tfoottrth（colspan＝“6”）

如您所见，我们在文件顶部导入mixin。然后通过在其名称前加上加号来调用它，并将其传递给我们的员工对象。

这对于我们的小应用程序来说有点过头了，但它展示了Pug的一个非常有用的功能，它允许我们编写可重用的代码。