Naarmate een applicatie complexer wordt, nemen ook de behoeften toe. Op een gegeven moment kan het aanbieden van statische HTML-bestanden de voortgang belemmeren of de functionaliteit van de app belemmeren. In plaats daarvan wil je dynamische inhoud aanbieden, een taak die template-engines zoals Handlebars mogelijk maken.
Stuur is een minimale, logica-loze template engine voor NodeJS. Het is een uitbreiding van de snorsjabloon-engine. Omdat het een logica-loze engine is, kun je het gebruiken om de presentatie strikt te scheiden van de onderliggende code.
Stuur heeft geweldige ondersteuning als template-engine van het NestJS-framework.
Wat is een sjabloonengine?
Een template-engine is een tool die HTML-tags en een programmeertaal combineert om met minimale code een HTML-sjabloon te maken.
De sjabloonengine injecteert tijdens runtime gegevens in de HTML-sjabloon om de uiteindelijke weergave in de browser weer te geven.
U vindt het misschien ingewikkeld om een template-engine zoals Handlebars op te zetten, omdat het veel stappen omvat. Echter,
het Express-serverframework die NestJS standaard gebruikt, heeft uitstekende ondersteuning voor sturen.Stap 1: Genereer een NestJS-applicatie
Voer de volgende opdracht uit om een nieuwe Nest-app te installeren:
nieuw nest <naam van je app>
Stap 2: Installeer het stuur
Voer de volgende opdracht uit om Handlebars te installeren met: de npm-pakketbeheerder:
npm install express-stuur@^5.3.0@soorten/express-handlebars@^5.3.0
Stap 3: Express-instantie configureren
Navigeer naar uw hoofd.ts bestand en import NestExpressApplicatie van @nestjs/platform-express.
Wijs NestExpressApplication toe als een generiek type aan de creëren methode.
Zoals zo:
const app = wachten NestFactory.create(App-module)
NestExpressApplication doorgeven aan de app object geeft het toegang tot ExpressJS-exclusieve methoden. U hebt deze methoden nodig om specifieke stuureigenschappen te configureren.
Stap 4: Configureer het stuur
Eerst moet u de locaties specificeren waar uw toepassing de HTML en andere statische bestanden (stylesheets, afbeeldingen, enz.) zal vinden. U kunt uw HTML-bestanden opslaan in een “keer bekeken” map en andere statische bestanden in een “openbaar” map, respectievelijk.
Om de locaties op te geven, begint u met importeren meedoen van pad. Dan, binnen de bootstrap functie, stelt u de locatie voor de stijlen in.
Zoals zo:
app.useStaticAssets (join (__dirname, '..', 'openbaar'))
De join-functie heeft een willekeurig aantal snaar argumenten, voegt ze samen en normaliseert het resulterende pad. __naam geeft het pad terug van de map waar de hoofd.ts bestand verblijft.
Stel vervolgens de locatie voor uw HTML-bestanden in, zoals zo:
app.setBaseViewsDir (deelnemen aan (__dirname, '..', 'keer bekeken'));
Importeer vervolgens het stuur in uw hoofd.ts het dossier:
importeren * net zo hbs van 'express-stuur';
Je hebt de nodig hbs import om eigenschappen van het stuur te configureren, zoals de naam van de extensie, enz.
De standaard bestandsextensienaam voor Handlebars is .stuur.
Deze extensienaam is lang, maar u kunt deze configureren met de app.engine telefoongesprek. app.engine is een native wrapper-functie rond de express.motor methode. Er zijn twee argumenten nodig: ext en een terugbelfunctie. Zie de Express documentatie op app.engine om er meer over te weten te komen.
Telefoongesprek app.engine(), en geef als eerste argument de string 'hbs' door. Roep vervolgens als tweede argument de functie hbs aan en geef een configuratieobject door met een eigenschap extname ingesteld op 'hbs'. Deze instelling verandert de extensienaam van .handlebars in .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
Stel ten slotte de weergave-engine als volgt in op Stuur:
app.setViewEngine('hbs');
Stap 5: Mappen maken
Maak in de hoofdmap van uw project twee nieuwe mappen. Je gebruikt de eerste, openbaar, om de stylesheets voor uw toepassing op te slaan. In keer bekeken, slaat u al uw HTML-bestanden op.
Hiermee is de inrichting van uw ontwikkelomgeving afgerond. In het volgende gedeelte heb je een overzicht van de stuursyntaxis en het gebruik ervan in een NestJS-applicatie.
De syntaxis van het stuur
Dit gedeelte behandelt het grootste deel van de stuursyntaxis die u nodig hebt om uw bestanden dynamisch te presenteren.
Helpers
Helpers zijn functies die uitvoer transformeren, gegevens herhalen en voorwaardelijke uitvoer weergeven.
Stuur biedt twee soorten helpers (blokkerend en ingebouwd) en u kunt aangepaste helpers maken die aan uw behoeften voldoen.
Je duidt een helper aan door hem in dubbele accolades te wikkelen. Prefix zijn naam met een hekje (#) voor een openingstag en een schuine streep (/) voor een afsluitende tag.
Bijvoorbeeld:
{{!-- als de waarde is WAAR, de div wordt gerenderd anders, het zal niet --}}
{{#if waarde}}
<div>De waarde is weergegeven</div>
{{/als}}
Als u een aangepaste helper aanmaakt, moet u deze registreren in uw hbs configuratie-object in uw hoofd.ts bestand voordat u het in uw toepassing kunt gebruiken.
// belangrijkste.ts
importeren { customHelper } van './helpers/hbs.helpers';
// Binnen de bootstrap-functie
app.engine('hbs', hbs({ extname: 'hbs', helpers: { customHelper } }));
Uitdrukkingen
Expressies zijn de eenheid van een stuursjabloon. Uw gebruik van uitdrukkingen is afhankelijk van de complexiteit van de taak. Je kunt ze alleen in een sjabloon gebruiken, ze doorgeven als input voor helpers en meer.
Geef uitdrukkingen met dubbele accolades aan, bijvoorbeeld:
<h1>{{bericht}}</h1>
Gedeelten
Een gedeeltelijk verwijst naar een stuk HTML dat vooraf is opgeslagen omdat het in meerdere HTML-bestanden voorkomt. Bijvoorbeeld navigatiebalken en voetteksten. U kunt die inhoud in één bestand opslaan en indien nodig opnemen.
Net als bij uw statische en HTML-bestanden, moet u ook een partiële map in uw app.engine configuratie object.
Registreer uw partiële directory door de volgende code toe te voegen aan uw configuratieobject:
// belangrijkste.ts
PartialsDir: join (__dirname, '..', 'weergaven/gedeelten'),
U kunt toegang krijgen tot een gedeeltelijke met behulp van de gedeeltelijke oproepsyntaxis. Voer tussen dubbele accolades een groter dan-symbool (>) in, gevolgd door de naam van de partiële.
Bijvoorbeeld:
{{> nameOfPartial}}
Lay-outs
Een stuurlay-out is een HTML-pagina die wordt gebruikt om onderliggende metagegevens of algemene structuur voor andere HTML-pagina's in de toepassing in te stellen. Het fungeert als een container met een tijdelijke aanduiding waarin u dynamische gegevens kunt injecteren.
Bijvoorbeeld:
<!DOCTYPE html>
<html lang="en">
<hoofd>
<meta-tekenset="UTF-8">
<meta http-equiv="X-UA-compatibel" inhoud="IE=edge">
<metanaam="uitkijk postje" inhoud="breedte = apparaatbreedte, initiële schaal = 1,0">
<titel>Sjablonen in NestJS met stuur</title>
</head>
<lichaam>
<koptekst>
{{!-- Navigatiebalk gedeeltelijk --}}
{{>navigatiebalk}}
</header>
<div>
{{!-- Tijdelijke aanduiding voor hoofdtekst --}}
{{{lichaam}}}
</div>
{{!-- Voettekst gedeeltelijk --}}
{{>voettekst}}
</body>
</html>
Wanneer u uw code uitvoert, neemt Handlebars de inhoud van de .hbs bestand dat u wilt renderen en injecteert ze in de lichaam tijdelijke aanduiding. Vervolgens wordt het resultaat weergegeven als de uiteindelijke HTML-pagina.
U moet uw lay-outmap registreren in uw app.engine configuratieobject en stel een standaardlay-outbestand in. Een standaard lay-outbestand is het lay-outbestand dat Handlebars gebruikt als u geen specifieke lay-out definieert.
Voeg de volgende code toe aan uw configuratieobject om een standaardlay-out te declareren en een lay-outmap te registreren:
standaard layout: 'Naam van het lay-outbestand',
layoutsDir: join (__dirname, '..', 'weergaven/lay-outs'),
Een .hbs-bestand renderen
Importeer in uw controllerbestand de Onderzoek decorateur van @nestjs/common en Antwoord van uitdrukken.
Geef dan in je route-handler een argument door, res. Wijs een type reactie toe aan res en annoteer het met de Res-decorateur. De Res-decorateur legt de native responsverwerkingsmethoden van Express bloot en schakelt de standaardbenadering van NestJS uit.
Roep vervolgens de rendermethode op res aan en geef de naam van het bestand dat u wilt weergeven als eerste argument door. Geef voor het tweede argument een object door dat de naam van de lay-out en de vervangende waarde voor een uitdrukking bevat.
Het stuur gebruikt de standaardlay-out die is ingesteld in uw app.engine configuratieobject als u geen lay-out opgeeft.
@Krijgen()
getHallo(@Res() onderzoek: Antwoord){
retourneer re.render('Naam van bestand', { indeling: 'naam van lay-out', bericht: 'Hallo Wereld' });
}
Alternatieven voor stuur
Stuur is een uitstekende sjabloontool met veel handige functies zoals helpers en lay-outs. Toch kunt u, afhankelijk van uw behoeften, een alternatief kiezen zoals EJS (Embedded JavaScript), Pug of Moustache.
