Ettersom en applikasjon vokser i kompleksitet, øker også behovene. På et tidspunkt kan visning av statiske HTML-filer hindre fremdriften eller holde tilbake appens funksjonalitet. I stedet vil du vise dynamisk innhold, en oppgave som malmotorer som Styre gjør mulig.
Styre er en minimal, logikkløs malmotor for NodeJS. Det er en utvidelse av bartmalmotoren. Siden det er en logikkløs motor, kan du bruke den til å skille presentasjonen strengt fra underliggende kode.
Styre har god støtte som malmotor fra NestJS-rammeverket.
Hva er en malmotor?
En malmotor er et verktøy som kombinerer HTML-tagger og et programmeringsspråk for å lage en HTML-mal med minimal kode.
Malmotoren under kjøring injiserer data i HTML-malen for å gjengi den endelige visningen i nettleseren.
Du kan synes det er komplisert å sette opp en malmotor som Styre, siden det involverer mange trinn. Men, Express server-rammeverket som NestJS bruker som standard har utmerket støtte for styre.
Trinn 1: Generer en NestJS-applikasjon
Kjør følgende kommando for å stillas en ny Nest-applikasjon:
reir ny <navnet på appen din>
Trinn 2: Installer styret
Kjør følgende kommando for å installere Styre ved hjelp av npm-pakkebehandleren:
npm installer express-styre@^5.3.0@typer/express-handlebars@^5.3.0
Trinn 3: Konfigurer Express Instance
Naviger til din main.ts fil og import NestExpress-applikasjon fra @nestjs/platform-express.
Tilordne NestExpressApplication som en generisk type til skape metode.
Som så:
konst app = avvente NestFactory.create(AppModule)
Sender NestExpressApplication til app objektet gir den tilgang til ExpressJS-eksklusive metoder. Du trenger disse metodene for å konfigurere spesifikke styreegenskaper.
Trinn 4: Konfigurer håndtak
Først må du spesifisere plasseringene der applikasjonen din vil finne HTML og andre statiske filer (stilark, bilder osv.). Du kan lagre HTML-filene dine i en "visninger"-mappen og andre statiske filer i en "offentlig”-mappen.
For å spesifisere plasseringene, start med å importere bli med fra sti. Så inne i Støvelhempe funksjon, angi plasseringen for stilene.
Som så:
app.useStaticAssets (join (__dirname, '..', 'offentlig'))
Sammenføyningsfunksjonen tar et vilkårlig antall streng argumenter, slår dem sammen og normaliserer den resulterende banen. __dirnavn returnerer banen til mappen der main.ts filen ligger.
Deretter angir du plasseringen for HTML-filene dine, slik:
app.setBaseViewsDir (bli med (__dirnavn, '..', 'visninger'));
Deretter importerer du styrehåndtak til din main.ts fil:
import * som hbs fra 'express-styre';
Du trenger hbs import for å konfigurere styreegenskaper som utvidelsesnavnet osv.
Standard filtypenavn for håndtak er .styre.
Dette utvidelsesnavnet er langt, men du kan konfigurere det med app.motor anrop. app.motor er en native wrapper-funksjon rundt express.motor metode. Det krever to argumenter: ext og en tilbakeringingsfunksjon. Se Express dokumentasjon på app.motor for å lære mer om det.
Anrop app.engine(), og som et første argument, send strengen 'hbs'. Deretter, som et andre argument, kaller du hbs-funksjonen og sender inn et konfigurasjonsobjekt med en egenskap extname satt til "hbs". Denne innstillingen endrer utvidelsesnavnet fra .handlebars til .hbs.
app.motor('hbs', hbs({ extname: 'hbs' }));
Til slutt setter du visningsmotoren til Styre slik:
app.setViewEngine('hbs');
Trinn 5: Opprett mapper
Opprett to nye mapper i prosjektets rotkatalog. Du bruker den første, offentlig, for å lagre stilarkene for applikasjonen din. I visninger, lagrer du alle HTML-filene dine.
Dette avslutter oppsettet av utviklingsmiljøet ditt. I neste seksjon vil du ha en oversikt over styresyntaksen og bruken av den i en NestJS-applikasjon.
Styrets syntaks
Denne delen vil dekke hoveddelen av styrets syntaks du trenger for å betjene filene dine dynamisk.
Hjelpere
Hjelpere er funksjoner som transformerer utdata, itererer over data og gjengir betinget utdata.
Styre har to typer hjelpere (Block og Built-in), og du kan lage tilpassede hjelpere som passer dine behov.
Du betegner en hjelper ved å pakke den inn i doble krøllete seler. Prefiks navnet med en hash (#) for en åpningshjelpekode og en skråstrek (/) for en avsluttende kode.
For eksempel:
{{!-- hvis verdien er ekte, vil div-en bli gjengitt ellers, det vil ikke --}}
{{#if verdi}}
<div>Verdien er gjengitt</div>
{{/hvis}}
Hvis du oppretter en tilpasset hjelper, må du registrere den i din hbs konfigurasjonsobjekt i din main.ts fil før du kan bruke den i applikasjonen.
// main.ts
import { customHelper } fra './helpers/hbs.helpers';
// Inne i bootstrap-funksjonen
app.motor('hbs', hbs({ extname: 'hbs', hjelpere: { customHelper } }));
Uttrykkene
Uttrykk er enheten til en styremal. Din bruk av uttrykk varierer avhengig av oppgavens kompleksitet. Du kan bruke dem alene i en mal, sende dem som input til hjelpere og mer.
Angi uttrykk med doble krøllete klammeparenteser, for eksempel:
<h1>{{beskjed}}</h1>
Deler
En delvis refererer til et stykke HTML som er forhåndslagret fordi det vises på tvers av flere HTML-filer. For eksempel navbarer og bunntekster. Du kan lagre det innholdet i én fil og inkludere det når det er nødvendig.
Som med statiske filer og HTML-filer, må du også angi en delkatalog i din app.motor konfigurasjonsobjekt.
Registrer delkatalogen ved å legge til følgende kode til konfigurasjonsobjektet:
// main.ts
partialsDir: join (__dirname, '..', 'visninger/partialer'),
Du kan få tilgang til en delvis ved å bruke syntaksen for delvis anrop. I doble krøllete klammeparenteser, skriv inn et større enn-symbol (>) etterfulgt av navnet på partialen.
For eksempel:
{{> nameOfPartial}}
Oppsett
En Handlebars-layout er en HTML-side som brukes til å angi underliggende metadata eller generell struktur for andre HTML-sider i applikasjonen. Den fungerer som en beholder med en plassholder som du kan injisere dynamiske data i.
For eksempel:
<!DOCTYPE html>
<html lang="no">
<hode>
<metategnsett="UTF-8">
<meta http-equiv="X-UA-kompatibel" innhold="IE = kant">
<metanavn="viewport" innhold="width=enhetsbredde, initial-skala=1,0">
<tittel>Mal i NestJS med styre</title>
</head>
<kropp>
<Overskrift>
{{!-- Navbar delvis --}}
{{>navbar}}
</header>
<div>
{{!-- Body Placeholder --}}
{{{kropp}}}
</div>
{{!-- Bunntekst delvis --}}
{{>bunntekst}}
</body>
</html>
Når du kjører koden din, tar Handlebars innholdet i .hbs filen du vil gjengi og injiserer dem i kropp plassholder. Deretter gjengir den resultatet som den endelige HTML-siden.
Du må registrere layoutkatalogen din i din app.motor konfigurasjonsobjekt og angi en standard layoutfil. En standard layoutfil er layoutfilen som Handlebars bruker hvis du ikke definerer et spesifikt oppsett.
Legg til følgende kode til konfigurasjonsobjektet for å erklære et standardoppsett og registrere en layoutkatalog:
standardoppsett: 'Navn på layoutfilen',
layoutsDir: join (__dirname, '..', 'visninger/oppsett'),
Gjengi en .hbs-fil
I kontrollerfilen importerer du Res dekoratør fra @nestjs/common og Respons fra uttrykke.
Send deretter et argument i rutebehandleren, res. Tildel en type Respons til res og merk den med Res-dekoratøren. Res-dekoratøren avslører Expresss native responshåndteringsmetoder og deaktiverer NestJS-standardtilnærmingen.
Deretter kaller du gjengivelsesmetoden på res og sender navnet på filen du vil gjengi som det første argumentet. For det andre argumentet sender du et objekt som inneholder navnet på layouten og erstatningsverdien for et uttrykk.
Styre vil bruke standardoppsettet i din app.motor konfigurasjonsobjekt hvis du ikke oppgir et oppsett.
@Få()
fåHallo(@Res() res: Respons){
return res.render('Navn på fil', { oppsett: 'navn på layout', beskjed: 'Hei Verden' });
}
Alternativer til styre
Styre er et utmerket malverktøy med mange nyttige funksjoner som hjelpere og oppsett. Likevel, avhengig av dine behov, kan du velge et alternativ som EJS (Embedded JavaScript), Pug eller Moustache.
