Меню

Шаблонные движки для Express Nodejs

04.07.2018 - Back-end, NodeJS

Templating engines

В ходе создания обработки запросов, мы выводили ответ, в теле respone. Иногда нам нужно вывести информацию клиенту. Для express существует различные шаблонные движки. Наиболее популярные — pug, mustache и ejs. Каждый движок имеет свой синтаксис для генерации динамического HTML и передачи его клиенту. Рассмотрим, как использовать pug для генерации динамического HTML и передачи его клиенту. Для начала давайте установим его.

npm i pug

Теперь перейдем в наш index.js. Нам нужно указать view движок для нашего приложения.
Сделаем это с помощью команды app.set().

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

Когда мы это установим, то внутри express подгрузит этот модуль. Нам не нужно его затребовать. Есть еще одна настройка, необязательная, опциональная. Только если вы хотите переписать путь к шаблонам. Устанавливается с помощью app.set('views'), а вторым аргументом передается путь, где мы будем хранить шаблоны. По умолчанию этот путь — ./views. Это означает что мы будем складывать все свои шаблоны сюда. Теперь добавим у себя эту папку и добавим туда файл — index.pug.

app.set('views', './views');

В паге, мы можем определить наш шаблон, используя следующий синтакс.

html
    head
        title= title
    body
        h1= message

Теперь посмотрим, как нам конвертировать это в HTML и вернуть клиенту. Ранее мы определяли роут к корню приложения. Ранее мы отправляли с него res.send("Hello world"). Теперь вместо метода res, мы воспользуемся методом render, где первым аргументом мы передаем имя нашего шаблона. В нашем случае index, так как такое название имеет наш файл. Вторым аргументом мы передаем объект. Этот объект содержит все значения параметров, которые мы указали в шаблоне, такие как title и message. И это всё что нам нужно сделать.

app.get('/', (req, res) => {
    res.render('index', {
        title: "My express app",
        message: "Hello"
    });
});
Метки: , , , , ,

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *