S rastúcou komplexnosťou aplikácie rastú aj jej potreby. V určitom okamihu môže poskytovanie statických súborov HTML brániť pokroku alebo brzdiť funkčnosť aplikácie. Namiesto toho budete chcieť poskytovať dynamický obsah, čo je úloha, ktorú umožňujú nástroje na vytváranie šablón, ako sú riadidlá.
Riadidlá sú minimálny, logický nástroj na vytváranie šablón pre NodeJS. Je to rozšírenie nástroja na šablóny fúzov. Keďže ide o motor bez logiky, môžete ho použiť na prísne oddelenie prezentácie od základného kódu.
Riadidlá majú veľkú podporu ako nástroj na vytváranie šablón z rámca NestJS.
Čo je to nástroj na vytváranie šablón?
Nástroj na vytváranie šablón je nástroj, ktorý kombinuje značky HTML a programovací jazyk na vytvorenie šablóny HTML s minimálnym kódom.
Nástroj šablóny za behu vkladá údaje do šablóny HTML, aby vykreslil konečný pohľad v prehliadači.
Možno sa vám bude zdať zložité nastaviť nástroj na vytváranie šablón, ako sú napríklad riadidlá, pretože zahŕňa veľa krokov. však rámec expresného servera ktorý NestJS štandardne používa, má vynikajúcu podporu pre riadidlá.
Krok 1: Vytvorte aplikáciu NestJS
Spustite nasledujúci príkaz na lešenie novej aplikácie Nest:
hniezdo nové <názov vašej aplikácie>
Krok 2: Nainštalujte riadidlá
Spustite nasledujúci príkaz na inštaláciu riadidiel pomocou správca balíkov npm:
npm install express-handlebars@^5.3.0@typy/express-handlebars@^5.3.0
Krok 3: Nakonfigurujte expresnú inštanciu
Prejdite do svojho main.ts súbor a import Aplikácia NestExpress od @nestjs/platform-express.
Priraďte NestExpressApplication ako všeobecný typ k vytvoriť metóda.
Ako:
konšt aplikácia = čakať NestFactory.create(AppModule)
Odovzdanie NestExpressApplication do aplikácie objekt mu poskytuje prístup k metódam exkluzívnym pre ExpressJS. Tieto metódy budete potrebovať na konfiguráciu konkrétnych vlastností riadidiel.
Krok 4: Nakonfigurujte riadidlá
Najprv budete musieť určiť miesta, kde vaša aplikácia nájde HTML a ďalšie statické súbory (štýly, obrázky atď.). Súbory HTML môžete ukladať do „názory“ a ďalšie statické súbory v “verejnosti“, resp.
Ak chcete určiť miesta, začnite importovaním pripojiť sa od cesta. Potom vo vnútri bootstrap nastavte umiestnenie štýlov.
Ako:
app.useStaticAssets (pripojiť sa (__dirname, '..', 'verejnosti'))
Funkcia spojenia má ľubovoľný počet reťazec argumenty, spája ich a normalizuje výslednú cestu. __dirname vráti cestu k priečinku, kde je main.ts súbor sa nachádza.
Ďalej nastavte umiestnenie pre súbory HTML takto:
app.setBaseViewsDir (spojiť sa (__dirname, '..', 'názory'));
Ďalej importujte riadidlá do svojho main.ts súbor:
importovať * ako hbs od „expresné riadidlá“;
Budete potrebovať hbs import na konfiguráciu vlastností riadidiel, ako je názov rozšírenia atď.
Predvolený názov prípony súboru pre Handlebars je .riadidlá.
Tento názov rozšírenia je dlhý, ale môžete ho nakonfigurovať pomocou app.engine hovor. app.engine je natívna funkcia wrapper okolo expresný.motor metóda. Chce to dva argumenty: ext a funkciu spätného volania. Pozrite si Expresná dokumentácia zapnutá app.engine aby ste sa o tom dozvedeli viac.
Zavolajte app.engine()a ako prvý argument zadajte reťazec 'hbs'. Potom ako druhý argument zavolajte funkciu hbs a odovzdajte konfiguračný objekt s vlastnosťou extname nastavený na „hbs“. Toto nastavenie zmení názov rozšírenia z .handlebars na .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
Nakoniec nastavte zobrazovací mechanizmus na Riadidlá takto:
app.setViewEngine('hbs');
Krok 5: Vytvorte priečinky
V koreňovom adresári projektu vytvorte dva nové priečinky. Budete používať prvý, verejnosti, na uloženie šablón štýlov pre vašu aplikáciu. In názory, uložíte všetky svoje súbory HTML.
Týmto sa dokončí nastavenie vášho vývojového prostredia. V ďalšej časti budete mať prehľad o syntaxi Handlebars a jej použití v aplikácii NestJS.
Syntax riadidiel
Táto časť pokryje väčšinu syntaxe riadidiel, ktorú potrebujete na dynamické zobrazovanie vašich súborov.
Pomocníci
Pomocníci sú funkcie, ktoré transformujú výstup, iterujú údaje a vykresľujú podmienený výstup.
Riadidlá poskytujú dva typy pomocníkov (Block a Built-in) a môžete si vytvoriť vlastných pomocníkov podľa svojich potrieb.
Pomocníka označíte tak, že ho zabalíte do dvojitých kučeravých zátvoriek. Pred jej názov umiestnite krížik (#) pre úvodnú pomocnú značku a lomku (/) pre koncovú značku.
Napríklad:
{{!-- ak hodnota je pravda, div sa vykreslí inak, nebude --}}
{{#if hodnota}}
<div>Hodnota bola vykreslená</div>
{{/if}}
Ak si vytvoríte vlastného pomocníka, musíte ho zaregistrovať vo svojom hbs konfiguračný objekt vo vašom main.ts predtým, než ho budete môcť použiť vo svojej aplikácii.
// main.ts
importovať { customHelper } od './helpers/hbs.helpers';
// Vo vnútri funkcie bootstrap
app.engine('hbs', hbs({ extname: 'hbs', pomocníci: { customHelper } }));
Výrazy
Výrazy sú jednotkou šablóny riadidiel. Vaše použitie výrazov sa líši v závislosti od zložitosti úlohy. Môžete ich použiť samostatne v šablóne, odovzdať ich ako vstup do pomocníkov a podobne.
Označte výrazy dvojitými zloženými zátvorkami, napríklad:
<h1>{{správa}}</h1>
Čiastky
Čiastočné označuje časť HTML vopred uloženú, pretože sa zobrazuje v niekoľkých súboroch HTML. Napríklad navigačné panely a päty. Tento obsah môžete uložiť do jedného súboru a v prípade potreby ho zahrnúť.
Rovnako ako v prípade statických súborov a súborov HTML budete musieť vo svojom súbore nastaviť aj čiastočný adresár app.engine konfiguračný objekt.
Zaregistrujte svoj adresár častí pridaním nasledujúceho kódu do konfiguračného objektu:
// main.ts
partsDir: join (__dirname, '..', 'pohľady/časti'),
K čiastočnému môžete pristupovať pomocou syntaxe čiastočného volania. V dvojitých zložených zátvorkách zadajte symbol väčší ako (>), za ktorým nasleduje názov časti.
Napríklad:
{{> nameOfPartial}}
Rozloženie
Rozloženie rukoväte je stránka HTML, ktorá sa používa na nastavenie základných metaúdajov alebo všeobecnej štruktúry pre iné stránky HTML v aplikácii. Funguje ako kontajner so zástupným symbolom, do ktorého môžete vkladať dynamické údaje.
Napríklad:
<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<meta znaková sada="UTF-8">
<meta http-ekviv="X-UA-kompatibilné" obsah ="IE=okraj">
<meta meno="výrez" obsah ="šírka=šírka zariadenia, počiatočná mierka=1,0">
<titul>Šablóna v NestJS s riadidlami</title>
</head>
<telo>
<hlavička>
{{!-- Čiastočná navigačná lišta --}}
{{>navigačná lišta}}
</header>
<div>
{{!-- Zástupný symbol tela --}}
{{{body}}}
</div>
{{!-- Čiastočná päta --}}
{{>päta}}
</body>
</html>
Keď spustíte kód, Handlebars prevezme obsah súboru .hbs súbor, ktorý chcete vykresliť a vloží ich do telo zástupný symbol. Potom vykreslí výsledok ako konečnú stránku HTML.
Budete musieť zaregistrovať svoj adresár rozložení vo svojom app.engine konfiguračný objekt a nastavte predvolený súbor rozloženia. Predvolený súbor rozloženia je súbor rozloženia, ktorý používa Handlebars, ak nedefinujete konkrétne rozloženie.
Pridajte nasledujúci kód do svojho konfiguračného objektu, aby ste deklarovali predvolené rozloženie a zaregistrujte adresár rozloženia:
defaultLayout: 'Názov súboru rozloženia',
layoutsDir: join (__dirname, '..', 'zobrazenia/rozloženia'),
Vykreslenie súboru .hbs
Do súboru ovládača importujte súbor Res dekoratér od @nestjs/common a odpoveď od expresné.
Potom v obslužnom programe trasy odovzdajte argument, res. Priraďte typ Response k res a označte ho dekorátorom Res. Dekoratér Res odhaľuje natívne metódy spracovania odozvy Express a deaktivuje štandardný prístup NestJS.
Ďalej zavolajte metódu render na res a zadajte názov súboru, ktorý chcete vykresliť ako prvý argument. Pre druhý argument odovzdajte objekt obsahujúci názov rozloženia a náhradnú hodnotu výrazu.
Riadidlá budú používať predvolené rozloženie nastavené vo vašom app.engine konfiguračný objekt, ak nezadáte rozloženie.
@Získať()
getHello(@Res() res: odpoveď){
return res.render('Názov súboru', { rozloženie: 'názov rozloženia', správa: 'Ahoj svet' });
}
Alternatívy k riadidlám
Riadidlá sú vynikajúci nástroj na vytváranie šablón s mnohými užitočnými funkciami, ako sú pomocníci a rozloženia. V závislosti od vašich potrieb si však môžete vybrať alternatívu, ako napríklad EJS (Embedded JavaScript), Pug alebo Moustache.
