如果您在过去曾使用过 Express.js 框架,您将知道 Express 可以处理服务器侧模板引擎,您可以将您的 HTML 页面包含各种信息和数据直接放入您的视图中,这使我们能够动态地生成 HTML。
在本文中,我们将介绍Express的3种流行的模板引擎:Pug,EJS和Mustache。
如果您想了解更多关于 Express 的信息,请遵循 此链接。
我应该使用哪种模板引擎?
有各种各样的模板引擎与Express一起工作。Express中发现的默认模板引擎是Jade,现在被称为Pug,但是Express中安装的默认Jade仍然使用旧版本。
在此分解中,我们将介绍Pug,EJS和Mustache的基本语法和用途。
如何使用PUG
要安装 Pug并在我们的Express应用程序中使用它,我们必须先使用npm来安装它:
1$ npm install pug
然后,您可以在初始化应用程序时将视图引擎设置为插入,然后进行接收呼叫并渲染您的视图:
1const express = require('express');
2const app = express();
3app.set('view engine', 'pug');
4
5app.get('/home', (req, res) => {
6 res.render('home');
7});
现在你已经在你的Express应用程序中完成了,你可以将模板添加到你的视图目录中作为视图/home.pug,然后填写它:
1h2 This is the home page
2p It's a test view
此视图最终会创建一个HTML模板,其中包含一个h2标签,其中包含文本这是主页,以及一个p标签,其中包含文本这是测试视图。
如果您想将Express应用程序的数据传输到家视图中,您可以像这样渲染变量:
1app.get('/home', (req, res) => {
2 res.render('home', { animal: 'Alligator' });
3});
然后你的观点将看起来像这样:
1h2 This is the #{animal} home page
2p It's a test view
然后你的h2标签将围绕着文本这是阿利加特主页。 除此之外,你可以尝试和构建自己的Pug文件,如你所见!
如何使用 EJS
现在我们已经完成了Pug的介绍,让我们试试 EJS:
1$ npm install ejs
一旦安装了 EJS,您可以将其调用到您的 Express 应用程序中:
1const express = require('express');
2const app = express();
3app.set('view engine', 'ejs');
4
5app.get('/home', (req, res) => {
6 res.render('home');
7});
现在,您已将视图引擎更改为ejs,您可以在view/home.ejs下方的view目录中创建模板。
1<h2>This is the home page</h2>
2<p>It's a test view</p>
现在,假设我们想将动物列表添加到我们的HTML页面,我们可以通过我们的Express应用程序将一系列动物传递到我们的EJS模板中。
1app.get('/home', (req, res) => {
2 let animals = [
3 { name: 'Alligator' },
4 { name: 'Crocodile' }
5 ];
6 res.render('home', { animals: animals });
7});
在您的「view/home.ejs」文件中,您可以通过使用「.forEach」的数据循环:
1<h2>This is the home page</h2>
2<p>It's a test view</p>
3<ul>
4 <% animals.forEach((animal) => { %>
5 <li><%= animal.name %></li>
6 <% }); %>
7</ul>
借助此代码,你将在动物数组上执行一个.forEach循环,并在li标签中输出每个动物的名称。
如何使用 Mustache
对于我们最后的模板引擎,我们将讨论如何安装Mustache并在Express应用程序中使用它。
1$ npm i mustache-express
然后您可以在 Express 应用程序中设置您的视图引擎。
1const express = require('express');
2const mustacheExpress = require('mustache-express');
3const app = express();
4app.engine('mustache', mustacheExpress());
5app.set('view engine', 'mustache');
6
7app.get('/home', (req, res) => {
8 res.render('home');
9});
mustache 的文件扩展将看起来像这样的: views/home.mustache:
1<h2>This is the home page</h2>
2<p>It's a test view</p>
并且要在模板中显示 Express 应用程序的数据,请通过路线传输数据:
1app.get('/home', (req, res) => {
2 res.render('home', { animal: 'Alligator' });
3});
然后在``模板中,您可以直接调用变量:
1<h2>This is the {{ animal }} home page</h2>
2<p>It's a test view</p>
然后在.mustache文件中的动物会显示Alligator。如果你想了解有关如何使用Mustache的更多信息,请点击他们的页面(https://mustache.github.io/mustache.5.html)。
简单而高效
Express 的模板引擎是为您的应用程序提供静态模板文件的绝佳方法. 它为您提供了通过模板轻松显示数据的灵活性。 下次您想要构建 Express 项目时,请确保您查看这些模板引擎并尝试它们!