S rostoucí složitostí aplikace rostou i její potřeby. V určitém okamžiku může poskytování statických souborů HTML bránit pokroku nebo brzdit funkčnost aplikace. Místo toho budete chtít poskytovat dynamický obsah, což je úkol, který umožňují šablonovací nástroje, jako jsou Handlebars.
Řídítka jsou minimální, logický šablonovací engine pro NodeJS. Je to rozšíření šablony knírek. Jelikož se jedná o motor bez logiky, můžete jej použít k striktnímu oddělení prezentace od základního kódu.
Řídítka mají velkou podporu jako šablonovací engine z rámce NestJS.
Co je to šablonovací modul?
Šablonový engine je nástroj, který kombinuje HTML tagy a programovací jazyk k vytvoření HTML šablony s minimálním kódem.
Modul šablony za běhu vkládá data do šablony HTML, aby vykreslil konečný pohled v prohlížeči.
Možná se vám bude zdát složité nastavit šablonovací engine, jako je Handlebars, protože to zahrnuje mnoho kroků. Nicméně, rámec expresního serveru který NestJS standardně používá, má vynikající podporu pro řídítka.
Krok 1: Vygenerujte aplikaci NestJS
Spusťte následující příkaz k vytvoření lešení nové aplikace Nest:
hnízdo nové <název vaší aplikace>
Krok 2: Nainstalujte řídítka
Spuštěním následujícího příkazu nainstalujte řídítka pomocí správce balíčků npm:
npm install express-handlebars@^5.3.0@typy/express-handlebars@^5.3.0
Krok 3: Nakonfigurujte expresní instanci
Přejděte do svého main.ts soubor a import Aplikace NestExpress z @nestjs/platform-express.
Přiřaďte NestExpressApplication jako obecný typ k vytvořit metoda.
Jako tak:
konst aplikace = čekat NestFactory.create(AppModule)
Předání NestExpressApplication do aplikace objekt mu poskytuje přístup k exkluzivním metodám ExpressJS. Tyto metody budete potřebovat ke konfiguraci konkrétních vlastností Handlebars.
Krok 4: Nakonfigurujte řídítka
Nejprve budete muset určit umístění, kde vaše aplikace najde HTML a další statické soubory (šablony stylů, obrázky atd.). Soubory HTML můžete uložit do „pohledy“ a další statické soubory ve složce “veřejnost“, resp.
Chcete-li určit umístění, začněte importem připojit z cesta. Poté, uvnitř bootstrap nastavte umístění stylů.
Jako tak:
app.useStaticAssets (připojit se (__dirname, '..', 'veřejnost'))
Funkce spojení trvá libovolný počet tětiva argumenty, spojí je a normalizuje výslednou cestu. __dirname vrátí cestu ke složce, kde je main.ts soubor sídlí.
Dále nastavte umístění pro soubory HTML, například takto:
app.setBaseViewsDir (připojit (__dirname, '..', 'pohledy'));
Dále importujte řídítka do svého main.ts soubor:
import * tak jako hbs z 'expres-řídítka';
Budete potřebovat hbs import pro konfiguraci vlastností řídítek, jako je název rozšíření atd.
Výchozí název přípony souboru pro Handlebars je .řídítka.
Tento název rozšíření je dlouhý, ale můžete jej nakonfigurovat pomocí app.engine volání. app.engine je nativní funkce wrapper kolem expresní.motor metoda. Chce to dva argumenty: ext a funkci zpětného volání. Viz Expresní dokumentace zapnuta app.engine abyste se o tom dozvěděli více.
Volání app.engine()a jako první argument předejte řetězec 'hbs'. Poté jako druhý argument zavolejte funkci hbs a předejte konfigurační objekt s vlastností extname nastaven na "hbs". Toto nastavení změní název rozšíření z .handlebars na .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
Nakonec nastavte zobrazovací modul na Řídítka takto:
app.setViewEngine('hbs');
Krok 5: Vytvořte složky
V kořenovém adresáři projektu vytvořte dvě nové složky. Budete používat první, veřejnost, k uložení šablon stylů pro vaši aplikaci. v pohledy, uložíte všechny své soubory HTML.
Tím je nastavení vašeho vývojového prostředí ukončeno. V další části budete mít přehled o syntaxi Handlebars a jejím použití v aplikaci NestJS.
Syntaxe řídítek
Tato část pokryje většinu syntaxe řídítek, kterou potřebujete k dynamickému poskytování souborů.
Pomocníci
Pomocníci jsou funkce, které transformují výstup, iterují data a vykreslují podmíněný výstup.
Řídítka nabízí dva typy pomocníků (Block a Built-in) a můžete si vytvořit vlastní pomocníky podle svých potřeb.
Pomocníka označíte zabalením do dvojitých složených závorek. Před jeho názvem uveďte hash (#) pro úvodní pomocnou značku a lomítko (/) pro koncovou značku.
Například:
{{!-- -li hodnota je skutečný, div se vykreslí jiný, nebude --}}
{{#if hodnota}}
<div>Hodnota byla vykreslena</div>
{{/li}}
Pokud vytvoříte vlastního pomocníka, musíte ho zaregistrovat ve svém hbs konfigurační objekt ve vašem main.ts než jej budete moci použít ve své aplikaci.
// main.ts
import { customHelper } z './helpers/hbs.helpers';
// Uvnitř funkce bootstrap
app.engine('hbs', hbs({ extname: 'hbs', pomocníci: { customHelper } }));
Výrazy
Výrazy jsou jednotkou šablony řídítek. Vaše použití výrazů se liší v závislosti na složitosti úkolu. Můžete je použít samostatně v šabloně, předávat je jako vstup do pomocníků a další.
Označte výrazy dvojitými složenými závorkami, například:
<h1>{{zpráva}}</h1>
Částečné
Částečný odkazuje na kus HTML předem uloženého, protože se objevuje v několika souborech HTML. Například navigační lišty a zápatí. Tento obsah můžete uložit do jednoho souboru a v případě potřeby jej zahrnout.
Stejně jako u vašich statických a HTML souborů budete muset také nastavit adresář částečných částí app.engine konfigurační objekt.
Zaregistrujte svůj dílčí adresář přidáním následujícího kódu do konfiguračního objektu:
// main.ts
částečný_adresář: join (__dirname, '..', 'pohledy/části'),
K částečnému můžete přistupovat pomocí syntaxe částečného volání. Do dvojitých složených závorek zadejte symbol větší než (>) následovaný názvem části.
Například:
{{> nameOfPartial}}
Rozvržení
Rozvržení řídítek je stránka HTML používaná k nastavení základních metadat nebo obecné struktury pro jiné stránky HTML v aplikaci. Funguje jako kontejner se zástupným symbolem, do kterého můžete vkládat dynamická data.
Například:
<!DOCTYPE html>
<html jazyk="en">
<hlava>
<meta znaková sada="UTF-8">
<meta http-equiv="X-UA-kompatibilní" obsah ="IE=hrana">
<meta jméno="výřez" obsah ="width=device-width, initial-scale=1.0">
<titul>Šablony v NestJS s řídítky</title>
</head>
<tělo>
<záhlaví>
{{!-- Částečná navigační lišta --}}
{{>navigační lišta}}
</header>
<div>
{{!-- Zástupný symbol těla --}}
{{{tělo}}}
</div>
{{!-- Částečné zápatí --}}
{{>zápatí}}
</body>
</html>
Když spustíte svůj kód, Handlebars převezme obsah souboru .hbs soubor, který chcete vykreslit, a vloží je do tělo zástupný symbol. Poté vykreslí výsledek jako finální HTML stránku.
Budete muset zaregistrovat svůj adresář rozvržení ve vašem app.engine konfigurační objekt a nastavte výchozí soubor rozvržení. Výchozí soubor rozvržení je soubor rozvržení, který používá Handlebars, pokud nedefinujete konkrétní rozvržení.
Přidejte následující kód do svého konfiguračního objektu, abyste deklarovali výchozí rozložení a registrovali adresář rozložení:
defaultLayout: 'Název souboru rozvržení',
layoutsDir: join (__dirname, '..', 'pohledy/rozvržení'),
Vykreslování souboru .hbs
V souboru ovladače importujte soubor Res dekoratér od @nestjs/common a Odezva z vyjádřit.
Poté v obslužném programu trasy předejte argument, res. Přiřaďte typ Response k res a označte jej pomocí dekorátoru Res. Dekorátor Res odhaluje nativní metody zpracování odezvy Express a deaktivuje standardní přístup NestJS.
Dále zavolejte metodu render na res a předejte název souboru, který chcete vykreslit jako první argument. Jako druhý argument předejte objekt obsahující název rozvržení a náhradní hodnotu výrazu.
Řídítka budou používat výchozí rozložení nastavené ve vašem app.engine konfigurační objekt, pokud nezadáte rozvržení.
@Dostat()
getHello(@Res() res: Odezva){
return res.render('Název souboru', { rozložení: 'název rozložení', zpráva: 'Ahoj světe' });
}
Alternativy k řídítkům
Řídítka jsou vynikající nástroj pro vytváření šablon s mnoha užitečnými funkcemi, jako jsou pomocníci a rozvržení. Přesto si v závislosti na svých potřebách můžete vybrat alternativu, jako je EJS (Embedded JavaScript), Pug nebo Moustache.