Man mano che un'applicazione cresce in complessità, crescono anche le sue esigenze. Ad un certo punto, la pubblicazione di file HTML statici potrebbe ostacolare l'avanzamento o limitare la funzionalità dell'app. Invece, ti consigliamo di servire contenuti dinamici, un'attività resa possibile da motori di modelli come Handlebars.
Handlebars è un motore di modelli minimale e privo di logica per NodeJS. È un'estensione del motore del modello di baffi. Poiché è un motore senza logica, puoi usarlo per separare rigorosamente la presentazione dal codice sottostante.
Il manubrio ha un ottimo supporto come motore di modelli dal framework NestJS.
Che cos'è un motore di creazione di modelli?
Un motore di modelli è uno strumento che combina tag HTML e un linguaggio di programmazione per creare un modello HTML con un codice minimo.
Il motore del modello in fase di esecuzione inietta i dati nel modello HTML per eseguire il rendering della vista finale nel browser.
Potresti trovare complicato impostare un motore di modelli come Manubrio, poiché richiede molti passaggi. Tuttavia,
la struttura del server Express che NestJS utilizza per impostazione predefinita ha un eccellente supporto per i manubri.Passaggio 1: genera un'applicazione NestJS
Esegui il comando seguente per impalcare una nuova applicazione Nest:
nido nuovo <nome della tua app>
Passaggio 2: installare i manubri
Esegui il comando seguente per installare Handlebars utilizzando il gestore di pacchetti npm:
npm install express-handlebars@^5.3.0@tipi/express-handlebars@^5.3.0
Passaggio 3: configura l'istanza rapida
Vai al tuo main.ts archiviare e importare Applicazione NestExpress da @nestjs/platform-express.
Assegna NestExpressApplication come tipo generico a creare metodo.
Così:
cost app = aspettare NestFactory.creare(AppModulo)
Passando NestExpressApplication a app l'oggetto gli dà accesso ai metodi esclusivi di ExpressJS. Avrai bisogno di questi metodi per configurare specifiche proprietà dei manubri.
Passaggio 4: configurare i manubri
Innanzitutto, dovrai specificare le posizioni in cui la tua applicazione troverà l'HTML e altri file statici (fogli di stile, immagini, ecc.). Puoi archiviare i tuoi file HTML in un "visualizzazioni” e altri file statici in un “pubblicocartella ", rispettivamente.
Per specificare le posizioni, inizia importando giuntura da sentiero. Poi, all'interno del bootstrap funzione, impostare la posizione per gli stili.
Così:
app.useStaticAssets (unisciti a (__dirname, '..', 'pubblico'))
La funzione join accetta un numero arbitrario di corda argomenti, li unisce e normalizza il percorso risultante. __nome_dir restituisce il percorso della cartella in cui il file main.ts il file risiede.
Quindi, imposta la posizione per i tuoi file HTML, in questo modo:
app.setBaseViewsDir (unisciti a (__dirname, '..', 'visualizzazioni'));
Quindi, importa Manubri nel tuo main.ts file:
importare * come hbs da 'manubri express';
Avrai bisogno del hbs importa per configurare le proprietà dei manubri come il nome dell'estensione, ecc.
Il nome dell'estensione di file predefinito per i manubri è .manubrio.
Questo nome di estensione è lungo, ma puoi configurarlo con app.engine chiamata. app.engine è una funzione wrapper nativa attorno a motore.espresso metodo. Occorrono due argomenti: est e una funzione di richiamata. Vedi il Esprimere la documentazione su app.engine per saperne di più.
Chiamata app.motore()e come primo argomento, passa la stringa 'hbs'. Quindi, come secondo argomento, chiama la funzione hbs e passa un oggetto di configurazione con una proprietà extname impostato 'hb'. Questa impostazione cambia il nome dell'estensione da .handlebars a .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
Infine, imposta il motore di visualizzazione su Manubri in questo modo:
app.setViewEngine('hbs');
Passaggio 5: crea cartelle
Nella directory principale del tuo progetto, crea due nuove cartelle. Userai il primo, pubblico, per memorizzare i fogli di stile per la tua applicazione. In visualizzazioni, memorizzerai tutti i tuoi file HTML.
Questo conclude la configurazione dell'ambiente di sviluppo. Nella sezione successiva, avrai una panoramica della sintassi del manubrio e del suo utilizzo in un'applicazione NestJS.
La sintassi del manubrio
Questa sezione tratterà la maggior parte della sintassi del manubrio di cui hai bisogno per servire i tuoi file in modo dinamico.
Aiutanti
Gli helper sono funzioni che trasformano l'output, eseguono l'iterazione sui dati e rendono l'output condizionale.
Manubrio fornisce due tipi di helper (Block e Built-in) e puoi creare helper personalizzati in base alle tue esigenze.
Indichi un aiutante avvolgendolo tra parentesi graffe doppie. Prefissare il suo nome con un hash (#) per un tag helper di apertura e una barra (/) per un tag di chiusura.
Per esempio:
{{!-- Se il valore è VERO, verrà eseguito il rendering del div altro, non --}}
{{#se valore}}
<div>Il valore è stato reso</div>
{{/Se}}
Se crei un helper personalizzato, devi registrarlo nel tuo hbs oggetto di configurazione nel tuo main.ts file prima di poterlo utilizzare nella tua applicazione.
// main.ts
importare {customHelper} da './helpers/hbs.helpers';
// All'interno della funzione bootstrap
app.engine('hbs', hbs({ extname: 'hbs', aiutanti: { customHelper } }));
Espressioni
Le espressioni sono l'unità di un modello di manubrio. L'uso delle espressioni varia a seconda della complessità dell'attività. Puoi usarli da soli in un modello, passarli come input negli helper e altro ancora.
Denota espressioni con parentesi graffe doppie, ad esempio:
<h1>{{Messaggio}}</h1>
Parziali
Un parziale si riferisce a un pezzo di HTML pre-salvato perché appare in diversi file HTML. Ad esempio, barre di navigazione e piè di pagina. Puoi archiviare quel contenuto in un file e includerlo quando necessario.
Come con i tuoi file statici e HTML, dovrai anche impostare una directory parziale nel tuo app.engine oggetto di configurazione.
Registra la tua directory parziale aggiungendo il seguente codice al tuo oggetto di configurazione:
// main.ts
parzialisDir: join (__dirname, '..', 'viste/parziali'),
È possibile accedere a un parziale utilizzando la sintassi di chiamata parziale. Tra parentesi graffe doppie, immettere un simbolo maggiore di (>) seguito dal nome del parziale.
Per esempio:
{{> nomediparziale}}
Layout
Un layout Handlebars è una pagina HTML utilizzata per impostare i metadati sottostanti o la struttura generale per altre pagine HTML nell'applicazione. Funziona come un contenitore con un segnaposto in cui puoi inserire dati dinamici.
Per esempio:
<!DOCTYPE html>
<lingua html="it">
<testa>
<metacarattere="UTF-8">
<meta http-equiv="Compatibile con X-UA" contenuto="IE=bordo">
<metanome="vista" contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0">
<titolo>Creazione di modelli in NestJS con manubrio</title>
</head>
<corpo>
<intestazione>
{{!-- Navbar parziale --}}
{{>barra di navigazione}}
</header>
<div>
{{!-- Segnaposto del corpo --}}
{{{corpo}}}
</div>
{{!-- Piè di pagina parziale --}}
{{>piè di pagina}}
</body>
</html>
Quando esegui il codice, Handlebars prende il contenuto del file .hbs file di cui desideri eseguire il rendering e li inserisce nel file corpo segnaposto. Quindi esegue il rendering del risultato come pagina HTML finale.
Dovrai registrare la tua directory dei layout nel tuo app.engine oggetto di configurazione e impostare un file di layout predefinito. Un file di layout predefinito è il file di layout utilizzato da Handlebars se non si definisce un layout specifico.
Aggiungi il codice seguente al tuo oggetto di configurazione per dichiarare un layout predefinito e registrare una directory di layout:
layout predefinito: 'Nome del file di layout',
layoutsDir: join (__dirname, '..', 'viste/layout'),
Rendering di un file .hbs
Nel file del controller, importa il file ris decoratore da @nestjs/comune e Risposta da esprimere.
Quindi nel gestore del percorso, passa un argomento, ris. Assegna un tipo di risposta a res e annotalo con il decoratore Res. Il decoratore Res espone i metodi di gestione della risposta nativi di Express e disabilita l'approccio standard NestJS.
Quindi, chiama il metodo render su res e passa il nome del file che vuoi renderizzare come primo argomento. Per il secondo argomento, passare un oggetto contenente il nome del layout e il valore sostitutivo di un'espressione.
I manubri utilizzeranno il layout predefinito impostato nel tuo app.engine oggetto di configurazione se non si fornisce un layout.
@Ottenere()
getHello(@Ris() ris: Risposta){
restituisci res.render('Nome del file', { disposizione: 'nome del layout', Messaggio: 'Ciao mondo' });
}
Alternative al manubrio
Manubrio è un eccellente strumento di creazione di modelli con molte funzioni utili come aiutanti e layout. Tuttavia, a seconda delle tue esigenze, puoi scegliere un'alternativa come EJS (Embedded JavaScript), Pug o Moustache.
