如何使用 EJS 模板化您的 Node 应用程序

介绍

当快速创建 Node 应用程序时,有时需要快速的方式来模板您的应用程序。

Jade作为Express的默认模板引擎(https://expressjs.com/en/guide/using-template-engines.html)提供,但Jade语法对于许多用例来说可能过于复杂。

嵌入式JavaScript模板(EJS)可以用作替代模板引擎。

在本文中,您将了解如何将 EJS 应用于 Express 应用程序,包括网站的可重复部分,并将数据传输到视图中。

前提条件

如果您想跟随这篇文章,您将需要:

<$>[注] 注: 您可以在GitHub上找到完整的演示代码的git复制程序。

本教程最初是为express v4.17.1 和ejs v3.1.5 编写的。它已通过 Node v16.0.0、npm v7.11.1、express v4.17.1 和ejs v3.1.6 进行验证。

步骤1 - 设置项目

首先,打开终端窗口并创建一个新的项目目录:

1mkdir ejs-demo

然后,导航到新创建的目录:

1cd ejs-demo

在此时刻,您可以启动一个新的 npm 项目:

1npm init -y

接下来,您需要安装快递包:

1npm install [email protected]

然后安装ejs包:

1npm install [email protected]

在此时刻,你有一个新的项目,可以使用Express和EJS。

步骤 1 — 使用「server.js」配置

安装了所有依赖性,让我们将应用程序配置为使用 EJS,并为索引页面和关于页面设置路径。

创建一个新的 server.js 文件,并使用代码编辑器打开它,并添加以下代码行:

 1[label server.js]
 2var express = require('express');
 3var app = express();
 4
 5// set the view engine to ejs
 6app.set('view engine', 'ejs');
 7
 8// use res.render to load up an ejs view file
 9
10// index page
11app.get('/', function(req, res) {
12  res.render('pages/index');
13});
14
15// about page
16app.get('/about', function(req, res) {
17  res.render('pages/about');
18});
19
20app.listen(8080);
21console.log('Server is listening on port 8080');

此代码定义了应用程序,并在端口8080上听取。

此代码还将 EJS 设置为 Express 应用程序的视图引擎,使用:

1`app.set('view engine', 'ejs');`

注意代码如何通过使用res.render()向用户发送视图,重要的是要注意res.render()将显示在视图的视图文件夹中,因此您只需要定义页面/索引,因为完整的路径是视图/页面/索引。

接下来,您将使用 EJS 创建视图。

步骤 2 – 创建 EJS 部分

像你构建的许多应用程序一样,会有很多重复使用的代码. 这些被认为是 partials. 在本示例中,在索引页面和关于页面上将有三个重复使用的部分:head.ejs、header.ejs 和footer.ejs。

创建一个新的视图目录:

1mkdir views

然后,创建一个新的部分子目录:

1mkdir views/partials

在此目录中,创建一个新的 head.ejs 文件,并使用代码编辑器打开它. 添加以下代码行:

1[label views/partials/head.ejs]
2<meta charset="UTF-8">
3<title>EJS Is Fun</title>
4
5<!-- CSS (load bootstrap from a CDN) -->
6<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
7<style>
8  body { padding-top:50px; }
9</style>

此代码包含 HTML 文档的标题的元数据,还包括 Bootstrap 样式。

接下来,创建一个新的 header.ejs 文件,并使用代码编辑器打开它,添加以下代码行:

 1[label views/partials/header.ejs]
 2<nav class="navbar navbar-expand-lg navbar-light bg-light">
 3  <a class="navbar-brand" href="/">EJS Is Fun</a>
 4  <ul class="navbar-nav mr-auto">
 5    <li class="nav-item">
 6      <a class="nav-link" href="/">Home</a>
 7    </li>
 8    <li class="nav-item">
 9      <a class="nav-link" href="/about">About</a>
10    </li>
11  </ul>
12</nav>

此代码包含 HTML 文档的导航,并使用 Bootstrap 中的几个类来进行样式化。

接下来,创建一个新的 footer.ejs 文件,并使用代码编辑器打开它. 添加以下代码行:

1[label views/partials/footer.ejs]
2<p class="text-center text-muted">&copy; Copyright 2020 The Awesome People</p>

此代码包含版权信息,并使用 Bootstrap 的几个类来设计。

接下来,您将在index..ejs和about.ejs中使用这些部分值。

步骤 3 — 将 EJS 部分添加到视图中

你已经定义了三个部分,现在你可以在你的观点中包括它们。

使用<%-包括(RELATIVE/PATH/TO/FILE) %>`将 EJS 部分嵌入到另一个文件中。

  • 字符串 <%- 而不是仅仅 <% 告诉 EJS 将原始 HTML 渲染。
  • 通往部分的路径与当前文件相对。

然后,创建一个新的页面子目录:

1mkdir views/pages

在此目录中,创建一个新的 index.ejs 文件,并用代码编辑器打开它。

 1[label views/pages/index.ejs]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5  <%- include('../partials/head'); %>
 6</head>
 7<body class="container">
 8
 9<header>
10  <%- include('../partials/header'); %>
11</header>
12
13<main>
14  <div class="jumbotron">
15    <h1>This is great</h1>
16    <p>Welcome to templating using EJS</p>
17  </div>
18</main>
19
20<footer>
21  <%- include('../partials/footer'); %>
22</footer>
23
24</body>
25</html>

将更改保存到此文件,然后运行应用程序:

1node server.js

如果您在 Web 浏览器中访问 http://localhost:8080/,您可以观察索引页面:

Screenshot of the index page with head, header, and footer partials rendered

接下来,创建一个新的 about.ejs 文件,并使用代码编辑器打开它,添加以下代码行:

 1[label views/pages/about.ejs]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5  <%- include('../partials/head'); %>
 6</head>
 7<body class="container">
 8
 9<header>
10  <%- include('../partials/header'); %>
11</header>
12
13<main>
14<div class="row">
15  <div class="col-sm-8">
16    <div class="jumbotron">
17      <h1>This is great</h1>
18      <p>Welcome to templating using EJS</p>
19    </div>
20  </div>
21
22  <div class="col-sm-4">
23    <div class="well">
24      <h3>Look I'm A Sidebar!</h3>
25    </div>
26  </div>
27</div>
28</main>
29
30<footer>
31  <%- include('../partials/footer'); %>
32</footer>
33
34</body>
35</html>

此代码添加了 Bootstrap 侧栏,以演示如何构建部分,以便在不同的模板和页面中重复使用。

将更改保存到此文件,然后运行应用程序:

1node server.js

如果您在网页浏览器中访问http://localhost:8080/about,您可以观察有关页面的侧面栏:

Screenshot of the About page with head, header, and footer partials rendered and sidebar displayed.

现在您可以开始使用 EJS 将数据从 Node 应用程序传输到视图中。

步骤 4 – 将数据转移到观点和部分

让我们定义一些基本的变量和列表,转到索引页面。

在代码编辑器中修复server.js,并在app.get('/')路径中添加以下代码行:

 1[label server.js]
 2var express = require('express');
 3var app = express();
 4
 5// set the view engine to ejs
 6app.set('view engine', 'ejs');
 7
 8// use res.render to load up an ejs view file
 9
10// index page
11app.get('/', function(req, res) {
12  var mascots = [
13    { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
14    { name: 'Tux', organization: "Linux", birth_year: 1996},
15    { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
16  ];
17  var tagline = "No programming concept is complete without a cute animal mascot.";
18
19  res.render('pages/index', {
20    mascots: mascots,
21    tagline: tagline
22  });
23});
24
25// about page
26app.get('/about', function(req, res) {
27  res.render('pages/about');
28});
29
30app.listen(8080);
31console.log('Server is listening on port 8080');

这个代码定义了一个名为mascots的数组和一个名为tagline的字符串,接下来,让我们在index.ejs中使用它们。

在 EJS 中渲染单个变量

若要响应单个变量,您可以使用 <%= tagline %>。

在代码编辑器中修复index.ejs,并添加以下代码行:

 1[label views/pages/index.ejs]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5  <%- include('../partials/head'); %>
 6</head>
 7<body class="container">
 8
 9<header>
10  <%- include('../partials/header'); %>
11</header>
12
13<main>
14  <div class="jumbotron">
15    <h1>This is great</h1>
16    <p>Welcome to templating using EJS</p>
17
18    <h2>Variable</h2>
19    <p><%= tagline %></p>
20  </div>
21</main>
22
23<footer>
24  <%- include('../partials/footer'); %>
25</footer>
26
27</body>
28</html>

此代码将在索引页面上显示tagline值。

在 EJS 中跨越数据

要循环数据,您可以使用.forEach。

在代码编辑器中修复index.ejs,并添加以下代码行:

 1[label views/pages/index.ejs]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5  <%- include('../partials/head'); %>
 6</head>
 7<body class="container">
 8
 9<header>
10  <%- include('../partials/header'); %>
11</header>
12
13<main>
14  <div class="jumbotron">
15    <h1>This is great</h1>
16    <p>Welcome to templating using EJS</p>
17
18    <h2>Variable</h2>
19    <p><%= tagline %></p>
20
21    <ul>
22      <% mascots.forEach(function(mascot) { %>
23        <li>
24          <strong><%= mascot.name %></strong>
25          representing <%= mascot.organization %>,
26          born <%= mascot.birth_year %>
27        </li>
28      <% }); %>
29    </ul>
30  </div>
31</main>
32
33<footer>
34  <%- include('../partials/footer'); %>
35</footer>
36
37</body>
38</html>

将更改保存到此文件,然后运行应用程序:

1node server.js

如果您在网页浏览器中访问http://localhost:8080/,您可以观察指数页面与面具:

Screenshot of the list of mascots rendered.

将数据传输到 EJS 中的一部分

部分 EJS 可以访问与主视图相同的所有数据,但要小心. 如果您在部分视图中引用变量,则必须在使用部分视图的每个视图中定义,否则会引发错误。

您还可以将变量定义和传输到 EJS 部分中的包括语法,如下:

1[label views/pages/about.ejs]
2...
3<header>
4  <%- include('../partials/header', {variant: 'compact'}); %>
5</header>
6...

但你需要再次小心假设变量已被定义。

如果您想引用可能并不总是定义的部分变量,并给它一个默认值,则可以这样做:

1[label views/partials/header.ejs]
2...
3<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
4...

在上面的行中, EJS 代码表示变量的值,如果定义,则表示默认的值。

结论

在本文中,您了解如何将 EJS 应用于 Express 应用程序,包括网站的可重复部分,并将数据传输到视图中。

EJS 允许您在不需要额外的复杂性时构建应用程序. 通过使用部分和轻松传输变量到您的视图的能力,您可以快速构建一些伟大的应用程序。

请参阅 EJS 文档(https://ejs.co/#docs)以获取有关功能和语法的更多信息,参阅 比较 JavaScript 模板引擎: Jade, Mustache, Dust 和更多以了解不同视图引擎的优势和缺陷。

Published At
Categories with 技术
Tagged with
comments powered by Disqus