// Tutorial //

Использование EJS для преобразования приложения Node в шаблон

Published on October 22, 2020
Default avatar
By Chris Sev
Sr Developer Advocate
Русский
Использование EJS для преобразования приложения Node в шаблон

Введение

При быстром создании приложений Node часто бывает необходим удобный и быстрый способ преобразовать приложение в шаблон.

Jade используется по умолчанию как механизм просмотра для Express, но синтаксис Jade может быть чрезмерно сложным для многих моделей использования. EJS — один из альтернативных вариантов, удобный в настройке и позволяющий хорошо выполнить эту работу. Давайте посмотрим, как создать простое приложение и использовать EJS, чтобы включить повторяющиеся части нашего сайта (частичные элементы) и передать данные в представления.

Настройка демонстрационного приложения

Мы сделаем для нашего приложения две страницы, одну страницу полной ширины, а другую — с боковой панелью.

Структура файлов

Это файлы, которые нам требуются для нашего приложения. Мы создадим шаблоны в папке views, а затем будем следовать стандартным практикам Node.

- views
----- partials
---------- footer.ejs
---------- head.ejs
---------- header.ejs
----- pages
---------- index.ejs
---------- about.ejs
- package.json
- server.js

package.json будет содержать информацию нашего приложения Node и необходимые нам зависимости (express и EJS), а server.js будет содержать настройку, конфигурацию сервера Express. Здесь мы определим маршруты к нашим страницам.

Настройка узла

Давайте откроем файл package.json и настроим в нем наш проект.

package.json
{
  "name": "node-ejs",
  "main": "server.js",
  "dependencies": {
    "ejs": "^3.1.5",
    "express": "^4.17.1"
  }
}

Нам потребуются только Express и EJS. Теперь нам нужно установить зависимости, которые мы только что определили. Вперед:

  1. npm install

Установив все зависимости, настроим приложение для использования EJS и настроим маршруты для двух страниц, которые нам нужны: страницы индекса (полная ширина) и информационной страницы (боковая панель). Мы будем делать это в файле server.js.

server.js
// load the things we need
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('8080 is the magic port');

Здесь мы определим наше приложение и зададим для него отображение на порту 8080. Также нам нужно задать EJS как механизм просмотра для нашего приложения Express с помощью app.set('view engine', 'ejs'); Обратите внимание, как мы отправляем представление пользователю, используя res.render(). Важно отметить, что res.render() будет искать представление в папке views. Это значит, что нам нужно определить только pages/index, поскольку полный путь выглядит как views/pages/index.

Запуск сервера

Запустите сервер с помощью следующей команды:

  1. node server.js

Теперь мы можем открыть наше приложение в браузере, используя адреса http://localhost:8080 и http://localhost:8080/about. Мы настроили наше приложение, и нам нужно определить файлы представления и посмотреть, как EJS работает с ними.

Создание частичных элементов EJS

Как и в других приложениях здесь будет много кода, используемого многократно. Мы назовем такие элементы частичными шаблонами и определим три файла, которые будут использоваться везде на нашем сайте: head.ejs, header.ejs и footer.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>
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>
views/partials/footer.ejs
<p class="text-center text-muted">© Copyright 2020 The Awesome People</p>

Добавление частичных шаблонов EJS в представления

Итак, мы определили частичные шаблоны. Теперь нужно добавить их в наши представления. Возьмем файлы index.ejs и about.ejs и используем синтаксис include для добавления частичных шаблонов.

Синтаксис добавления частичного шаблона EJS

Используйте <%- include('RELATIVE/PATH/TO/FILE') %>, чтобы встроить частичный шаблон EJS в другой файл.

  • Дефис <%- вместо <% предписывает EJS выполнять рендеринг необработанного кода HTML.
  • Путь к частичному шаблону является относительным по отношению к текущему файлу.
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>

Теперь мы можем посмотреть определенное представление в браузере по адресу http://localhost:8080. node-ejs-templating-index

Для информационной страницы мы также добавим загрузочную боковую панель, чтобы продемонстрировать, как частичные шаблоны можно структурировать для использования с разными шаблонами и страницами.

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>

Если мы откроем адрес http://localhost:8080/about, мы увидим нашу информационную страницу с боковой панелью! node-ejs-templating-about

Теперь мы можем начать использовать EJS для передачи данных из нашего приложения Node в наши представления.

Передача данных в представления и частичные шаблоны

Определим некоторые базовые переменные и список для передачи на главную страницу. Вернитесь в файл server.js и добавьте следующий код в маршрут app.get('/').

server.js
// 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
    });
});

Мы создали список mascots и простую строку tagline. Теперь перейдем в файл index.ejs и используем их.

Рендеринг одиночной переменной в EJS

Чтобы отразить через эхо одну переменную, мы просто используем <%= tagline %>. Добавим этот код в наш файл index.ejs:

views/pages/index.ejs
...
<h2>Variable</h2>
<p><%= tagline %></p>
...

Циклический перебор данных в EJS

Для циклического перебора данных мы будем использовать .forEach. Добавим этот код в наш файл view:

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

Теперь мы можем видеть в браузере новую информацию, которую мы добавили!

node-ejs-templating-rendered

Передача данных в частичный шаблон в EJS

Частичный шаблон EJS имеет доступ к тем же данным, что и родительское представление. Будьте внимательны: если вы ссылаетесь на переменную в частичном шаблоне, ее нужно определить в каждом представлении, использующем частичный шаблон, или приложение выдаст ошибку.

Также вы можете определять и передавать переменные в частичный шаблон EJS, используя синтаксис include:

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 позволяет быстро создавать приложения, когда нам не нужно ничего сложного. С помощью частичных шаблонов и возможности легко передавать переменные в представления мы можем быстро создавать отличные приложения.

Дополнительную справку по EJS можно найти в официальной документации здесь.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Chris Sev

author

Sr Developer Advocate

Founder of scotch.io. Slapping the keyboard until good things happen.


Default avatar
Community Builder

Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.


Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!