Отображение HTML-файлов в браузере
Ранее для отображения файлов использовался метод send(). Теперь будем использовать sendFile(). Для этого необходимо указать полный путь к файлу. Например, для главной страницы (index.html):
res.sendFile(path.join(__dirname, 'index.html'));Аналогично для страницы «About»:
res.sendFile(path.join(__dirname, 'about.html'));Запустив сервер, мы увидим, что HTML-файлы отображаются корректно.
Работа с параметрами и шаблонизатор EJS
Рассмотрим ситуацию, когда страница содержит динамически изменяющиеся параметры (например, ID статьи). Для обработки таких ситуаций необходим шаблонизатор. В Express.js можно использовать различные шаблонизаторы, например, EJS.
EJS — отдельный пакет, который нужно установить:
npm install ejsEJS позволяет передавать данные в шаблоны с расширением .ejs. В этих шаблонах можно использовать обычный HTML и специальные конструкции, например, <%= variable %> для вывода переменных, а также встраивать логику JavaScript (циклы, условные операторы).
Настройка EJS в Express.js
Для использования EJS в качестве движка шаблонов, необходимо указать его в Express.js:
app.set('view engine', 'ejs');По умолчанию EJS ищет шаблоны в папке views. Создадим эту папку и поместим в нее файл news.ejs (шаблон для страницы новостей). Этот файл содержит обычный HTML-код.
Использование метода render()
Вместо sendFile(), для отображения шаблона EJS, используется метод render(). Он принимает имя файла шаблона (без расширения) из папки views и объект с данными для передачи в шаблон.
Например, для отображения news.ejs с параметром id:
res.render('news', { newsId: req.params.id });В шаблоне news.ejs мы можем вывести значение newsId так:
<p>Новостная страница с ID: <%= newsId %></p>Запустив сервер и перейдя на /news/:id, мы увидим выведенный ID.
Передача данных в шаблоны
Можно передавать различные типы данных: числа, строки, объекты, массивы. Например:
res.render('news', { newsId: req.params.id, newsTitle: 'Заголовок новости', someObject: { title: 'Заголовок', id: 432 }, programs: [1, 2, 3, 4, 5] });В шаблоне доступ к этим параметрам осуществляется аналогично:
<p><%= newsId %></p>
<p><%= newsTitle %></p>
<p><%= someObject.title %></p>
<p><%= someObject.id %></p>
<ul>
<% programs.forEach(function(item) { %>
<li><%= item %></li>
<% }); %>
</ul>Это отобразит данные в HTML-разметке.
В этом уроке мы освоили работу с шаблонизатором EJS в Express.js, научились передавать различные типы данных в шаблоны и использовать их в HTML-разметке.