По мере усложнения приложения растут и его потребности. В какой-то момент обслуживание статических HTML-файлов может помешать прогрессу или ограничить функциональность приложения. Вместо этого вы захотите обслуживать динамический контент, что возможно с помощью шаблонизаторов, таких как Handlebars.
Handlebars — это минимальный механизм шаблонов без логики для NodeJS. Это расширение шаблонизатора усов. Поскольку это движок без логики, вы можете использовать его, чтобы строго отделить представление от базового кода.
Handlebars имеет отличную поддержку в качестве механизма шаблонов из среды NestJS.
Что такое шаблонизатор?
Механизм шаблонов — это инструмент, который объединяет теги HTML и язык программирования для создания шаблона HTML с минимальным кодом.
Механизм шаблонов во время выполнения вводит данные в шаблон HTML, чтобы отобразить окончательный вид в браузере.
Вам может показаться сложным настроить механизм шаблонов, такой как Handlebars, поскольку он включает в себя много шагов. Однако,
инфраструктура экспресс-сервера который NestJS использует по умолчанию, имеет отличную поддержку Handlebars.Шаг 1: Создайте приложение NestJS
Выполните следующую команду, чтобы создать шаблон нового приложения Nest:
гнездо новое <название вашего приложения>
Шаг 2: Установите руль
Запустите следующую команду, чтобы установить Handlebars, используя менеджер пакетов npm:
npm установить экспресс-рули@^5.3.0@типы/express-handlebars@^5.3.0
Шаг 3. Настройте экспресс-экземпляр
Перейдите к своему main.ts файл и импорт NestExpressПриложение из @nestjs/платформа-экспресс.
Назначьте NestExpressApplication в качестве универсального типа для Создайте метод.
Вот так:
константа приложение = Ждите NestFactory.create(модуль приложения)
Передача NestExpressApplication в приложение объект предоставляет ему доступ к эксклюзивным методам ExpressJS. Эти методы понадобятся вам для настройки конкретных свойств Handlebars.
Шаг 4: Настройте руль
Во-первых, вам нужно указать места, где ваше приложение будет находить HTML и другие статические файлы (таблицы стилей, изображения и т. д.). Вы можете хранить свои файлы HTML в папке «Просмотры", и другие статические файлы в папке "публичный», соответственно.
Чтобы указать местоположения, начните с импорта присоединиться из дорожка. Затем, внутри начальная загрузка функция, задайте местоположение для стилей.
Вот так:
app.useStaticAssets (join (__dirname, '..', 'публичный'))
Функция соединения принимает произвольное количество нить аргументы, объединяет их и нормализует результирующий путь. __имя_каталога возвращает путь к папке, в которой main.ts файл находится.
Затем установите местоположение для ваших HTML-файлов, например:
app.setBaseViewsDir (присоединиться (__dirname, '..', 'Просмотры'));
Затем импортируйте Handlebars в свой main.ts файл:
импорт * в качестве хбс из 'экспресс-рули';
Вам понадобится хбс import для настройки свойств Handlebars, таких как имя расширения и т. д.
Имя расширения файла по умолчанию для Handlebars: .руль.
Это имя расширения длинное, но вы можете настроить его с помощью app.engine вызов. app.engine является встроенной функцией-оболочкой вокруг экспресс.двигатель метод. Он принимает два аргумента: доб. и функция обратного вызова. См. Экспресс-документация по app.engine чтобы узнать больше об этом.
Вызов приложение.двигатель(), и в качестве первого аргумента передайте строку 'hbs'. Затем в качестве второго аргумента вызовите функцию hbs и передайте объект конфигурации со свойством добавочное имя установлен в «хбс». Этот параметр изменяет имя расширения с .handlebars на .hbs.
app.engine('хбс', hbs({ доб.имя: 'хбс' }));
Наконец, установите механизм просмотра на Handlebars следующим образом:
приложение.setViewEngine('хбс');
Шаг 5: Создайте папки
В корневом каталоге вашего проекта создайте две новые папки. Вы будете использовать первый, публичный, чтобы хранить таблицы стилей для вашего приложения. В Просмотры, вы будете хранить все свои файлы HTML.
На этом настройка среды разработки завершена. В следующем разделе вы получите обзор синтаксиса Handlebars и его использования в приложении NestJS.
Синтаксис руля
В этом разделе будет рассмотрена основная часть синтаксиса handlebars, необходимого для динамического обслуживания ваших файлов.
Помощники
Помощники — это функции, которые преобразуют выходные данные, перебирают данные и отображают условный вывод.
Handlebars предоставляет два типа помощников (блочный и встроенный), и вы можете создавать собственные помощники в соответствии с вашими потребностями.
Вы обозначаете помощника, заключая его в двойные фигурные скобки. Поставьте перед его именем решетку (#) для открывающего вспомогательного тега и косую черту (/) для закрывающего тега.
Например:
{{!-- если значение истинный, div будет отображаться еще, не будет --}}
{{#если значение}}
<див>Значение было передано</div>
{{/если}}
Если вы создаете собственный помощник, вы должны зарегистрировать его в своем хбс объект конфигурации в вашем main.ts файл, прежде чем вы сможете использовать его в своем приложении.
// main.ts
импорт { пользовательский помощник } из './помощники/hbs.helpers';
// Внутри функции начальной загрузки
app.engine('хбс', hbs({ доб.имя: 'хбс', помощники: { customHelper } }));
Выражения
Выражения являются единицей шаблона handlebars. Использование выражений зависит от сложности задачи. Вы можете использовать их отдельно в шаблоне, передавать их в качестве входных данных в помощники и многое другое.
Обозначьте выражения двойными фигурными скобками, например:
<h1>{{сообщение}}</h1>
Частицы
Частичный относится к предварительно сохраненному фрагменту HTML, поскольку он присутствует в нескольких файлах HTML. Например, панели навигации и нижние колонтитулы. Вы можете хранить этот контент в одном файле и включать его при необходимости.
Как и в случае со статическими файлами и файлами HTML, вам также необходимо установить каталог partials в вашем app.engine объект конфигурации.
Зарегистрируйте свой каталог partials, добавив следующий код в свой объект конфигурации:
// main.ts
partialsDir: присоединиться (__имя_каталога, '..', 'просмотры/частицы'),
Вы можете получить доступ к частичному, используя синтаксис частичного вызова. В двойных фигурных скобках введите символ «больше» (>), за которым следует имя партиала.
Например:
{{> nameOfPartial}}
Макеты
Макет Handlebars — это HTML-страница, используемая для установки базовых метаданных или общей структуры для других HTML-страниц в приложении. Он действует как контейнер с заполнителем, в который вы можете вводить динамические данные.
Например:
<!ДОКТИП HTML>
<html язык="en">
<глава>
<мета кодировка ="UTF-8">
<мета http-эквивалент="X-UA-совместимый" содержание ="IE=край">
<мета имя ="окно просмотра" содержание ="ширина = ширина устройства, начальный масштаб = 1,0">
<заглавие>Шаблоны в NestJS с Handlebars</title>
</head>
<тело>
<заголовок>
{{!-- Частичная панель навигации --}}
{{>панель навигации}}
</header>
<див>
{{!-- Заполнитель тела --}}
{{{тело}}}
</div>
{{!-- Частично нижний колонтитул --}}
{{>нижний колонтитул}}
</body>
</html>
Когда вы запускаете свой код, Handlebars берет содержимое файла .hbs файл, который вы хотите визуализировать, и вставляет их в тело заполнитель. Затем он отображает результат как окончательную HTML-страницу.
Вам необходимо зарегистрировать каталог макетов в вашем app.engine объект конфигурации и установить файл макета по умолчанию. Файл макета по умолчанию — это файл макета, который Handlebars использует, если вы не определили конкретный макет.
Добавьте следующий код в свой объект конфигурации, чтобы объявить макет по умолчанию и зарегистрировать каталог макетов:
макет по умолчанию: 'Имя файла макета',
layoutsDir: присоединиться (__dirname, '..', 'виды/макеты'),
Рендеринг файла .hbs
В файле вашего контроллера импортируйте Рез декоратор из @nestjs/общий а также Ответ из выражать.
Затем в обработчике маршрута передайте аргумент, разрешение. Назначьте res тип Response и аннотируйте его с помощью декоратора Res. Декоратор Res предоставляет собственные методы обработки ответов Express и отключает стандартный подход NestJS.
Затем вызовите метод рендеринга для res и передайте имя файла, который вы хотите отобразить, в качестве первого аргумента. В качестве второго аргумента передайте объект, содержащий имя макета и замещающее значение для выражения.
Рулевые панели будут использовать макет по умолчанию, установленный в вашем app.engine объект конфигурации, если вы не предоставляете макет.
@Получить()
получитьпривет(@Res() разрешение: Ответ){
вернуть рез.рендер('Имя файла', { макет: 'название макета', сообщение: 'Привет, мир' });
}
Альтернативы рулям
Handlebars — отличный инструмент для создания шаблонов со множеством удобных функций, таких как помощники и макеты. Тем не менее, в зависимости от ваших потребностей, вы можете выбрать альтернативу, такую как EJS (встроенный JavaScript), Pug или Mustache.
