Ahogy egy alkalmazás bonyolultabbá válik, úgy nőnek az igényei is. A statikus HTML-fájlok kiszolgálása egy bizonyos ponton akadályozhatja a haladást vagy visszatarthatja az alkalmazás működését. Ehelyett érdemes dinamikus tartalmat kiszolgálni, ezt a feladatot a sablonmotorok, például a kormányrúd lehetővé teszik.
A Handlebars egy minimális, logika nélküli sablonmotor a NodeJS számára. Ez a bajuszsablon motor kiterjesztése. Mivel ez egy logika nélküli motor, használhatja a prezentáció és a mögöttes kód szigorú elkülönítésére.
A kormány nagy támogatást nyújt a NestJS keretrendszer sablonmotorjaként.
Mi az a sablonozó motor?
A sablonkezelő egy olyan eszköz, amely a HTML-címkéket és a programozási nyelvet kombinálja minimális kóddal rendelkező HTML-sablon létrehozásához.
A sablonmotor futás közben adatokat szúr be a HTML-sablonba, hogy a böngészőben megjelenítse a végső nézetet.
Bonyolultnak találhatja egy sablonmotor, például a kormányrúd beállítását, mivel az sok lépésből áll. Azonban, az Express szerver keretrendszer
amelyet a NestJS alapértelmezés szerint használ, kiválóan támogatja a kormányt.1. lépés: NestJS-alkalmazás létrehozása
Futtassa a következő parancsot egy új Nest-alkalmazás állványozásához:
fészek új <az alkalmazás neve>
2. lépés: Szerelje fel a kormányt
Futtassa a következő parancsot a Handlebars telepítéséhez az npm csomagkezelőt:
npm install express-handlebars@^5.3.0@types/express-handlebars@^5.3.0
3. lépés: Az Express Instance konfigurálása
Navigáljon a sajátjához fő.ts fájl és importálás NestExpressApplication tól től @nestjs/platform-express.
Rendelje hozzá a NestExpressApplication-t általános típusként a teremt módszer.
Például így:
const app = várják NestFactory.create(AppModule)
A NestExpressApplication átadása a kb Az objektum hozzáférést biztosít az ExpressJS-exkluzív metódusokhoz. Ezekre a módszerekre lesz szüksége a kormányrúd adott tulajdonságainak konfigurálásához.
4. lépés: Konfigurálja a kormányt
Először is meg kell adnia azokat a helyeket, ahol az alkalmazás megtalálja a HTML-t és más statikus fájlokat (stíluslapokat, képeket stb.). HTML fájljait egy „nézetek" mappát és más statikus fájlokat egy "nyilvános” mappát, ill.
A helyek megadásához kezdje az importálással csatlakozik tól től pálya. Aztán belül a bootstrap funkciót, állítsa be a stílusok helyét.
Például így:
app.useStaticAssets (join (__dirname, '..', 'nyilvános'))
Az összekapcsolás függvény tetszőleges számú húr érveket, csatlakozik hozzájuk, és normalizálja az eredményül kapott utat. __dirname visszaadja annak a mappának az elérési útját, ahol a fő.ts fájl található.
Ezután állítsa be a HTML-fájlok helyét, például:
app.setBaseViewsDir (join (__dirname, '..', 'nézetek'));
Ezután importálja a kormányt a sajátjába fő.ts fájl:
import * mint hbs tól től „kifejthető kormány”;
Szükséged lesz a hbs importálás a kormány tulajdonságainak, például a kiterjesztés neve stb. konfigurálásához.
A Handlebars alapértelmezett fájlkiterjesztésének neve .kormány.
Ez a bővítménynév hosszú, de a következővel konfigurálhatja app.engine hívás. app.engine egy natív burkoló funkció a körül expressz.motor módszer. Két érv kell hozzá: ext és egy visszahívási funkció. Lásd a Expressz dokumentáció bekapcsolva app.engine hogy többet megtudjon róla.
Hívás app.engine(), és első argumentumként adja át a „hbs” karakterláncot. Ezután második argumentumként hívja meg a hbs függvényt, és adjon át egy konfigurációs objektumot egy tulajdonsággal extname állítva "hbs". Ez a beállítás megváltoztatja a bővítmény nevét .handlebars-ról .hbs-re.
app.engine('hbs', hbs({ extname: 'hbs' }));
Végül állítsa a nézetmotort kormányra, így:
app.setViewEngine('hbs');
5. lépés: Hozzon létre mappákat
A projekt gyökérkönyvtárában hozzon létre két új mappát. Az elsőt fogod használni, nyilvános, az alkalmazás stíluslapjainak tárolásához. Ban ben nézetek, akkor az összes HTML-fájlt tárolja.
Ezzel befejeződik a fejlesztői környezet beállítása. A következő részben áttekintést kap a Handlebars szintaxisáról és használatáról a NestJS alkalmazásokban.
A kormányrúd szintaxisa
Ez a rész lefedi a fájlok dinamikus kiszolgálásához szükséges kormányszintaxis nagy részét.
Segítők
A segítők olyan függvények, amelyek átalakítják a kimenetet, ismétlődnek az adatokon, és feltételes kimenetet jelenítenek meg.
A kormányrúd kétféle segédeszközt kínál (Block és Beépített), és egyedi segítőket hozhat létre az Ön igényei szerint.
Segítőt jelölsz, ha dupla göndör zárójelbe tekered. A nevének előtagjaként egy hash-t (#) írjon a nyitó segítő címkéhez, és egy perjelet (/) a záró címkéhez.
Például:
{{!-- ha az érték az igaz, a div meg fog jelenni más, nem lesz --}}
{{#if érték}}
<div>Az érték megjelenítése megtörtént</div>
{{/ha}}
Ha egyéni segítőt hoz létre, regisztrálnia kell azt az Ön számára hbs konfigurációs objektum az Ön fő.ts fájlt, mielőtt felhasználná az alkalmazásban.
// main.ts
import { Egyéni Segítő } tól től './helpers/hbs.helpers';
// A bootstrap függvényen belül
app.engine('hbs', hbs({ extname: 'hbs', segítők: { customHelper } }));
Kifejezések
A kifejezések a kormánysablon egységei. A kifejezések használata a feladat összetettségétől függően változik. Használhatja őket önmagukban egy sablonban, átadhatja őket a segítőknek, és így tovább.
Jelölje a kifejezéseket dupla kapcsos zárójelekkel, például:
<h1>{{üzenet}}</h1>
Részlegesek
A részleges egy előre mentett HTML-részletre utal, mivel több HTML-fájlban is megjelenik. Például navigációs sávok és láblécek. Ezt a tartalmat egy fájlban tárolhatja, és szükség esetén hozzáadhatja.
A statikus és HTML-fájlokhoz hasonlóan be kell állítania egy részleges könyvtárat is app.engine konfigurációs objektum.
Regisztrálja részleges könyvtárát a következő kód hozzáadásával a konfigurációs objektumhoz:
// main.ts
partialsDir: join (__dirname, '..', 'nézetek/részek'),
A részleges hívás szintaxisával férhet hozzá. A dupla kapcsos kapcsos zárójelben írjon be egy nagyobb mint szimbólumot (>), majd a részleges nevét.
Például:
{{> nameOfPartial}}
Elrendezések
A kormányrúd-elrendezés egy HTML-oldal, amely az alkalmazás más HTML-oldalainak mögöttes metaadatok vagy általános struktúrák beállítására szolgál. Konténerként működik egy helyőrzővel, amelybe dinamikus adatokat szúrhat be.
Például:
<!DOCTYPE html>
<html lang="hu">
<fej>
<meta karakterkészlet="UTF-8">
<meta http-equiv="X-UA-kompatibilis" tartalom="IE=él">
<meta név="nézetablak" tartalom="szélesség=eszköz-szélesség, kezdeti lépték=1,0">
<cím>Sablonok a NestJS-ben kormányrúddal</title>
</head>
<test>
<fejléc>
{{!-- Részleges Navbar --}}
{{>navigációs sáv}}
</header>
<div>
{{!-- Törzs helyőrző --}}
{{{test}}}
</div>
{{!-- Részleges lábléc --}}
{{>lábléc}}
</body>
</html>
A kód futtatásakor a Handlebars átveszi a kód tartalmát .hbs A megjeleníteni kívánt fájlt, és beilleszti őket a test helykitöltő. Ezután az eredményt végső HTML-oldalként jeleníti meg.
Regisztrálnia kell az elrendezések könyvtárát a sajátjában app.engine konfigurációs objektumot, és állítson be egy alapértelmezett elrendezési fájlt. Az alapértelmezett elrendezésfájl az az elrendezésfájl, amelyet a Handlebars használ, ha nem határoz meg egy adott elrendezést.
Adja hozzá a következő kódot a konfigurációs objektumhoz az alapértelmezett elrendezés deklarálásához és egy elrendezési könyvtár regisztrálásához:
alapértelmezett elrendezés: 'Az elrendezésfájl neve',
layoutsDir: join (__dirname, '..', 'nézetek/elrendezések'),
.hbs fájl renderelése
A vezérlőfájlba importálja a Res lakberendező től @nestjs/common és Válasz tól től Expressz.
Ezután az útvonalkezelőben adjon át egy argumentumot, res. Rendeljen hozzá egy típusú választ a res-hez, és jegyezze fel a Res dekorátorral. A Res dekorátor megjeleníti az Express natív válaszkezelési módszereit, és letiltja a NestJS szabványos megközelítést.
Ezután hívja meg a renderelési metódust a res-en, és adja át a renderelni kívánt fájl nevét első argumentumként. A második argumentumhoz adjon át egy objektumot, amely tartalmazza az elrendezés nevét és a kifejezés helyettesítő értékét.
A kormány az Ön által beállított alapértelmezett elrendezést fogja használni app.engine konfigurációs objektum, ha nem ad meg elrendezést.
@Kap()
getHello(@Res() res: Válasz){
return res.render('A fájl neve', { elrendezés: 'elrendezés neve', üzenet: 'Helló Világ' });
}
A kormány alternatívái
A kormány kiváló sablonkészítő eszköz, számos praktikus funkcióval, például segítőkkel és elrendezésekkel. Ennek ellenére az Ön igényeitől függően választhat olyan alternatívát, mint az EJS (beágyazott JavaScript), a mopsz vagy a bajusz.
