使用ExpressPug视图引擎在Nod

每个流行的模板引擎都有自己定义占位符的理念。在这篇文章中,看看Pug以及如何将它与NodeJS和Express一起使用。

将动态内容呈现到我们的HTML页面中是一个常见的要求。模板引擎是支持此功能的好方法。在这篇文章中,我们将学习如何使用ExpressPug视图引擎在NodeJS中执行模板。

如果您是Express新手,请查看这篇关于ExpressJS入门的文章。

1.什么是模板引擎?

模板引擎有助于使我们的Web应用程序在数据方面动态化。在模板引擎的核心,有一个带有动态数据占位符的HTML模板。

当我们的应用程序处理一个请求时,模板引擎就会启动。基本上,引擎将占位符或片段替换为实际的HTML内容。换句话说,模板引擎执行发送到客户端的动态生成HTML。

一些最流行的模板引擎是:

EJS哈巴狗(也称为翡翠)车把

每个引擎都有自己定义占位符的理念。在这篇文章中,我们将介绍Pug以及如何将它与NodeJS和Express一起使用。

2.NodeJSExpressPug安装

作为在我们的Express应用程序中使用Pug的第一步,我们需要安装必要的软件包。

为此,我们可以执行以下命令:

1$npminstallexpresspugbody-parser

下面是package.json我们的示例应用程序。

{"name":"nodejs-express-pug-sample","version":"1.0.0","description":"NodeJSExpressPugSample","main":"app.js","scripts":{"test":"echo\"Error:notestspecified\"exit1","start":"nodemonapp.js","start-server":"nodeapp.js"},"author":"SaurabhDashora","license":"ISC","devDependencies":{"nodemon":"^1.18."},"dependencies":{"body-parser":"^1.18.","express":"^4.16.","pug":"^.0.2"}}

作为模板引擎,Pug使用最少的HTML。相反,它倾向于一种自定义模板语言。

现在让我们看看使用Pug构建一些模板。

.创建NodeJSExpressPug模板

出于我们演示应用程序的目的,我们将创建一个简单的应用程序来显示产品列表。此外,我们将有一个页面将产品添加到我们的商店。

让我们首先创建产品列表页面模板。我们将把我们的模板保存在我们的源代码中的一个特殊views文件夹中。文件名将是shop.pug.

html(lang="en")

headmeta(charset="UTF-8")

meta(


转载请注明:http://www.aierlanlan.com/grrz/7480.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了