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

教程

介绍

在快速创建 Node 应用程序时，有时需要一种快速的方式来为应用程序创建模板。

Jade 作为 Express 的默认模板引擎，但是 Jade 语法对许多用例来说可能过于复杂。

嵌入式 JavaScript 模板（EJS） 可以作为替代模板引擎。

在本文中，您将学习如何将 EJS 应用于 Express 应用程序，包括将站点的可重复部分包含到其中，并将数据传递给视图。

使用 DigitalOcean 应用平台 从 GitHub 部署您的前端应用程序。让 DigitalOcean 专注于扩展您的应用。

先决条件

如果您想要按照本文进行操作，您将需要：

注意： 您可以在 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 — 设置项目

首先，打开你的终端窗口并创建一个新的项目目录：

  1. mkdir ejs-demo

然后，切换到新创建的目录：

  1. cd ejs-demo

此时，你可以初始化一个新的 npm 项目：

  1. npm init -y

接下来，你需要安装 express 包：

  1. npm install express@4.17.1

然后安装 ejs 包：

  1. npm install ejs@3.1.6

此时，你已经有了一个准备使用 Express 和 EJS 的新项目。

步骤 1 — 用 server.js 配置

当所有依赖项都安装好后，让我们配置应用程序以使用 EJS，并设置首页和关于页面的路由。

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

server.js
var express = require('express');
var app = express();

// 将视图引擎设置为 ejs
app.set('view engine', 'ejs');

// 使用 res.render 加载一个 ejs 视图文件

// 首页
app.get('/', function(req, res) {
  res.render('pages/index');
});

// 关于页面
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

此代码定义了应用程序并监听端口 8080。

此代码还使用以下方法设置了 Express 应用程序的视图引擎为 EJS：

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

请注意，代码使用 res.render() 发送视图给用户。值得注意的是，res.render() 会在 views 文件夹中查找视图。因此，您只需要定义 pages/index，因为完整路径是 views/pages/index。

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

第二步 — 创建 EJS 局部视图

与构建的许多应用程序一样，将重复使用大量代码。这些被视为 局部视图。在此示例中，将有三个局部视图在首页和关于页面上重复使用：head.ejs、header.ejs 和 footer.ejs。现在让我们创建这些文件。

创建一个新的 views 目录：

  1. mkdir views

然后，创建一个新的 partials 子目录：

  1. mkdir views/partials

在这个目录中，创建一个新的head.ejs文件，并用你的代码编辑器打开它。添加以下代码行：

views/partials/head.ejs
<meta charset="UTF-8">
<title>EJS Is Fun</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
  body { padding-top:50px; }
</style>

这段代码包含了HTML文档的head的元数据。它还包括了Bootstrap样式。

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

views/partials/header.ejs
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">EJS Is Fun</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
  </ul>
</nav>

这段代码包含了HTML文档的导航，并使用了Bootstrap的几个类进行样式设置。

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

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

这段代码包含了版权信息，并使用了Bootstrap的几个类进行样式设置。

接下来，你将在index.ejs和about.ejs中使用这些局部文件。

第三步 — 将EJS局部文件添加到视图中

你已经定义了三个局部文件。现在你可以在你的视图中include它们。

使用<%- include('相对/文件/路径') %>将一个EJS局部文件嵌入到另一个文件中。

  • 使用连字符<%-而不只是<%来告诉EJS渲染原始HTML。
  • 局部文件的路径是相对于当前文件的。

然后，创建一个新的 pages 子目录：

  1. mkdir views/pages

在这个目录中，创建一个新的 index.ejs 文件并用代码编辑器打开它。添加以下代码行：

views/pages/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

保存对该文件的更改，然后运行应用程序：

  1. node server.js

如果在 Web 浏览器中访问 http://localhost:8080/，你可以观察到索引页面：

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

views/pages/about.ejs
<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
<div class="row">
  <div class="col-sm-8">
    <div class="jumbotron">
      <h1>This is great</h1>
      <p>Welcome to templating using EJS</p>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="well">
      <h3>Look I'm A Sidebar!</h3>
    </div>
  </div>
</div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

此代码添加了一个 Bootstrap 侧边栏，以演示如何在不同的模板和页面之间重用部分。

保存对该文件的更改，然后运行应用程序：

  1. node server.js

如果在 Web 浏览器中访问 http://localhost:8080/about，你可以观察到带有侧边栏的关于页面：

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

第四步 —— 将数据传递给视图和部分

让我们定义一些基本变量和列表，以传递给索引页面。

重新打开代码编辑器中的 server.js 文件，并在 app.get('/') 路由内添加以下代码行：

server.js
var express = require('express');
var app = express();

// 设置视图引擎为ejs
app.set('view engine', 'ejs');

// 使用res.render加载ejs视图文件

// 首页
app.get('/', function(req, res) {
  var mascots = [
    { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
    { name: 'Tux', organization: "Linux", birth_year: 1996},
    { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
  ];
  var tagline = "No programming concept is complete without a cute animal mascot.";

  res.render('pages/index', {
    mascots: mascots,
    tagline: tagline
  });
});

// 关于页面
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

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

在EJS中渲染单个变量

要输出单个变量，您可以使用<%= tagline %>。

重新打开您的代码编辑器中的index.ejs并添加以下代码行：

views/pages/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

此代码将在首页显示tagline的值。

在EJS中循环遍历数据

要循环遍历数据，您可以使用.forEach。

重新打开您的代码编辑器中的index.ejs并添加以下代码行：

views/pages/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>

    <ul>
      <% mascots.forEach(function(mascot) { %>
        <li>
          <strong><%= mascot.name %></strong>
          representing <%= mascot.organization %>,
          born <%= mascot.birth_year %>
        </li>
      <% }); %>
    </ul>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

保存更改到该文件，然后运行应用程序：

  1. node server.js

如果您在Web浏览器中访问http://localhost:8080/，您可以观察到带有mascots的首页：

在 EJS 中向局部传递数据

EJS 局部模板具有与父视图相同的数据访问权限。但要小心。如果在局部引用变量，则需要在每个使用该局部的视图中定义它，否则会抛出错误。

您还可以像这样在 include 语法中定义并传递变量给 EJS 局部：

views/pages/about.ejs
...
<header>
  <%- include('../partials/header', {variant: 'compact'}); %>
</header>
...

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

如果您想在局部引用一个可能未始终定义的变量，并给它一个默认值，可以像这样做：

views/partials/header.ejs
...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...

在上面的代码中，如果已定义，则 EJS 代码将呈现 variant 的值，如果未定义，则呈现 default。

结论

在本文中，您学习了如何将 EJS 应用于 Express 应用程序，包含站点的可重复部分，并向视图传递数据。

当您不需要额外复杂性时，EJS 可让您构建应用程序。通过使用局部并能够轻松地将变量传递给您的视图，您可以快速构建一些出色的应用程序。

参考EJS文档以获取有关功能和语法的更多信息。参考比较JavaScript模板引擎：Jade、Mustache、Dust等以了解不同视图引擎的优缺点。

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-ejs-to-template-your-node-application