Gestisci moduli con Express

Uno dei modi più diretti in cui possiamo ottenere i dati degli utenti nelle applicazioni web è attraverso i moduli, sebbene ci siano molti meccanismi per far sì che i dati raggiungano le nostre logiche e controllori delle applicazioni, in fondo devono seguire le stesse regole che i moduli HTML, usa un metodo HTTP per inviare le informazioni.
Questo rende indispensabile la capacità di elaborare e manipolare moduli se vogliamo realizzare applicazioni web complete, con funzionalità che possano essere prese in considerazione e che sviluppino le nostre idee.
1- Per eseguire questo tutorial dobbiamo soddisfare alcuni requisiti precedenti, prima dobbiamo avere un'installazione di Nodo.js funzionale, allora dobbiamo avere un progetto con EsprimereNon importa che non abbia una struttura di cartelle, ma abbiamo bisogno che il framework sia disponibile nella posizione.
2- Dobbiamo avere nozioni di base di npm, e di HTML, poiché sebbene i concetti siano spiegati in modo molto semplice, ci sono fondamenti che non vengono spiegati, come ad esempio cos'è un tag o cos'è un attributo HTML.
3- Infine abbiamo bisogno di un browser e di un editor di testo per poter scrivere e validare la nostra applicazione.
Prima di vedere il funzionamento di Esprimere Per elaborare i moduli, dobbiamo conoscere un po' più in profondità gli aspetti di base di questi, poiché sono una parte vitale della costruzione delle nostre applicazioni quando vogliamo o abbiamo bisogno di catturare i dati dell'utente.
Vediamo il codice seguente in cui abbiamo creato una semplice forma di un campo che cattura il nostro frutto preferito.

Il tuo frutto preferito:Spedire

In primo luogo un form deve essere composto da un'etichetta all'interno di questo deve esserci almeno un attributo metodo che indicherà al nostro browser il modo in cui ci invierà le informazioni, può essere INVIARE o OTTENERE, che sono i metodi HTTP di base, possiamo anche inserire un attributo chiamato azioneSe questo non esiste, il modulo verrà inviato alla stessa rotta che lo serve, se esiste verrà inviato alla rotta specificata come nel caso dell'esempio.
Caratteristiche generaliAll'interno del nostro modulo tutte le etichette funzionano HTML che vogliamo, tuttavia quelli che sono più importanti sono quelli di inserimento dati come nel caso dei tipi poiché queste etichette e il loro valore sono quelli che verranno inviati al momento di fare Invia che è l'altro tipo di input di cui abbiamo bisogno, poiché è il pulsante di azione. Riceveremo i dati con il nome che abbiamo dato alle proprietà patata dolce di ciascuno dei campi che abbiamo creato, è anche importante inserire un attributo id a ciascun campo e che sia univoco per poter manipolare gli elementi in esso contenuti. SOLE in modo elegante.
Come vediamo la forma HTML Nonostante sia un elemento molto semplice, presenta diversi dettagli che vale la pena evidenziare, evidenziare e spiegare per evitare confusione in futuro.
Dopo aver ricevuto un modulo, abbiamo molte opzioni, indipendentemente dal framework che utilizziamo Esprimere, Laravel, Django, eccetera. C'è un processo che è bene seguire, poiché questo è quello che dirà al nostro utente se i suoi dati sono stati ricevuti, se sono stati elaborati o se si è verificato un errore. Questo processo può essere suddiviso in due gruppi, risposta e reindirizzamento.
RispostaIn questo gruppo di azioni, una volta che l'utente invia il modulo e noi eseguiamo un'elaborazione, possiamo inviare una risposta HTML allo stesso, cioè, stampiamo un messaggio, o creiamo una nuova vista, qui possiamo dirti se i dati erano corretti o se c'era un errore. Questa risposta può essere tipo AJAX, in modo che venga generato senza caricare completamente la pagina, o quando si ricarica mostra la nuova vista, o semplicemente genera un messaggio animato con JavaScript.
ReindirizzamentoIn quest'altro gruppo, una volta elaborate le informazioni, reindirizziamo e inviamo l'utente a un'altra vista o semplicemente a una schermata in cui lo ringraziamo per aver utilizzato la nostra applicazione, può sembrare la stessa della risposta, tuttavia ciò che facciamo è inviare l'utente in un altro punto della nostra applicazione.
Per preparare la nostra applicazione Esprimere Per elaborare i moduli, dobbiamo prima installare un plugin chiamato analizzatore del corpo, questo è chi ci aiuterà a manipolare i dati che il browser ci invia. Per farlo nella nostra console Nodo.js dobbiamo usare l'istruzione:

 npm install --save body-parser

Vediamo la risposta generata dall'esecuzione di questa istruzione:

Allora già dentro il nostro file app.js o il nome che abbiamo inserito, dobbiamo semplicemente includere questo middleware per aiutarci con l'interazione:

 app.use (require ('body-parser') ());

Con questo siamo pronti per elaborare il contenuto dei nostri moduli, direttamente nella nostra applicazione Esprimere, Può sembrare un po' complesso perché altri framework non richiedono questo tipo di installazione, tuttavia Esprimere lo fa per darci la libertà di elaborare le informazioni come desideriamo, questo è solo uno dei tanti percorsi che esistono.
Creeremo un form che ha la funzione di catturare il frutto preferito dell'utente. Useremo quello che abbiamo creato nella sezione precedente del tutorial per una maggiore facilità, nella nostra cartella dove abbiamo installato Esprimere, creiamo un file chiamato server.js, app.js o qualunque sia il nome che vogliamo mettere, comunque il contenuto è la cosa importante. All'interno inizieremo richiedendo l'uso di esprimere, quindi dobbiamo generare un oggetto applicazione e questo deve utilizzare il middleware analizzatore del corpo.
Definire i percorsiIl prossimo atto dobbiamo definire i percorsi, nel nostro caso useremo il percorso root per visualizzare il modulo, quindi quando accediamo direttamente alla nostra applicazione avremo direttamente il risultato, quindi creeremo un percorso chiamato processo che riceve il metodo INVIARE, questo quello che farà è ricevere i dati del modulo per stampare finalmente a HTML indicando i dati ricevuti.
Questo ci permetterà di comprendere il flusso del nostro programma, e quindi di poter elaborare in futuro forme più complesse. Vediamo il codice spiegato di seguito:

 var express = require('express'); var bodyParser = require ('body-parser'); var app = express (); app.use (bodyParser()); app.set ("porta", process.env.PORT || 3001); app.get ('/', funzione (req, res) {var html = '' + '' + ''+' Il tuo frutto preferito: '+' '+''+''+' Invia '+''+' '; res.invia (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html =' Il tuo frutto preferito è: '+ fruit +'.
'+' Riprova. '; res.invia (html); }); app.listen (app.get ('port'), function () {console.log ('Express ha iniziato a http: // localhost:' + app.get ('port') + '; premi Ctrl-C per chiudere il server. ');});

Con questo abbiamo completato la creazione della nostra applicazione, ora esamineremo come visualizzarla, per questo dobbiamo semplicemente scrivere le istruzioni:

 nodo server.js

In cui si server.js È il nome che abbiamo inserito nella nostra applicazione e, a seconda della porta che abbiamo inserito, possiamo vedere il nostro modulo nel browser:

Naturalmente questo può essere più estetico, usando Bootstrap, o stili CSSTuttavia, per gli scopi e l'ambito di questo tutorial, è perfetto per comprendere la gestione dei moduli. Se interagiamo con esso scrivendo qualcosa nel campo e facendo clic su invia, vedremo come arriviamo al nostro URL processi:

In questo caso abbiamo lasciato un collegamento per tornare all'inizio, questa elaborazione appartiene al tipo di reindirizzamento, poiché abbiamo inviato l'utente su un altro percorso e abbiamo ricevuto il risultato della sua query lì, ovviamente ci sono molte convalide che ci mancano in questo esempio, ad esempio se viene inviato il campo vuoto, come convalidiamo se una spedizione viene effettuata da un'altra origine, ecc. Sono cose valide ma sfuggono all'obiettivo del tutorial, le menzioniamo solo in modo che tu sappia che seguono altri passaggi nel loro sviluppo come programmatori in Esprimere.
Con questo abbiamo finito questo tutorial, come vediamo Esprimere Ci rende le cose molto più semplici quando trasferiamo le informazioni dal Front-End alla nostra logica, la gestione semplificata dei percorsi e l'uso del middleware per aiutarci a decodificare le informazioni lo rendono perfetto per farci risparmiare tempo di sviluppo.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo