如何使用 EJS 為您的 Node 應用程序提供模板

教學

介紹

在快速創建 Node 應用程序時，有時需要一種快速的方式來為應用程序提供模板。

Jade 作為 Express 的默認模板引擎，但對於許多用例來說，Jade 語法可能過於複雜。

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

在本文中，您將學習如何將 EJS 應用到 Express 應用程序中，包括站點的可重複部分，以及將數據傳遞給視圖。

使用 DigitalOcean App Platform 從 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。

此代碼還使用以下方式將 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 目錄：

  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

如果您在網絡瀏覽器中訪問 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

如果您在網絡瀏覽器中訪問 http://localhost:8080/about ，您可以觀察到帶有側邊欄的關於頁面：

現在，您可以開始使用 EJS 將數據從 Node 應用程序傳遞到視圖。

步驟 4 — 將數據傳遞給視圖和部分

讓我們定義一些基本變量和一個要傳遞給索引頁面的列表。

重新訪問您的代碼編輯器中的 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>
...

在上面的行中，如果已定義了 variant，則 EJS 代碼將渲染其值，否則渲染 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