Efterhånden som en applikation vokser i kompleksitet, vokser dens behov også. På et tidspunkt kan visning af statiske HTML-filer hindre fremskridt eller holde appens funktionalitet tilbage. I stedet vil du gerne servere dynamisk indhold, en opgave, som skabelonmotorer som Styr muliggør.
Styr er en minimal, logisk-mindre skabelonmotor til NodeJS. Det er en udvidelse af overskægsskabelonmotoren. Da det er en logikløs motor, kan du bruge den til strengt at adskille præsentation fra underliggende kode.
Styr har stor støtte som skabelonmotor fra NestJS-rammeværket.
Hvad er en skabelonmotor?
En skabelonmotor er et værktøj, der kombinerer HTML-tags og et programmeringssprog for at skabe en HTML-skabelon med minimal kode.
Skabelonmotoren ved kørsel indsætter data i HTML-skabelonen for at gengive den endelige visning i browseren.
Du kan finde det kompliceret at opsætte en skabelonmotor som Styr, da det involverer mange trin. Imidlertid, Express-serverrammerne som NestJS bruger som standard, har fremragende understøttelse af styr.
Trin 1: Generer en NestJS-applikation
Kør følgende kommando for at stilladsere en ny Nest-applikation:
rede ny <navnet på din app>
Trin 2: Installer styret
Kør følgende kommando for at installere Styr vha npm-pakkehåndteringen:
npm installer express-styr@^5.3.0@typer/express-handlebars@^5.3.0
Trin 3: Konfigurer Express Instance
Naviger til din main.ts fil og import NestExpress-applikation fra @nestjs/platform-express.
Tildel NestExpressApplication som en generisk type til skab metode.
Ligesom:
konst app = vente NestFactory.create(AppModule)
Sender NestExpressApplication til app objekt giver det adgang til ExpressJS-eksklusive metoder. Du skal bruge disse metoder til at konfigurere specifikke styregenskaber.
Trin 4: Konfigurer styret
Først skal du angive de steder, hvor din applikation vil finde HTML og andre statiske filer (stylesheets, billeder osv.). Du kan gemme dine HTML-filer i en "visninger"-mappe og andre statiske filer i en "offentlig” mappe, hhv.
Start med at importere for at angive placeringerne tilslutte fra sti. Så inde i bootstrap funktion, skal du indstille placeringen for stilene.
Ligesom:
app.useStaticAssets (join (__dirname, '..', 'offentlig'))
Sammenføjningsfunktionen tager et vilkårligt antal af snor argumenter, forbinder dem og normaliserer den resulterende vej. __dirnavn returnerer stien til mappen, hvor main.ts filen ligger.
Indstil derefter placeringen for dine HTML-filer, som sådan:
app.setBaseViewsDir (join (__dirname, '..', 'visninger'));
Importer derefter styr til din main.ts fil:
importere * som hbs fra 'express-styr';
Du skal bruge hbs import for at konfigurere styregenskaber som f.eks. udvidelsesnavnet osv.
Standard filtypenavnet for styr er .styr.
Dette udvidelsesnavn er langt, men du kan konfigurere det med app.motor opkald. app.motor er en indbygget indpakningsfunktion omkring express.motor metode. Det kræver to argumenter: ext og en tilbagekaldsfunktion. Se den Ekspres dokumentation på app.motor at lære mere om det.
Opkald app.engine(), og som et første argument, send strengen 'hbs'. Kald derefter hbs-funktionen som et andet argument og indfør et konfigurationsobjekt med en egenskab extname indstillet til 'hbs'. Denne indstilling ændrer udvidelsesnavnet fra .handlebars til .hbs.
app.motor('hbs', hbs({ extname: 'hbs' }));
Indstil endelig visningsmotoren til Styr som sådan:
app.setViewEngine('hbs');
Trin 5: Opret mapper
Opret to nye mapper i dit projekts rodmappe. Du skal bruge den første, offentlig, for at gemme stilarkene til din applikation. I visninger, gemmer du alle dine HTML-filer.
Dette afslutter opsætningen af dit udviklingsmiljø. I det næste afsnit får du et overblik over syntaksen for styr og dens brug i en NestJS-applikation.
Styrets syntaks
Dette afsnit vil dække hovedparten af styrets syntaks, du skal bruge for at betjene dine filer dynamisk.
Hjælpere
Hjælpere er funktioner, der transformerer output, itererer over data og gengiver betinget output.
Styr giver to typer hjælpere (blok og indbygget), og du kan oprette brugerdefinerede hjælpere, der passer til dine behov.
Du betegner en hjælper ved at pakke den ind i dobbelte krøllede seler. Præfiks dets navn med en hash (#) for et åbningshjælpemærke og en fremadgående skråstreg (/) for et afsluttende tag.
For eksempel:
{{!-- hvis værdien er rigtigt, vil div'en blive gengivet andet, det vil det ikke --}}
{{#hvis værdi}}
<div>Værdien er gengivet</div>
{{/hvis}}
Hvis du opretter en brugerdefineret hjælper, skal du registrere den i din hbs konfigurationsobjekt i din main.ts fil, før du kan bruge den i din applikation.
// main.ts
importere { customHelper } fra './helpers/hbs.helpers';
// Inde i bootstrap-funktionen
app.motor('hbs', hbs({ extname: 'hbs', hjælpere: { customHelper } }));
Udtryk
Udtryk er enheden af en styrskabelon. Din brug af udtryk varierer afhængigt af opgavens kompleksitet. Du kan bruge dem alene i en skabelon, sende dem som input til hjælpere og meget mere.
Betegn udtryk med dobbelte krøllede seler, for eksempel:
<h1>{{besked}}</h1>
Partialer
En delvis refererer til et stykke HTML, der er gemt på forhånd, fordi det vises på tværs af flere HTML-filer. For eksempel navbarer og sidefødder. Du kan gemme indholdet i én fil og inkludere det, når det er nødvendigt.
Som med dine statiske filer og HTML-filer, skal du også indstille en delmappe i din app.motor konfigurationsobjekt.
Registrer din partial-mappe ved at tilføje følgende kode til dit konfigurationsobjekt:
// main.ts
partialsDir: join (__dirname, '..', 'synspunkter/partialer'),
Du kan få adgang til en delvis opkaldssyntaks. Indtast et større end-symbol (>) i dobbelte krøllede parenteser efterfulgt af navnet på partialen.
For eksempel:
{{> nameOfPartial}}
Layouts
Et Handlebars-layout er en HTML-side, der bruges til at indstille underliggende metadata eller generel struktur for andre HTML-sider i applikationen. Den fungerer som en beholder med en pladsholder, som du kan injicere dynamiske data i.
For eksempel:
<!DOCTYPE html>
<html lang="da">
<hoved>
<meta tegnsæt="UTF-8">
<meta http-equiv="X-UA-kompatibel" indhold="IE=kant">
<metanavn="viewport" indhold="bredde=enhedsbredde, indledende skala=1,0">
<titel>Skabelon i NestJS med styr</title>
</head>
<legeme>
<header>
{{!-- Navbar delvis --}}
{{>navbar}}
</header>
<div>
{{!-- Body Placeholder --}}
{{{legeme}}}
</div>
{{!-- Sidefod Delvis --}}
{{>sidefod}}
</body>
</html>
Når du kører din kode, tager Handlebars indholdet af .hbs fil, du ønsker at gengive og injicerer dem i legeme pladsholder. Derefter gengiver den resultatet som den endelige HTML-side.
Du skal registrere din layout-mappe i din app.motor konfigurationsobjekt og indstil en standard layoutfil. En standardlayoutfil er den layoutfil, som Handlebars bruger, hvis du ikke definerer et specifikt layout.
Tilføj følgende kode til dit konfigurationsobjekt for at erklære et standardlayout og registrere et layoutbibliotek:
standardlayout: 'Navn på layoutfilen',
layoutsDir: join (__dirname, '..', 'visninger/layouts'),
Gengivelse af en .hbs-fil
I din controller-fil skal du importere Res dekoratør fra @nestjs/common og Respons fra udtrykke.
Send derefter et argument i din rutehåndtering, res. Tildel en type svar til res og annotér den med Res dekoratoren. Res-dekoratøren afslører Express' native responshåndteringsmetoder og deaktiverer NestJS-standardtilgangen.
Kald derefter gengivelsesmetoden på res og send navnet på den fil, du vil gengive, som det første argument. For det andet argument skal du sende et objekt, der indeholder navnet på layoutet og erstatningsværdien for et udtryk.
Styr vil bruge standardlayoutet indstillet i din app.motor konfigurationsobjekt, hvis du ikke angiver et layout.
@Få()
goddag(@Res() res: Respons){
returner res.render('Navn på fil', { layout: 'navn på layout', besked: 'Hej Verden' });
}
Alternativer til styr
Styr er et fremragende skabelonværktøj med mange praktiske funktioner som hjælpere og layouts. Alligevel, afhængigt af dine behov, kan du vælge et alternativ såsom EJS (Embedded JavaScript), Pug eller Moustache.