Ko aplikacija postaja kompleksnejša, se povečujejo tudi njene potrebe. Na neki točki lahko prikazovanje statičnih datotek HTML ovira napredek ali zadrži funkcionalnost aplikacije. Namesto tega boste želeli streči dinamično vsebino, nalogo, ki jo omogočajo mehanizmi za predloge, kot je Handlebars.
Handlebars je minimalen mehanizem za predloge brez logike za NodeJS. Je razširitev mehanizma predlog brkov. Ker gre za motor brez logike, ga lahko uporabite za strogo ločevanje predstavitve od osnovne kode.
Handlebars ima odlično podporo kot mehanizem za predloge iz ogrodja NestJS.
Kaj je mehanizem za predloge?
Mehanizem za predloge je orodje, ki združuje oznake HTML in programski jezik za ustvarjanje predloge HTML z minimalno kodo.
Mehanizem za predloge med izvajanjem vnese podatke v predlogo HTML za upodobitev končnega pogleda v brskalniku.
Morda se vam bo zdela zapletena nastavitev mehanizma za predloge, kot je Handlebars, saj vključuje veliko korakov. vendar ogrodje strežnika Express ki ga NestJS uporablja privzeto, ima odlično podporo za Handlebars.
1. korak: Ustvarite aplikacijo NestJS
Zaženite naslednji ukaz za oder nove aplikacije Nest:
gnezdo novo <ime vaše aplikacije>
2. korak: Namestite krmilo
Zaženite naslednji ukaz za namestitev krmila z uporabo upravitelj paketov npm:
npm namestite express-handlebars@^5.3.0@vrste/express-handlebars@^5.3.0
3. korak: Konfigurirajte primerek Express
Pomaknite se do svojega main.ts datoteko in uvoz Aplikacija NestExpress od @nestjs/platform-express.
Dodelite NestExpressApplication kot generični tip za ustvariti metoda.
takole:
konst aplikacija = čakati NestFactory.create(AppModule)
Posredovanje NestExpressApplication v aplikacija objekt mu omogoča dostop do metod, ki so ekskluzivne za ExpressJS. Te metode boste potrebovali za konfiguracijo določenih lastnosti krmila.
4. korak: Konfigurirajte krmilo
Najprej boste morali določiti lokacije, kjer bo vaša aplikacija našla HTML in druge statične datoteke (slogovne liste, slike itd.). Datoteke HTML lahko shranite v »pogledi" in druge statične datoteke v "javnosti».
Če želite določiti lokacije, začnite z uvozom pridruži se od pot. Nato znotraj bootstrap funkcijo, nastavite lokacijo za sloge.
takole:
app.useStaticAssets (join (__dirname, '..', 'javnosti'))
Funkcija združevanja sprejme poljubno število vrvica argumente, jih združi in normalizira nastalo pot. __dirname vrne pot do mape, kjer je main.ts datoteka prebiva.
Nato nastavite lokacijo za svoje datoteke HTML, takole:
app.setBaseViewsDir (join (__dirname, '..', 'pogledi'));
Nato uvozite krmilo v svoj main.ts mapa:
uvoz * kot hbs od 'hitro krmilo';
Potrebovali boste hbs uvozite za konfiguracijo lastnosti krmila, kot je ime razširitve itd.
Privzeto ime končnice datoteke za krmilo je .krmilo.
To ime razširitve je dolgo, vendar ga lahko konfigurirate z app.engine klic. app.engine je izvorna funkcija ovoja okoli express.motor metoda. Potrebuje dva argumenta: ext in funkcijo povratnega klica. Glej Ekspresna dokumentacija na app.engine če želite izvedeti več o tem.
Pokliči app.engine()in kot prvi argument posredujte niz 'hbs'. Nato kot drugi argument pokličite funkcijo hbs in posredujte konfiguracijski objekt z lastnostjo extname nastavljena 'hbs'. Ta nastavitev spremeni ime končnice iz .handlebars v .hbs.
app.engine('hbs', hbs({ zunanje ime: 'hbs' }));
Končno nastavite mehanizem pogleda na krmilo takole:
app.setViewEngine('hbs');
5. korak: Ustvarite mape
V korenskem imeniku vašega projekta ustvarite dve novi mapi. Uporabili boste prvo, javnosti, da shranite datoteke slogov za vašo aplikacijo. notri pogledi, boste shranili vse svoje datoteke HTML.
S tem je nastavitev vašega razvojnega okolja zaključena. V naslednjem razdelku boste imeli pregled sintakse Handlebars in njene uporabe v aplikaciji NestJS.
Sintaksa krmila
Ta razdelek bo pokrival večino sintakse krmila, ki jo potrebujete za dinamično serviranje datotek.
Pomočniki
Pomočniki so funkcije, ki preoblikujejo izhod, ponavljajo podatke in upodabljajo pogojni izhod.
Krmilo ponuja dve vrsti pomočnikov (blok in vgrajeno) in ustvarite lahko pomočnike po meri, ki ustrezajo vašim potrebam.
Pomočnika označite tako, da ga zavijete v dvojne zavite oklepaje. V predpono njegovemu imenu dodajte ključ (#) za začetno pomožno oznako in poševnico (/) za zaključno oznako.
Na primer:
{{!-- če vrednost je prav, bo div upodobljen drugače, ne bo --}}
{{#if vrednost}}
<div>Vrednost je bila upodobljena</div>
{{/if}}
Če ustvarite pomočnika po meri, ga morate registrirati v svojem hbs konfiguracijski objekt v vašem main.ts datoteko, preden jo lahko uporabite v svoji aplikaciji.
// main.ts
uvoz {customHelper} od './helpers/hbs.helpers';
// Znotraj funkcije zagona
app.engine('hbs', hbs({ zunanje ime: 'hbs', pomočniki: { customHelper } }));
Izrazi
Izrazi so enota predloge krmila. Vaša uporaba izrazov se razlikuje glede na kompleksnost naloge. Lahko jih uporabite samostojno v predlogi, jih posredujete kot vnos v pomočnike in drugo.
Označite izraze z dvojnimi zavitimi oklepaji, na primer:
<h1>{{sporočilo}}</h1>
Delni
Del se nanaša na vnaprej shranjen del HTML, ker se pojavi v več datotekah HTML. Na primer navbars in noge. To vsebino lahko shranite v eno datoteko in jo po potrebi vključite.
Tako kot pri vaših statičnih datotekah in datotekah HTML, boste morali tudi v svoji datoteki nastaviti delni imenik app.engine konfiguracijski objekt.
Registrirajte svoj delni imenik tako, da svojemu konfiguracijskemu objektu dodate naslednjo kodo:
// main.ts
partialsDir: pridruži se (__ime imenika, '..', 'pogledi/delni'),
Do delnega lahko dostopate s sintakso delnega klica. V dvojnih zavitih oklepajih vnesite simbol večje od (>), ki mu sledi ime dela.
Na primer:
{{> nameOfPartial}}
Postavitve
Postavitev krmila je stran HTML, ki se uporablja za nastavitev osnovnih metapodatkov ali splošne strukture za druge strani HTML v aplikaciji. Deluje kot vsebnik z rezerviranim mestom, v katerega lahko vnesete dinamične podatke.
Na primer:
<!DOCTYPE html>
<html lang="en">
<glavo>
<meta charset="UTF-8">
<meta http-ekviv="Združljiv z X-UA" vsebina="IE=rob">
<meta ime="vidno polje" vsebina="širina=širina naprave, začetna lestvica=1,0">
<naslov>Predlogiranje v NestJS s krmili</title>
</head>
<telo>
<glava>
{{!-- Delno krmarjenje --}}
{{>navbar}}
</header>
<div>
{{!-- Oznaka mesta za telo --}}
{{{telo}}}
</div>
{{!-- Del noge --}}
{{>noga}}
</body>
</html>
Ko zaženete svojo kodo, Handlebars prevzame vsebino .hbs datoteko, ki jo želite upodobiti, in jih vstavite v telo rezervirano mesto. Nato upodobi rezultat kot končno stran HTML.
Svoj imenik postavitev boste morali registrirati v svojem app.engine konfiguracijski objekt in nastavite privzeto datoteko postavitve. Privzeta datoteka postavitve je datoteka postavitve, ki jo uporablja Handlebars, če ne določite določene postavitve.
Dodajte naslednjo kodo svojemu konfiguracijskemu objektu, da deklarirate privzeto postavitev in registrirate imenik postavitev:
defaultLayout: 'Ime datoteke postavitve',
layoutsDir: pridruži se (__ime imenika, '..', 'pogledi/postavitve'),
Upodabljanje datoteke .hbs
V datoteko krmilnika uvozite Res dekorater iz @nestjs/skupno in Odziv od ekspresno.
Nato v svojem upravljalniku poti posredujte argument, res. Resu dodelite vrsto odziva in ga označite z dekoratorjem Res. Dekorater Res razkrije Expressove izvorne metode ravnanja z odzivi in onemogoči standardni pristop NestJS.
Nato pokličite metodo upodabljanja na res in kot prvi argument posredujte ime datoteke, ki jo želite upodobiti. Za drugi argument posredujte objekt, ki vsebuje ime postavitve in nadomestno vrednost za izraz.
Krmilo bo uporabljalo privzeto postavitev, nastavljeno v vašem app.engine konfiguracijski objekt, če ne zagotovite postavitve.
@Get()
getHello(@Res() res: odgovor){
vrni res.render('Ime datoteke', { postavitev: 'ime postavitve', sporočilo: 'Pozdravljen, svet' });
}
Alternative za krmilo
Handlebars je odlično orodje za predloge s številnimi priročnimi funkcijami, kot so pomočniki in postavitve. Kljub temu lahko glede na vaše potrebe izberete alternativo, kot je EJS (vdelan JavaScript), Pug ali Moustache.