Kako aplikacija raste u složenosti, tako rastu i njezine potrebe. U nekom trenutku posluživanje statičkih HTML datoteka može ometati napredak ili kočiti funkcionalnost aplikacije. Umjesto toga, htjet ćete posluživati dinamički sadržaj, zadatak koji omogućuju strojevi za izradu predložaka poput Handlebarsa.
Handlebars je minimalan mehanizam za izradu šablona bez logike za NodeJS. To je proširenje motora predložaka brkova. Budući da je to mehanizam bez logike, možete ga koristiti za striktno odvajanje prezentacije od temeljnog koda.
Handlebars ima veliku podršku kao mehanizam za izradu predložaka iz okvira NestJS.
Što je mehanizam za izradu predložaka?
Program za izradu predložaka je alat koji kombinira HTML oznake i programski jezik za stvaranje HTML predloška s minimalnim kodom.
Stroj predloška tijekom izvođenja ubacuje podatke u HTML predložak kako bi prikazao konačni prikaz u pregledniku.
Možda će vam biti komplicirano postaviti mehanizam za izradu predložaka kao što je Handlebars, budući da uključuje mnogo koraka. Međutim,
okvir poslužitelja Express koji NestJS koristi prema zadanim postavkama ima izvrsnu podršku za Handlebars.Korak 1: Generirajte NestJS aplikaciju
Pokrenite sljedeću naredbu za skelu nove Nest aplikacije:
gnijezdo novo <naziv vaše aplikacije>
Korak 2: Instalirajte upravljač
Pokrenite sljedeću naredbu za instalaciju upravljača pomoću npm upravitelj paketa:
npm instalirajte express-handlebars@^5.3.0@vrste/express-handlebars@^5.3.0
Korak 3: Konfigurirajte ekspresnu instancu
Dođite do svog glavni.ts datoteku i uvoz Aplikacija NestExpress iz @nestjs/platform-express.
Dodijelite NestExpressApplication kao generički tip stvoriti metoda.
ovako:
konst aplikacija = čekati NestFactory.create(AppModule)
Prosljeđivanje NestExpressApplication na aplikacija objekt mu daje pristup metodama koje uključuju ExpressJS. Te će vam metode trebati za konfiguriranje određenih svojstava upravljača.
Korak 4: Konfigurirajte upravljače
Prvo ćete morati navesti mjesta na kojima će vaša aplikacija pronaći HTML i druge statične datoteke (listove stilova, slike itd.). Možete pohraniti svoje HTML datoteke u "pogleda" i druge statične datoteke u "javnost”, respektivno.
Da biste odredili lokacije, započnite s uvozom pridružiti iz staza. Zatim, unutar bootstrap funkciju, postavite mjesto za stilove.
ovako:
app.useStaticAssets (join (__dirname, '..', 'javnost'))
Funkcija spajanja uzima proizvoljan broj niz argumente, spaja ih i normalizira dobiveni put. __dirname vraća putanju mape u kojoj je glavni.ts datoteka se nalazi.
Zatim postavite mjesto za svoje HTML datoteke, ovako:
app.setBaseViewsDir (join (__dirname, '..', 'pogleda'));
Zatim uvezite upravljače u svoj glavni.ts datoteka:
uvoz * kao hbs iz 'express-upravljač';
Trebat će vam hbs import za konfiguriranje svojstava upravljača kao što je naziv proširenja itd.
Zadani naziv ekstenzije datoteke za Handlebars je .upravljači.
Naziv ovog proširenja je dugačak, ali ga možete konfigurirati pomoću app.motor poziv. app.motor izvorna je funkcija omotača oko ekspresni.motor metoda. Potrebna su dva argumenta: ekst i funkciju povratnog poziva. Vidite Ekspresna dokumentacija na app.motor da saznate više o tome.
Poziv app.engine(), a kao prvi argument proslijedite niz 'hbs'. Zatim, kao drugi argument, pozovite funkciju hbs i proslijedite konfiguracijski objekt sa svojstvom extname postavljen 'hbs'. Ova postavka mijenja naziv proširenja iz .handlebars u .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
Na kraju, postavite mehanizam prikaza na Upravljače ovako:
app.setViewEngine('hbs');
Korak 5: Stvorite mape
U korijenskom direktoriju vašeg projekta stvorite dvije nove mape. Koristit ćete prvi, javnost, za pohranjivanje tablica stilova za vašu aplikaciju. U pogleda, pohranit ćete sve svoje HTML datoteke.
Ovime je završeno postavljanje vašeg razvojnog okruženja. U sljedećem odjeljku imat ćete pregled sintakse Handlebars i njezine upotrebe u NestJS aplikaciji.
Sintaksa upravljača
Ovaj odjeljak će pokriti većinu sintakse upravljača koja vam je potrebna za dinamičko posluživanje datoteka.
Pomagači
Pomoćnici su funkcije koje transformiraju izlaz, ponavljaju podatke i prikazuju uvjetni izlaz.
Handlebars nudi dvije vrste pomoćnika (Block i Built-in) i možete izraditi prilagođene pomoćnike koji odgovaraju vašim potrebama.
Pomoćnika označavate tako da ga stavite u dvostruke vitičaste zagrade. Prefiks imenu dodajte hash (#) za početnu pomoćnu oznaku i kosu crtu (/) za završnu oznaku.
Na primjer:
{{!-- ako vrijednost je pravi, div će se prikazati drugo, neće --}}
{{#if vrijednost}}
<div>Vrijednost je prikazana</div>
{{/ako}}
Ako izradite prilagođenog pomoćnika, morate ga registrirati u svom hbs konfiguracijski objekt u vašem glavni.ts datoteku prije nego što je možete koristiti u svojoj aplikaciji.
// glavni.ts
uvoz {customHelper} iz './helpers/hbs.helpers';
// Unutar bootstrap funkcije
app.engine('hbs', hbs({ extname: 'hbs', pomagači: { customHelper } }));
Izrazi
Izrazi su jedinica predloška upravljača. Vaša upotreba izraza varira ovisno o složenosti zadatka. Možete ih koristiti same u predlošku, proslijediti ih kao unos u pomoćnike i više.
Označite izraze dvostrukim vitičastim zagradama, na primjer:
<h1>{{poruka}}</h1>
Djelomični
Djelomično se odnosi na unaprijed spremljeni dio HTML-a jer se pojavljuje u nekoliko HTML datoteka. Na primjer, navigacijske trake i podnožja. Taj sadržaj možete pohraniti u jednu datoteku i uključiti ga po potrebi.
Kao i kod statičkih i HTML datoteka, također ćete morati postaviti djelomični direktorij u svom app.motor konfiguracijski objekt.
Registrirajte svoj djelomični imenik dodavanjem sljedećeg koda u svoj konfiguracijski objekt:
// glavni.ts
partialsDir: pridruži se (__dirname, '..', 'pogledi/djelomice'),
Možete pristupiti djelomičnom pomoću sintakse djelomičnog poziva. U dvostruke vitičaste zagrade unesite simbol veće od (>) nakon kojeg slijedi naziv dijela.
Na primjer:
{{> nameOfPartial}}
Izgledi
Raspored upravljača je HTML stranica koja se koristi za postavljanje temeljnih metapodataka ili opće strukture za druge HTML stranice u aplikaciji. Djeluje kao spremnik s rezerviranim mjestom u koji možete ubaciti dinamičke podatke.
Na primjer:
<!DOCTYPE html>
<html lang="hr">
<glavu>
<meta charset="UTF-8">
<meta http-ekviv="X-UA-kompatibilan" sadržaj="IE=rub">
<meta naziv="prozor za prikaz" sadržaj="širina=širina-uređaja, početna skala=1,0">
<titula>Izrada šablona u NestJS-u s upravljačima</title>
</head>
<tijelo>
<Zaglavlje>
{{!-- Navigacijska traka djelomično --}}
{{>navigacijska traka}}
</header>
<div>
{{!-- Body Placeholder --}}
{{{tijelo}}}
</div>
{{!-- Djelomično podnožje --}}
{{>podnožje}}
</body>
</html>
Kada pokrenete svoj kod, Handlebars preuzima sadržaj .hbs datoteku koju želite prikazati i ubacuje ih u tijelo rezerviranog mjesta. Zatim prikazuje rezultat kao konačnu HTML stranicu.
Morat ćete registrirati svoj imenik izgleda u svom app.motor konfiguracijski objekt i postavite zadanu datoteku izgleda. Zadana datoteka izgleda je datoteka izgleda koju Handlebars koristi ako ne definirate određeni izgled.
Dodajte sljedeći kod svom konfiguracijskom objektu da deklarirate zadani izgled i registrirate direktorij izgleda:
zadani izgled: 'Naziv datoteke izgleda',
layoutsDir: pridruži se (__dirname, '..', 'prikazi/izgledi'),
Iscrtavanje .hbs datoteke
U svoju datoteku kontrolera uvezite Res dekorater iz @nestjs/zajedničko i Odgovor iz izraziti.
Zatim u svom rukovatelju rutom proslijedite argument, res. Dodijelite vrstu odgovora resu i označite ga Res dekoratorom. Res dekorator otkriva Expressove izvorne metode rukovanja odgovorom i onemogućuje standardni pristup NestJS.
Zatim pozovite metodu renderiranja na res i proslijedite naziv datoteke koju želite renderirati kao prvi argument. Za drugi argument proslijedite objekt koji sadrži naziv izgleda i zamjensku vrijednost za izraz.
Upravljač će koristiti zadani raspored postavljen u vašem app.motor konfiguracijski objekt ako ne date izgled.
@Dobiti()
getHello(@Rez() res: Odgovor){
vrati res.render('Naziv datoteke', { izgled: 'naziv rasporeda', poruka: 'Pozdrav svijete' });
}
Alternative za upravljač
Handlebars je izvrstan alat za izradu predložaka s mnogo korisnih značajki poput pomoćnika i izgleda. Ipak, ovisno o vašim potrebama, možete odabrati alternativu kao što je EJS (Embedded JavaScript), Pug ili Moustache.
