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