Table of Contents
Введение
При быстром создании приложений 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 и настроим в нем наш проект.
[label package.json]
{
"name": "node-ejs",
"main": "server.js",
"dependencies": {
"ejs": "^3.1.5",
"express": "^4.17.1"
}
}
Нам потребуются только Express и EJS. Теперь нам нужно установить зависимости, которые мы только что определили. Вперед:
[environment local]
npm install
Установив все зависимости, настроим приложение для использования EJS и настроим маршруты для двух страниц, которые нам нужны: страницы индекса (полная ширина) и информационной страницы (боковая панель). Мы будем делать это в файле server.js.
[label 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.
Запуск сервера
Запустите сервер с помощью следующей команды:
[environment local]
node server.js
Теперь мы можем открыть наше приложение в браузере, используя адреса http://localhost:8080 и http://localhost:8080/about. Мы настроили наше приложение, и нам нужно определить файлы представления и посмотреть, как EJS работает с ними.
Создание частичных элементов EJS
Как и в других приложениях здесь будет много кода, используемого многократно. Мы назовем такие элементы частичными шаблонами и определим три файла, которые будут использоваться везде на нашем сайте: head.ejs, header.ejs и footer.ejs. Создадим эти файлы.
[label 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>
[label 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>
[label 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.
- Путь к частичному шаблону является относительным по отношению к текущему файлу.
[label 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
Для информационной страницы мы также добавим загрузочную боковую панель, чтобы продемонстрировать, как частичные шаблоны можно структурировать для использования с разными шаблонами и страницами.
[label 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('/').
[label server.js]
// index page
app.get('/', function(req, res) {
var mascots = [
{ name: 'Sammy', organization: "the cloud provider", 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:
[label views/pages/index.ejs]
...
<h2>Variable</h2>
<p><%= tagline %></p>
...
Циклический перебор данных в EJS
Для циклического перебора данных мы будем использовать .forEach. Добавим этот код в наш файл view:
[label 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:
[label views/pages/about.ejs]
...
<header>
<%- include('../partials/header', <^>{variant:'compact'}<^>); %>
</header>
...
При этом нужно с осторожностью предполагать, что переменная определена.
Если вы хотите использовать в частичном шаблоне ссылку на переменную, которая может быть не определена, и присвоить ей значение по умолчанию, вы можете сделать это так:
[label views/partials/header.ejs]
...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...
В строке выше код EJS выполняет рендеринг значения variant, если оно определено, и default, если не определено.
Заключение
EJS позволяет быстро создавать приложения, когда нам не нужно ничего сложного. С помощью частичных шаблонов и возможности легко передавать переменные в представления мы можем быстро создавать отличные приложения.
Дополнительную справку по EJS можно найти в официальной документации здесь.
