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

介绍

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

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

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

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

先决条件

如果您想继续阅读本文，您将需要：

Node.js 的本地开发环境。关注【X7X】如何安装Node.js并创建本地开发环境【X76X】。

笔记： 您可以在 GitHub 上找到完整演示代码的 git repo.

本教程最初是为 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 步 — 设置项目

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

mkdir ejs-demo

然后，导航到新创建的目录：

cd ejs-demo

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

npm init -y

接下来，您需要安装 express 软件包：

npm install express@4.17.1

然后安装ejs包：

npm install ejs@3.1.6

此时，您已经准备好使用 Express 和 EJS 的新项目。

第 1 步 — 使用 `server.js` 进行配置

安装完所有依赖项后，让我们将应用程序配置为使用 EJS 并为 Index 页面和 About 页面设置路由。

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

服务器.js

var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

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

// about page
app.get('/about', function(req, res) {
  res.render('pages/about');
});

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

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

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

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

请注意代码如何使用 res.render() 向用户发送视图。需要注意的是，res.render() 将在 views 文件夹中查找视图。所以你只需要定义pages/index，因为完整路径是views/pages/index。

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

第 2 步 — 创建 EJS 部分

就像您构建的许多应用程序一样，会有很多代码被重用。这些被认为是部分。在此示例中，将在索引页面和关于页面上重复使用三个部分：head.ejs、header.ejs 和 footer.ejs。现在让我们制作这些文件。

新建views目录：

mkdir views

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

mkdir views/partials

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

意见/部分/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 文件并使用代码编辑器打开它。添加以下代码行：

视图/部分/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 文件并使用代码编辑器打开它。添加以下代码行：

视图/部分/footer.ejs

<p class="text-center text-muted">&copy; Copyright 2020 The Awesome People</p>

此代码包含版权信息并使用 Bootstrap 中的几个类进行样式设置。

接下来，您将在 index..ejs 和 about.ejs 中使用这些分音。

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

您定义了三个部分。现在你可以在你的视图中include它们。

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

连字符 <%- 而不是 <% 告诉 EJS 呈现原始 HTML。
部分路径是相对于当前文件的。

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

mkdir views/pages

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

视图/页面/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>

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

node server.js

如果您在网络浏览器中访问 http://localhost:8080/，您可以观察到 Index 页面：

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

视图/页面/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 侧边栏，以演示如何构建部分组件以跨不同模板和页面重用。

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

node server.js

如果您在网络浏览器中访问 http://localhost:8080/about，您可以通过侧边栏观察“关于”页面：

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

第 4 步 - 将数据传递给视图和部分

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

在代码编辑器中重新访问 server.js 并在 app.get('/') 路由中添加以下代码行：

服务器.js

var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page
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
  });
});

// about page
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 并添加以下代码行：

视图/页面/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 并添加以下代码行：

视图/页面/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>

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

node server.js

如果您在网络浏览器中访问 http://localhost:8080/，您可以使用 mascots 观察索引页面：

在 EJS 中将数据传递给 Partial

EJS 部分可以访问与父视图相同的所有数据。不过要小心。如果您在部分中引用变量，则需要在使用部分的每个视图中定义它，否则将引发错误。

您还可以在包含语法中定义变量并将其传递给 EJS 部分，如下所示：

视图/页面/about.ejs

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

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

如果你想在一个可能并不总是定义的部分中引用一个变量，并给它一个默认值，你可以这样做：

视图/部分/header.ejs

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

在上面的行中，EJS 代码将渲染 variant 的值（如果已定义），如果未定义则渲染 default。

结论

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

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

有关特性和语法的更多信息，请参阅 EJS 文档。参考 Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More 了解不同视图引擎的优缺点。

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

介绍

先决条件

第 1 步 — 设置项目

第 1 步 — 使用 server.js 进行配置

第 2 步 — 创建 EJS 部分

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

第 4 步 - 将数据传递给视图和部分

在 EJS 中渲染单个变量

在 EJS 中循环数据

在 EJS 中将数据传递给 Partial

结论

第 1 步 — 使用 `server.js` 进行配置