Автор оригинала: Janith Kasun.
Вступление
В этой статье мы посмотрим, как использовать двигатель шаблона руль с Node.js и Express. Мы осмотрим, какие шаблонные двигатели и как можно использовать руль для создания Сервер сторона визуализации (SSR) веб-приложения.
Мы также обсудим, как настроить руль с помощью Express.js Рамки и как использовать встроенные помощники для создания динамических страниц. Наконец, мы посмотрим, как разработать пользовательский помощник, когда это необходимо.
Что такое шаблон двигатель?
Вернувшись в 90-х, когда Интернет был введен в мир, он в основном использовался для научных целей, таких как публикация исследовательских работ, а также в качестве канала связи между университетами и учеными. Большинство веб-страниц потом были статическими. Статическая веб-страница одинакова для каждого пользователя и не меняется на пользователя. Если что-то должно быть изменено на странице, это было бы сделано вручную.
В современном мире вещи гораздо более интерактивные и адаптированные к каждому пользователю. Сегодня почти у всех есть доступ к Интернету. Большинство веб-приложений сегодня динамичны. Например, на Facebook вы и я увижу очень разные новости, когда вошли в систему. Для каждого человека страница будет следовать тому же шаблону (то есть последовательные сообщения с именами пользователями над ними), но содержимое будет другим.
Это работа шаблонного двигателя – шаблон для новостной подачи определен, а затем на основе текущего пользователя и запроса к базе данных шаблон заполнен полученным контентом.
Мы можем использовать шаблонные двигатели как в Backend, так и в интерфейсе. Если мы используем шаблон двигатель на бэкэнде, чтобы генерировать HTML, мы называем это Серверный рендеринг (SSR).
Руль
Ручки популярны как для задней и передней шаблоны. Например, популярные интерфейсные рамки Эмбер Использует ручки в качестве шаблонного двигателя.
Ручки – это расширение Усы Язык шаблона, который в основном сосредоточен на простоте и минимальной шаблоне.
Использование руль с Node.js
Чтобы начать работу, создайте пустую папку, откройте командную строку в этой папке, а затем запустить NPM init -y Чтобы создать пустой проект Node.js с настройками по умолчанию.
Перед началом необходимо установить необходимые библиотеки Node.js. Вы можете установить Экспресс и экспресс-руль Модули бегом:
$ npm install --save express express-handlebars
Примечание : При использовании сервера руль, скорее всего, вы, вероятно, используете модуль помощника, как экспресс-руль Это объединяет руки с вашим веб-структурой. В этой статье мы будем сосредоточиться в основном на синтаксисе шаблонов, именно поэтому мы используем экспресс-руль , но в случае, если вы обрабатываете шаблон Компиляция и рендеринг Сам, вы захотите проверить Ссылка API компиляции также.
Затем давайте воссоздать структуру каталогов по умолчанию по умолчанию. Виды Папка содержит все шаблоны руль:
.
├── app.js
└── views
├── home.hbs
└── layouts
└── main.hbs
Макеты папка внутри Виды Папка будет содержать макеты или шаблонные обертки. Эти макеты будут содержать структуру HTML, листы стилей и скрипты, которые разделяются между шаблонами.
main.hbs Файл – основной макет. Home.hbs Файл является примером шаблона руль, которые мы собираемся создавать.
Мы добавим больше шаблонов и папок, сколько мы продолжаем.
В нашем примере мы будем использовать один скрипт, чтобы сохранить это просто. Давайте импортируем необходимые библиотеки в нашем app.js файл:
const express = require('express');
const exphbs = require('express-handlebars');
Затем давайте создадим приложение Express:
const app = express();
Теперь мы можем настроить экспресс-руль Как наш мотор зрения:
app.engine('hbs', exphbs({
defaultLayout: 'main',
extname: '.hbs'
}));
app.set('view engine', 'hbs');
По умолчанию расширение для шаблонов руль – .handlebars Отказ Но в настройках здесь мы изменили его на .hbs через ExtName Флаг, потому что он короче.
Давайте включаем Bootstrap Сценарии и стили в main.hbs макет:
Book Face
{{{body}}}
И теперь, давайте изменим наше Home.hbs включить сообщение:
Hello World from Handlebars
Чтобы иметь возможность достичь этой страницы, нам нужно настроить обработчик запроса. Давайте установим его на корневом пути:
app.get('/', (req, res) => {
res.render('home');
});
Наконец, нам просто нужно начать слушать порта для запросов:
app.listen(3000, () => {
console.log('The web server has started on port 3000');
});
Мы можем запустить приложение с Узел App.js В консоли, однако, мы также можем использовать инструмент, похожий на Номемон Отказ С помощью Nodemon нам не нужно перезапустить сервер каждый раз, когда мы изменим – когда мы меняем код, Nodemon будет обновлять сервер.
Давайте установим это:
$ npm i -g nodemon
И запуск приложения с Neademon выполняется через:
$ nodemon app.js
Давайте посетим наше приложение через браузер:
Со всем на месте, давайте рассмотрим некоторые функции руль.
Особенности языка рулей
Чтобы продемонстрировать некоторые функции руль, мы будем наращивать канал социальных медиа. Корм будет тянет данные из простого массива, моделируя базу данных.
Корм будет содержать посты с изображениями и комментариями. Если на изображении нет комментариев – a “Будьте первым, кто комментирует это сообщение« Появится сообщение ».
Давайте обновим наше Home.hbs для начала:
Posted by Janith Kasun
- This is supposed to be a comment
- This is supposed to be a comment
Как вы можете видеть в этом шаблоне руль, мы добавили Навкар и а карта с некоторыми жесткими ценностями заполнителя.
Наша страница теперь выглядит так:
Передача параметров к шаблонам
Теперь давайте удалим эти жесткие значения из самой страницы и пропустите их из сценария на страницу. Позже они будут заменены значениями комментариев в массиве:
app.get('/', function (req, res) {
res.render('home', {
post: {
author: 'Janith Kasun',
image: 'https://picsum.photos/500/500',
comments: []
}
});
});
пост Содержит такие поля, как Автор , изображение и Комментарии Отказ Мы можем ссылаться на пост В наших шаблонах руль {{post}} :
Posted by {{post.author}}
- This is suppose to be a comment
- This is suppose to be a comment
Ссылаясь на эти значения с обработчиком, который делает страницу, они вставляются на стороне сервера, и пользователь обслуживается, казалось бы, статический HTML с этими значениями уже присутствующих.
Используя условия
Поскольку у нас есть условная логика, то есть показывая комментарии, если они присутствуют и сообщение, если они не будут, давайте посмотрим, как мы можем использовать условные условные шаблоны:
Posted by {{post.author}}
{{#if post.comments}}{{else}}
{{/if}}
- Be first to comment on this post!
Теперь вы должны увидеть только «Будьте в первую очередь, чтобы комментировать этот пост», отображаемый на вашей странице, поскольку массив комментариев пуст:
#if это встроенный помощник на рулях. Если IF-оператор возвращает правда , блок внутри #if Блок будет отображаться. Если ложь , undefined , null , "" , 0 или [] возвращаются, блок не будет отображаться.
Наш массив пуст ( [] ) Итак, блок не отображается.
#if Принимает только одно состояние, и вы не можете использовать синтаксис сравнения JavaScript ( === ). Если вам нужно использовать несколько условий или дополнительного синтаксиса, вы можете создать переменную в коде и передавать его до шаблона. Кроме того, вы можете определить свой собственный помощник, который мы сделаем в последнем разделе.
Использование петлей
Поскольку пост может содержать несколько комментариев, нам понадобится цикл, чтобы пройти через них все и оказывать их. Давайте сначала заполним наш массив с некоторыми комментариями:
app.get('/', function (req, res) {
res.render('home', {
post: {
author: 'Janith Kasun',
image: 'https://picsum.photos/500/500',
comments: [
'This is the first comment',
'This is the second comment',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec fermentum ligula. Sed vitae erat lectus.'
]
}
});
});
И теперь, в нашем шаблоне, мы будем использовать # это петля, чтобы пройти через них все:
Posted by {{post.author}}
{{#if post.comments}}{{#each post.comments}}
{{else}}- {{this}}
{{/each}}{{/if}}
- Be first to comment on this post
Внутри # это петля, вы можете использовать это ссылаться на элемент, который в текущей итерации. В нашем случае это относится к строке, которая затем отображается:
Если у вас есть массив объектов, вы также можете получить доступ к любому атрибуту этого объекта. Например, если есть массив людей, вы можете просто использовать Это. Немайте Для доступа к Имя поле.
Теперь, давайте изменим наш шаблон параметры, чтобы содержать несколько сообщений:
app.get('/', function (req, res) {
res.render('home', {
posts: [
{
author: 'Janith Kasun',
image: 'https://picsum.photos/500/500',
comments: [
'This is the first comment',
'This is the second comment',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec fermentum ligula. Sed vitae erat lectus.'
]
},
{
author: 'John Doe',
image: 'https://picsum.photos/500/500?2',
comments: [
]
}
]
});
});
Теперь мы можем также поставить # это Итерации через сообщения:
{{#each posts}}{{/each}}
Posted by {{this.author}}
{{#if this.comments}}{{#each this.comments}}
{{else}}- {{this}}
{{/each}}{{/if}}
- Be first to comment on this post
Используя частичный
В значительной степени все веб-страницы содержат разные разделы. На базовом уровне это Заголовок , Тело и Нижний колонтитул разделы. Так как заголовок и нижний колонтитул обычно разделяются между множеством страниц, имеющие это в Все Веб-страницы скоро станут чрезвычайно раздражающими и просто избыточными.
К счастью, мы можем использовать ручки для разделения этих разделов в шаблонах и просто включить Эти шаблоны как «частичные» на сами страницы.
В нашем случае, так как у нас нет нижнего колонтитула, давайте сделаем Header.hbs и а posts.hbs Файл в частичные Каталог:
.
├── app.js
└── views
├── home.hbs
├── layouts
| └── main.hbs
└── paritials
└── header.hbs
└── posts.hbs
Затем мы переместим код заголовка в Header.hbs файл:
И код подачи в posts.hbs файл:
{{#each posts}}{{/each}}Posted by {{this.author}}
{{#if this.comments}}{{#each this.comments}}
{{else}}- {{this}}
{{/each}}{{/if}}
- Be first to comment on this post
И теперь, мы можем включить их в Home.hbs файл:
{{>header}}
{{>posts posts=posts}}
Пользователь не увидит никакой разницы, но наш Home.hbs Файл гораздо чище. Это становится супер полезным, когда у вас есть сложные веб-страницы.
Здесь мы просто включили Header.hbs файл и передал Сообщения Параметр к Сообщения поле posts.hbs файл.
Что это делает, это проходит Сообщения от нашего обработчика до Сообщения Параметр в posts.hbs Файл подкачки.
Создание пользовательского помощника
Как вы можете увидеть на странице, у нас есть один комментарий, который потребляет две строки. Давайте создадим пользовательский помощник, чтобы обобщить этот текст.
Для этого в конфигурации руль мы можем определить наши функции помощника. В нашем случае мы будем порежать комментарии к 64 символам:
app.engine('hbs', exphbs({
defaultLayout: 'main',
extname: '.hbs',
helpers: {
getShortComment(comment) {
if (comment.length < 64) {
return comment;
}
return comment.substring(0, 61) + '...';
}
}
}));
Теперь давайте воспользуемся этим помощником в нашем posts.hbs Шаблон для суммирования комментариев:
{{#each posts}}{{/each}}Posted by {{this.author}}
{{#if this.comments}}{{#each this.comments}}
{{else}}- {{getShortComment this}}
{{/each}}{{/if}}
- Be first to comment on this post
Конечно, достаточно комментарии на нашей странице сейчас:
Заключение
В этой статье мы рассмотрели основы руль – шаблон для Node.js и Front-End JavaScript. Используя руль, мы можем создавать динамические веб-страницы, которые представляют на стороне сервера или на стороне клиента. Использование условных руль, циклов, частичных и пользовательских функций помощника, наши веб-страницы становятся более чем просто статическими HTML.
Код также доступен на Github , по-прежнему. Вы также можете найти больше информации на рулях в их Официальная веб-страница Отказ