Rakenduse keerukuse kasvades muutuvad ka selle vajadused. Staatiliste HTML-failide esitamine võib mingil hetkel takistada edenemist või takistada rakenduse funktsionaalsust. Selle asemel võiksite esitada dünaamilist sisu – ülesande, mille võimaldavad mallimootorid, nagu juhtraud.
Juhtraud on NodeJS-i jaoks minimaalne, loogikavaba mallimootor. See on vuntside mallimootori laiendus. Kuna see on loogikavaba mootor, saate seda kasutada esitluse rangeks eraldamiseks aluseks olevast koodist.
Juhtraudadel on NestJS-i raamistiku mallimootorina suurepärane tugi.
Mis on mallimootor?
Mallimootor on tööriist, mis ühendab HTML-i sildid ja programmeerimiskeele, et luua minimaalse koodiga HTML-mall.
Käitusajal olev mallimootor sisestab andmed HTML-malli, et renderdada brauseris lõplik vaade.
Teil võib olla keeruline seadistada mallimootorit, nagu juhtraud, kuna see hõlmab palju samme. Kuid, Expressi serveri raamistik mida NestJS vaikimisi kasutab, toetab suurepäraselt juhtrauda.
1. toiming: looge NestJS-i rakendus
Käivitage järgmine käsk, et luua uus Nesti rakendus:
pesa uus <teie rakenduse nimi>
2. samm: paigaldage juhtraud
Käivitage järgmine käsk juhtraudade installimiseks kasutades npm paketihaldur:
npm install express-handlebars@^5.3.0@tüübid/express-handlebars@^5.3.0
3. samm: konfigureerige kiireksemplar
Navigeerige oma main.ts faili ja importida NestExpressi rakendus alates @nestjs/platform-express.
Määrake NestExpressApplication rakendusele üldise tüübina luua meetod.
Nagu nii:
konst rakendus = ootama NestFactory.create(AppModule)
NestExpressApplication'i edastamine rakendusele rakendus objekt annab talle juurdepääsu ExpressJS-i eksklusiivsetele meetoditele. Neid meetodeid vajate konkreetsete juhtraudade atribuutide konfigureerimiseks.
4. samm: juhtraudade konfigureerimine
Esiteks peate määrama asukohad, kust teie rakendus leiab HTML-i ja muid staatilisi faile (laaditabelid, pildid jne). Saate oma HTML-faile salvestadavaated” kausta ja muud staatilised failidavalik” kausta.
Asukohtade määramiseks alustage importimisest liituda alates tee. Siis sees bootstrap funktsiooni, määrake stiilide asukoht.
Nagu nii:
app.useStaticAssets (join (__dirname, '..', 'avalik'))
Liitmisfunktsioon võtab suvalise arvu string argumendid, ühendab need ja normaliseerib saadud tee. __direktornimi tagastab kausta tee, kus main.ts fail asub.
Järgmisena määrake oma HTML-failide asukoht, näiteks:
app.setBaseViewsDir (liitu (__dirname, '..', 'vaated'));
Järgmisena importige juhtrauad oma seadmesse main.ts fail:
importida * nagu hbs alates "kiirlenks";
Teil on vaja hbs importida, et konfigureerida juhtraua atribuute, nagu laienduse nimi jne.
Juhtraudade faililaiendi vaikenimi on .lenks.
See laienduse nimi on pikk, kuid saate selle konfigureerida käsuga app.engine helistama. app.engine on ümbrisfunktsioon ümber ekspress.mootor meetod. Selleks on vaja kahte argumenti: ext ja tagasihelistamise funktsioon. Vaadake Ekspressdokumentatsioon sisse lülitatud app.engine selle kohta lisateabe saamiseks.
Helistama app.engine(), ja esimese argumendina edastage string "hbs". Seejärel kutsuge teise argumendina funktsioon hbs ja sisestage atribuudiga konfiguratsiooniobjekt välisnimi seatud "hbs". See säte muudab laienduse nime .handlebars nimeks .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
Lõpuks seadke vaatemootor juhtraudadele järgmiselt:
app.setViewEngine('hbs');
5. samm: looge kaustad
Looge oma projekti juurkataloogis kaks uut kausta. Kasutad esimest, avalik, et salvestada oma rakenduse laaditabeleid. sisse vaated, salvestate kõik oma HTML-failid.
See lõpetab teie arenduskeskkonna seadistamise. Järgmises jaotises saate ülevaate juhtraudade süntaksist ja selle kasutamisest NestJS-i rakenduses.
Juhtraua süntaks
See jaotis hõlmab suuremat osa juhtraua süntaksist, mida vajate failide dünaamiliseks teenindamiseks.
Abilised
Abistajad on funktsioonid, mis muudavad väljundit, kordavad andmeid ja renderdavad tingimusliku väljundi.
Juhtraud pakub kahte tüüpi abilisi (blokeeritud ja sisseehitatud) ning saate luua oma vajadustele vastavaid kohandatud abilisi.
Te tähistate abistajat, mähkides selle topelt lokkis traksidega. Lisage selle nime ees räsi (#) avava abimärgendi jaoks ja edasisuunav kaldkriips (/) sulgeva märgendi jaoks.
Näiteks:
{{!-- kui väärtus on tõsi, renderdatakse div muidu, ei tee --}}
{{#if väärtus}}
<div>Väärtus on renderdatud</div>
{{/if}}
Kui loote kohandatud abistaja, peate selle oma kontol registreerima hbs teie konfiguratsiooniobjekt main.ts faili, enne kui saate seda oma rakenduses kasutada.
// main.ts
importida { kohandatud abimees } alates './helpers/hbs.helpers';
// Bootstrap funktsiooni sees
app.engine('hbs', hbs({ extname: 'hbs', abilised: { customHelper } }));
Väljendid
Väljendid on juhtraua malli ühik. Teie väljendite kasutamine sõltub ülesande keerukusest. Saate neid mallis eraldi kasutada, abimeestele sisendina edastada ja palju muud.
Tähistage väljendeid kahekordsete lokkis sulgudega, näiteks:
<h1>{{message}}</h1>
Osalised
Osaline viitab eelnevalt salvestatud HTML-i tükile, kuna see kuvatakse mitmes HTML-failis. Näiteks navigeerimisribad ja jalused. Saate selle sisu salvestada ühte faili ja vajadusel lisada.
Nagu staatiliste ja HTML-failide puhul, peate ka oma kataloogis määrama osalise kataloogi app.engine konfiguratsiooniobjekt.
Registreerige oma osaline kataloog, lisades oma konfiguratsiooniobjektile järgmise koodi:
// main.ts
partialsDir: liitu (__dirname, '..', 'vaated/osalised'),
Osalisele kõnele pääsete juurde osalise kõne süntaksi abil. Sisestage topeltkõveratesse sulgudesse suurem kui sümbol (>), millele järgneb osaosa nimi.
Näiteks:
{{> nameOfPartial}}
Paigutused
Juhtraudade paigutus on HTML-leht, mida kasutatakse rakenduse teiste HTML-lehtede aluseks olevate metaandmete või üldise struktuuri määramiseks. See toimib kohahoidjaga konteinerina, kuhu saate dünaamilisi andmeid sisestada.
Näiteks:
<!DOCTYPE html>
<html lang="et">
<pea>
<metamärgistik="UTF-8">
<meta http-equiv="X-UA-ühilduv" sisu="IE = serv">
<meta nimi="vaateava" sisu="laius = seadme laius, esialgne skaala = 1,0">
<pealkiri>Mallide loomine juhtraudadega NestJS-is</title>
</head>
<keha>
<päis>
{{!-- Navibar osaline --}}
{{>navigeerimisriba}}
</header>
<div>
{{!-- Kehakohatäide --}}
{{{body}}}
</div>
{{!-- Jalus osaline --}}
{{>jalus}}
</body>
</html>
Koodi käivitamisel võtab juhtraud koodi sisu .hbs faili, mida soovite renderdada, ja sisestab need faili keha kohatäide. Seejärel renderdab see tulemuse lõpliku HTML-lehena.
Peate registreerima oma paigutuste kataloogi oma app.engine konfiguratsiooniobjekti ja määrake vaikepaigutusfail. Vaikepaigutusfail on paigutusfail, mida Handlebars kasutab, kui te konkreetset paigutust ei määratle.
Vaikepaigutuse deklareerimiseks ja paigutuste kataloogi registreerimiseks lisage oma konfiguratsiooniobjektile järgmine kood:
defaultLayout: 'Paigutusfaili nimi',
layoutsDir: liitu (__dirname, '..', 'vaated/paigutused'),
.hbs-faili renderdamine
Importige oma kontrolleri failis Res dekoraator alates @nestjs/common ja Vastus alates väljendada.
Seejärel edastage oma marsruudihalduris argument, res. Määrake res-ile vastuse tüüp ja märkige see Res-dekoraatoriga. Res-dekoraator paljastab Expressi natiivsed vastuse käsitlemise meetodid ja keelab NestJS-i standardmeetodi.
Järgmisena kutsuge renderdamismeetod välja res-il ja edastage esimese argumendina selle faili nimi, mida soovite renderdada. Teise argumendi jaoks edastage objekt, mis sisaldab paigutuse nime ja avaldise asendusväärtust.
Juhtrauad kasutavad teie jaoks määratud vaikepaigutust app.engine konfiguratsiooniobjekt, kui te paigutust ei paku.
@Hangi()
saada Tere(@Res() res: vastus){
return res.render('Faili nimi', { paigutus: 'paigutuse nimi', sõnum: 'Tere, Maailm' });
}
Alternatiivid juhtrauale
Juhtraud on suurepärane mallitööriist, millel on palju käepäraseid funktsioone, nagu abilised ja paigutused. Sõltuvalt teie vajadustest võite siiski valida alternatiivi, näiteks EJS (Embedded JavaScript), Mops või vuntsid.
