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

Введение

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

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

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

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

Получите код: Репозиторий git с полным кодом демонстрации можно найти на GitHub здесь.

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

Это файлы, которые нам требуются для нашего приложения. Мы создадим шаблоны в папке 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. Теперь нам нужно установить зависимости, которые мы только что определили. Вперед:

  • 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.

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

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

  • 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 можно найти в официальной документации здесь.