Pe măsură ce o aplicație crește în complexitate, la fel și nevoile sale. La un moment dat, difuzarea fișierelor HTML statice poate împiedica progresul sau poate împiedica funcționalitatea aplicației. În schimb, veți dori să difuzați conținut dinamic, o sarcină pe care motoarele de șabloane, cum ar fi Ghidonul, o fac posibilă.
Ghidonul este un motor de șabloane minim, fără logică, pentru NodeJS. Este o extensie a motorului de șablon mustață. Deoarece este un motor fără logică, îl puteți folosi pentru a separa strict prezentarea de codul de bază.
Ghidonul are un suport excelent ca motor de șabloane din cadrul NestJS.
Ce este un motor de șabloane?
Un motor de șabloane este un instrument care combină etichete HTML și un limbaj de programare pentru a crea un șablon HTML cu cod minim.
Motorul de șablon în timpul execuției injectează date în șablonul HTML pentru a reda vizualizarea finală în browser.
S-ar putea să vi se par complicat să configurați un motor de șabloane precum Ghidon, deoarece implică mulți pași. In orice caz,
cadrul serverului Express pe care NestJS îl folosește în mod implicit are un suport excelent pentru ghidon.Pasul 1: Generați o aplicație NestJS
Rulați următoarea comandă pentru a crea o nouă aplicație Nest:
cuib nou <numele aplicației dvs>
Pasul 2: Instalați ghidonul
Rulați următoarea comandă pentru a instala Handlebars folosind managerul de pachete npm:
npm install express-handlebars@^5.3.0@tipuri/express-handlebars@^5.3.0
Pasul 3: Configurați Instanța Express
Navigați la dvs principale.ts fișier și import Aplicația NestExpress din @nestjs/platform-express.
Atribuiți NestExpressApplication ca tip generic pentru crea metodă.
Ca astfel:
const aplicație = așteaptă NestFactory.create(AppModule)
Transmiterea NestExpressApplication către aplicația obiectul îi oferă acces la metodele exclusive ExpressJS. Veți avea nevoie de aceste metode pentru a configura proprietăți specifice ghidonului.
Pasul 4: Configurați ghidonul
Mai întâi, va trebui să specificați locațiile în care aplicația dvs. va găsi fișierele HTML și alte fișiere statice (foi de stil, imagini etc.). Puteți stoca fișierele HTML într-un „vederi„, și alte fișiere statice într-un „public” folder, respectiv.
Pentru a specifica locațiile, începeți prin a importa a te alatura din cale. Apoi, în interiorul bootstrap funcția, setați locația pentru stiluri.
Ca astfel:
app.useStaticAssets (alăturare (__dirname, '..', 'public'))
Funcția join ia un număr arbitrar de şir argumente, le unește și normalizează calea rezultată. __dirname returnează calea folderului în care principale.ts fișierul rezidă.
Apoi, setați locația fișierelor HTML, astfel:
app.setBaseViewsDir (aderă (__dirname, '..', 'vederi'));
Apoi, importați ghidonele în dvs principale.ts fişier:
import * la fel de hbs din „ghidon expres”;
Veți avea nevoie de hbs import pentru a configura proprietățile ghidonului, cum ar fi numele extensiei etc.
Numele implicit al extensiei de fișier pentru Ghidon este .ghidon.
Acest nume de extensie este lung, dar îl puteți configura cu app.motor apel. app.motor este o funcție nativă de ambalare în jurul valorii expres.motor metodă. Este nevoie de două argumente: ext și o funcție de apel invers. Vezi Documentare expresă pe app.motor pentru a afla mai multe despre el.
Apel app.engine(), și ca prim argument, treceți șirul 'hbs'. Apoi, ca al doilea argument, apelați funcția hbs și treceți un obiect de configurare cu o proprietate extname setat la „hbs”. Această setare schimbă numele extensiei din .handlebars în .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
În cele din urmă, setați motorul de vizualizare la Ghidon astfel:
app.setViewEngine('hbs');
Pasul 5: Creați foldere
În directorul rădăcină al proiectului, creați două foldere noi. Veți folosi primul, public, pentru a stoca foile de stil pentru aplicația dvs. În vederi, veți stoca toate fișierele HTML.
Aceasta încheie configurarea mediului de dezvoltare. În secțiunea următoare, veți avea o prezentare generală a sintaxei Handlebars și a utilizării acesteia într-o aplicație NestJS.
Sintaxa ghidonului
Această secțiune va acoperi cea mai mare parte a sintaxei ghidonului de care aveți nevoie pentru a vă servi fișierele în mod dinamic.
Ajutoare
Ajutoarele sunt funcții care transformă ieșirea, iterează peste date și redă ieșirea condiționată.
Ghidonul oferă două tipuri de ajutoare (Block și Built-in) și puteți crea ajutoare personalizate pentru a se potrivi nevoilor dumneavoastră.
Desemnați un ajutor prin înfășurarea acestuia în bretele duble. Prefixați numele cu un hash (#) pentru o etichetă de ajutor de deschidere și o bară oblică (/) pentru o etichetă de închidere.
De exemplu:
{{!-- dacă valoarea este Adevărat, div-ul va fi redat altfel, nu va --}}
{{#if valoare}}
<div>Valoarea a fost redată</div>
{{/dacă}}
Dacă creați un asistent personalizat, trebuie să îl înregistrați în dvs hbs obiect de configurare în dvs principale.ts fișier înainte de a-l putea folosi în aplicația dvs.
// main.ts
import { customHelper } din './helpers/hbs.helpers';
// În interiorul funcției bootstrap
app.engine('hbs', hbs({ extname: 'hbs', ajutoare: { customHelper } }));
Expresii
Expresiile sunt unitatea unui șablon de ghidon. Utilizarea de către dvs. a expresiilor variază în funcție de complexitatea sarcinii. Puteți să le utilizați singuri într-un șablon, să le transmiteți ca intrare în ajutoare și multe altele.
Indicați expresii cu acolade duble, de exemplu:
<h1>{{mesaj}}</h1>
Parțiale
Un parțial se referă la o bucată de HTML pre-salvată, deoarece apare în mai multe fișiere HTML. De exemplu, barele de navigare și subsolurile. Puteți stoca acel conținut într-un singur fișier și îl puteți include atunci când este necesar.
Ca și în cazul fișierelor dvs. statice și HTML, va trebui, de asemenea, să setați un director parțial în dvs app.motor obiect de configurare.
Înregistrați-vă directorul parțial adăugând următorul cod la obiectul de configurare:
// main.ts
partialsDir: join (__dirname, '..', 'vederi/partiale'),
Puteți accesa un parțial folosind sintaxa de apel parțial. În acolade duble, introduceți un simbol mai mare decât (>) urmat de numele parțialului.
De exemplu:
{{> nameOfPartial}}
Aspecte
Un aspect Handlebars este o pagină HTML utilizată pentru a seta metadatele subiacente sau structura generală pentru alte pagini HTML din aplicație. Acționează ca un container cu un substituent în care puteți injecta date dinamice.
De exemplu:
<!DOCTYPE html>
<html lang="ro">
<cap>
<meta charset="UTF-8">
<meta http-equiv="Compatibil X-UA" continut="IE=marginea">
<meta nume="fereastra" continut="lățime=lățime-dispozitiv, scară inițială=1,0">
<titlu>Șabloane în NestJS cu ghidon</title>
</head>
<corp>
<antet>
{{!-- Navbar Partial --}}
{{>bara de navigare}}
</header>
<div>
{{!-- Substituent pentru corp --}}
{{{corp}}}
</div>
{{!-- Footer Partial --}}
{{>subsol}}
</body>
</html>
Când rulați codul, Handlebars preia conținutul .hbs fișierul pe care doriți să îl randați și le injectați în fișierul corp substituent. Apoi redă rezultatul ca pagina HTML finală.
Va trebui să vă înregistrați directorul de machete în dvs app.motor obiect de configurare și setați un fișier de aspect implicit. Un fișier de aspect implicit este fișierul de aspect pe care Handlebars îl utilizează dacă nu definiți un aspect specific.
Adăugați următorul cod la obiectul dvs. de configurare pentru a declara un aspect implicit și pentru a înregistra un director de machete:
defaultLayout: 'Numele fișierului de aspect',
layoutsDir: join (__dirname, '..', 'vizualizări/aspectări'),
Redarea unui fișier .hbs
În fișierul controlerului, importați Res decorator din @nestjs/common și Raspuns din expres.
Apoi, în gestionarea rutei, transmiteți un argument, res. Atribuiți un tip de răspuns la res și adnotați-l cu decoratorul Res. Decoratorul Res expune metodele native de gestionare a răspunsului Express și dezactivează abordarea standard NestJS.
Apoi, apelați metoda de randare pe res și transmiteți numele fișierului pe care doriți să îl redați ca prim argument. Pentru al doilea argument, transmiteți un obiect care conține numele aspectului și valoarea de înlocuire pentru o expresie.
Ghidonul va folosi aspectul implicit setat în dvs app.motor obiect de configurare dacă nu furnizați un aspect.
@Obține()
ia salut(@Rez() res: Raspuns){
return res.render('Numele fișierului', { layout: 'numele aspectului', mesaj: 'Salut Lume' });
}
Alternative la Ghidon
Ghidonul este un instrument excelent de șabloane, cu multe caracteristici utile, cum ar fi ajutoare și machete. Totuși, în funcție de nevoile dvs., puteți alege o alternativă, cum ar fi EJS (Embedded JavaScript), Pug sau Mustache.