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