将动态内容呈现到我们的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(