Usa modelli con manubri in Express.js

L'utilizzo dei template è diventato una necessità nel mondo delle applicazioni web, questo perché ci aiuta a separare la logica di programmazione dalla sua presentazione. Tutta questa separazione e l'aumento della ricezione di questo stile di sviluppo hanno portato alla comparsa di un gran numero di quadri nel mercato che ci aiutano a portare la responsabilità della gestione dei modelli.
In caso di Esprimere, questo viene nativamente con un motore di template chiamato GiadaTuttavia, molti sviluppatori hanno già un background in altri e non sarebbe giusto che debbano adattarsi nuovamente a un nuovo motore, questo non è male ma non è per tutti i gusti.
È per questo Esprimere ci consente di configurare il framework in modo da poter lavorare con diversi motori di template, come Manubrio che è un'estensione di baffi.js ed è un motore di template molto popolare poiché è basato su JavaScript e possiamo usarlo sia lato server che client.
RequisitiPer rispettare alcuni degli esempi mostrati qui, è necessario aver installato e aver accesso a Nodo.jse aver installato in precedenza Esprimere. Un editor di testo e un'applicazione Esprimere sono desiderabili in modo che possano incorporare i concetti spiegati nel tutorial.
Svantaggi di non utilizzare un motore di modelliIl non utilizzo di un motore di modelli comporta una serie di svantaggi che possono influire sulla velocità di sviluppo della nostra applicazione, elencheremo questi svantaggi in modo che quando pensiamo che non abbiamo bisogno del motore di modelli vedremo il contrario.
Il rischio di creare HTML non valido è molto più alto, quindi ottenere le certificazioni per il nostro codice può essere difficile.
Il codice risultante può essere difficile da documentare e condividere con altri sviluppatori.
Se usiamo il codice per generare HTML sarà sempre scomodo lavorare con caratteri speciali.
C'è una tendenza a non separare la logica dell'applicazione dalla presentazione.
Come possiamo vedere ci sono molti svantaggi che sebbene non siano gravi e non portano la nostra applicazione a non funzionare se riduce la possibilità di essere più produttivi.
Vantaggi dell'utilizzo di un motore di modelliOra vediamo cosa otterremo implementando soluzioni come Handlebars nelle nostre applicazioni con Express:
Il codice risultante è più organizzato e abbiamo la garanzia che non ci saranno HTML malformati.
Possiamo separare il nostro team in due, lavorando interfacce utente senza la necessità di sviluppare in Back-End.
I motori dei modelli ci consentono di riutilizzare sezioni di codice, contribuendo così a mantenere il nostro progetto ottimizzato.
Ci sono molte utilità che ci aiutano a fornire una migliore interazione con la parte visiva delle nostre applicazioni.
Il modo in cui vediamo cosa ci offrono i motori di template è essere in grado di separare, ottimizzare e organizzare il nostro codice, questo porta come diretta conseguenza il miglioramento dell'efficacia, dell'efficienza e della produttività generale nel nostro team di sviluppo.
All'inizio del tutorial abbiamo detto che Giada era il motore predefinito, quindi perché cerchiamo un altro motore? La risposta è molto semplice, il modo in cui funziona Giada sta cercando di diminuire la quantità di HTML scriviamo, questo può creare un po' di confusione, in quanto dobbiamo praticamente imparare una nuova forma di linguaggio per il nostro Fine frontale.
Nell'immagine seguente vedremo un codice modello di Giada quindi possiamo vedere un esempio della sua sintassi:

Possiamo notare che la differenza con il codice HTML Lo standard è abissale e, sebbene il codice sia inferiore, la quantità di pensiero coinvolta è un po' maggiore.
Manubrio è una storia diversa da Giada, il suo modo di funzionare è simile ad altri motori come Jinja2 o Swig, poiché ci permette di scrivere etichette HTML e poi all'interno con il nostro codice motore possiamo definire cosa stampa dal contesto e come lo fa.
Ad esempio, se sappiamo che stamperemo qualcosa che un utente ha scritto, possiamo automaticamente sfuggire ai caratteri speciali e quindi evitare l'iniezione di codice, ma se sappiamo che è il nostro codice, possiamo esprimerlo in Manubrio che non sfugge al testo.
Server o clientUn altro aspetto di Manubrio è che può funzionare in due modi, dal lato server o dal lato client. Questa versatilità significa che possiamo decidere meglio come vogliamo eseguire le nostre applicazioni, poiché se è un SPA o Applicazione a pagina singola, forse l'approccio lato client è più semplice e utile, ma se vogliamo un sito web forse è più utile generare tutto sul server.
Per installare Manubrio sul lato server è molto semplice, dobbiamo solo usare npm nella nostra console e così otterremo i pacchetti necessari, vediamo cosa dobbiamo scrivere:

 npm install --save express-handlebars

Con quello npm Sta per scaricare tutti i componenti necessari in modo che possiamo incorporare questo motore nel nostro progetto, alla fine dovremmo ottenere un risultato simile al seguente nella nostra console:

Quindi nel nostro file dove iniziamo la nostra applicazione Esprimere Dobbiamo dirgli di usare questo come motore del modello, per questo dobbiamo semplicemente scrivere il seguente codice:

 var handlebars = require ('express-handlebars') .create ({defaultLayout: 'main'}); app.engine ('handlebars', handlebars.engine); app.set ('view engine', 'handlebars');

Ciò che rimarrebbe nel nostro file sarebbe il seguente:

Sintassi di base del manubrioManubrio Ha una sua sintassi molto pulita che ci consente di incorporare un po' di logica di visualizzazione nel modello, possiamo incorporare commenti, scorrere elenchi e blocchi, eseguire l'escape o meno di sezioni di testo. Ecco perché è importante conoscere le più elementari in modo da poter esprimere le nostre idee più comodamente e quindi ottenere il massimo da esse, vediamo di seguito le più elementari del motore.
Di conseguenza, la nostra vista genera dati che dobbiamo mostrare all'utente, passiamo questi dati attraverso il contesto al nostro modello ed è qui che li stampiamo. Per stamparlo dobbiamo semplicemente racchiudere la variabile o l'elemento tra doppie parentesi come il seguente:

 {{Nome}}

Questo ci porta a vedere il contenuto di "Nome" che abbiamo definito a nostro avviso, queste doppie parentesi graffe salvano automaticamente i caratteri, in modo tale che non si traduca nella stampa di codice che non è consentita per impostazione predefinita dello sviluppatore.
Ora se vogliamo stampare un testo senza l'escape dobbiamo usare le parentesi quadre, questo dice Manubrio che nulla deve sfuggire, vediamo l'esempio:

 {{{Nomi}}}

Questo se ci permette di stampare il codice HTML, caratteri speciali e persino JavaScript senza l'intervento del nostro motore.
Il Commenti nel modello sono fondamentali, in quanto ci consentono di identificare sezioni, aggiungere informazioni importanti e documentare la nostra applicazione. Se mettiamo un commento direttamente su HTML nel modulo: questo finisce per essere visibile a chi controlla il codice della nostra pagina, quindi ci limita in ciò che possiamo lasciare documentato.
Ma se usiamo i commenti in Manubrio, possiamo sempre vederli nel codice sorgente, ma il motore quando genera ciò che l'utente vede lo omette, e quindi quando ispezioniamo il codice del web o dell'applicazione non vedremo nulla. Per scrivere un commento su Manubrio dobbiamo fare quanto segue:

 {{! il nostro commento}}

Ciò significa che il contenuto del commento non viene mai generato nel risultato che è visibile ai nostri utenti, rendendo segreto ciò che scriviamo per coloro che sono al di fuori del nostro team di sviluppo.
Qualcosa che non dobbiamo dimenticare è che non dobbiamo limitarci a ciò che è nel corrente principale, ci sono molte opzioni che possono essere migliori per lo stile di sviluppo di ogni persona, motivo per cui è fondamentale fare ricerca e non aver paura di provare cose nuove.
Con questo abbiamo finito questo tutorial, abbiamo avuto una piccola ma piuttosto arricchente introduzione a cosa significa l'uso dei modelli e come incorporare un nuovo motore in Esprimere.
sì ok Manubrio è molto più ampio, ma con questi concetti chiave e la nostra applicazione Esprimere saremo in grado di realizzare cose molto interessanti in breve tempo.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo