Node.js: Шаблонизация и вывод HTML

Отправка HTML-файлов вместо текстовой информации

Ранее мы отображали только текстовую информацию. Теперь будем отображать полноценные HTML-файлы.

Создадим HTML-файл index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Express</title>
</head>
<body>
  <h1>Главная страница</h1>
</body>
</html>

Заменим метод send на sendFile для отображения index.html:

res.sendFile(__dirname + '/index.html');

__dirname — константа Node.js, возвращающая полный путь к текущей папке.

После перезапуска сервера возникнет ошибка из-за отсутствия полного пути к файлу.

Использование шаблонизатора EJS

Вместо обычных HTML-файлов будем использовать шаблонизатор EJS. Шаблонизаторы позволяют сделать HTML-файлы более функциональными: передавать данные, обрабатывать их, использовать условные операторы и циклы.

Установка EJS

Установим EJS с помощью npm:

npm install ejs

Затем установим EJS в качестве движка шаблонов:

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

Для отображения файлов будем использовать метод render:

res.render('index');

Метод render принимает только имя файла без расширения.

Создание папки views и файлов шаблонов

EJS по умолчанию ищет шаблоны в папке views.

Создадим папку views.
Переместим index.html в папку views и переименуем его в index.ejs. Файлы EJS должны иметь расширение .ejs.

После перезапуска сервера убедимся в корректном отображении файла. Теперь в index.ejs можно использовать возможности EJS.

Передача данных в шаблоны и обработка URL-параметров

Создадим файлы about.ejs и user.ejs в папке views для маршрутов /about и /user/:username.

Передача данных в шаблон user.ejs

Для передачи данных в шаблон используем второй параметр метода render:

res.render('user', { username: req.params.username });

В user.ejs выведем данные с помощью синтаксиса EJS:

<%- username %>

Перезапустим сервер и проверим отображение данных.

Передача дополнительных данных и условные операторы

Добавим в объект данных свойство hobbies:

res.render('user', { data: { username: req.params.username, hobbies: ['футбол', 'теннис', 'баскетбол'] } });

В user.ejs добавим условный оператор, выводящий массив hobbies только для пользователя john (без учёта регистра):

<% if (username.toLowerCase() === 'john') { %>
  <ul>
    <% hobbies.forEach(element => { %>
      <li><%- element %></li>
    <% }); %>
  </ul>
<% } %>

После перезапуска сервера проверим работу условного оператора и цикла.

Подключение шаблонизатора значительно расширяет возможности HTML-файлов, позволяя создавать более сложные и функциональные веб-сайты. В следующих уроках рассмотрим другие возможности EJS.