Ciao a tutti e benvenuti in questa semplice guida su Node.js dove andremo a vedere come gestire le richieste POST inviate ad un server Express.js
Se siete interessati nella guida e la spiegazione potete leggere questa guida. Se invece volete solamente usare il codice, potete trovare il codice intero sulla nostra repository GitHub.
Cominciamo subito con la guida!
Una richiesta POST è una richiesta http (solitamente creata al lato client) contenente delle informazioni. Per esempio se un utente di un sito compila una form di registrazione, viene inviata una richiesta POST dal browser contenente username e password inserite nella form.
Vediamo come gestire le richieste di tipo POST usando Express.js
Come inviare una richiesta POST da un browser
Prima di tutto vediamo come creare una richiesta di tipo POST da un browser. Per fare ciò andiamo semplicemente a creare una form in una pagina HTML.
Creiamo un file chiamato index.html nella directory del nostro progetto con il seguente contenuto:
<!DOCTYPE html> <html> <head><title>Test POST node.js</title> </head> <body><form action="/" method="POST"><label>Username</label><input type="text" name="username"><label>Password</label><input type="text" name="pass"><input type="submit" name="submit"></form> </body> </html>
Come vedete questo file contiene una form che invierà due campi (username e pass) al server all’indirizzo home (“/”) definito dalla proprietà action della form.
Ora creiamo un server usando node.js ed express.js per servire la pagina index.html all’indirizzo ‘/’
Create un file chiamato main.js (nella stessa directory di index.html) con il seguente contenuto:
var express = require("express"); var app = express(); var path = require('path'); app.get("/", function(req, res) {res.sendFile(path.join(__dirname + '/index.html')); }); var port = process.env.PORT || 5000; app.listen(port, function() {console.log("Listening on " + port); });
Questo codice, quando eseguito, creerà un server sulla port 5000 del vostro pc. Per ulteriori informazioni sui server node.js potete consultare le nostre guide node.js su devenws.it
Una volta salvato il file main.js possiamo eseguirlo aprendo una nuova finestra del Terminal / cmd. Navigate dal Terminal alla directory del file main.js ed eseguite il comando:
node main.js
Dovreste vedere in output una scritta del tipo “Listening on port 5000”
Se avete eseguito il server correttamente, potete navigare usando un browser all’indirizzo localhost:5000 e dovreste vedere la pagina index.html e la form che abbiamo creato nel passo precedente. Come potete vedere, se provate ad inviare la form vi verrà mostrato un messaggio di errore del tipo: Cannot POST /
Questo errore viene mostrato perché ancora non abbiamo inserito il codice node.js necessario per gestire la richiesta POST. Vediamo come:
Come ricevere una richiesta POST con node.js ed Express.js
Andiamo a modificare il file main.js per rimanere in ‘ascolto’ per eventuali richieste POST all’indirizzo home ‘/’
Inserite questo codice dopo la gestione della richiesta GET per la pagina index.html:
app.post("/", function(req,res){console.log("Ricevuto una richiesta POST"); });
Ecco il file main.js completo:
var express = require("express"); var app = express(); var path = require('path'); app.get("/", function(req, res) {res.sendFile(path.join(__dirname + '/index.html')); }); app.post("/", function(req,res){console.log("Ricevuto una richiesta POST"); }); var port = process.env.PORT || 5000; app.listen(port, function() {console.log("Listening on " + port); });
Ora vediamo come ottenere i dati inviati in una richiesta POST.
Come ottenere i dati di una richiesta POST con Node.js e Express.js
I campi di una richiesta POST sono contenuti nel ‘body’ della richiesta http. Per ispezionare il contenuto della richiesta e del suo contenuto dobbiamo far uso di un modulo js chiamato body-parser.
Per installare il modulo, aprite una finestra del Terminal.
Navigate nella stessa directory dei file main.js e index.html
Eseguite il seguente comando:
npm install body-parser
Una volta installato il modulo body-parser, dobbiamo inserire queste due righe di codice nella parte superiore del file main.js
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));
Con questo codice specifichiamo che il server Express deve far uso del modulo body-parser.
Ora possiamo accedere ai dati all’interno della funzione della gestione della richiesta POST.
Modificate la funzione app.post() nel seguente modo:
app.post("/", function(req,res){console.log("Ricevuto una richiesta POST");// contenuto della richiestaconsole.log(req.body);// usernameconsole.log(req.body.username);// passwordconsole.log(req.body.pass); });
Come potete vedere ora possiamo accedere al contenuto della richiesta POST.
Ecco il file main.js completo:
var express = require("express"); var app = express(); var path = require('path'); var bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({ extended: false })); app.get("/", function(req, res) {res.sendFile(path.join(__dirname + '/index.html')); }); app.post("/", function(req,res){console.log("Ricevuto una richiesta POST");// contenuto della richiestaconsole.log(req.body);// usernameconsole.log(req.body.username);// passwordconsole.log(req.body.pass); }); var port = process.env.PORT || 5000; app.listen(port, function() {console.log("Listening on " + port); });
Eseguite questo file dal terminal con il comando:
node main.js
Ora se navigate all’indirizzo localhost:5000 dal vostro browser e compilate ed inviate la form, potete vedere in output nel Terminal i dati che avete inserito.
Ci siamo! Ora sapete come gestire una richiesta POST usando node.js e un server Express.
