EXPRESS JS by NODE overview: come nelle opere di Bosch per il neofita è meglio conoscere i dettagli del quadro ma senza avvicinarsi troppo!

In questo tutorial vedremo il potenziale offerto dal modulo Express.js presente in node. Si tratta di una tappa obbligata prima di lanciarsi su Marte, in quanto senza le problematiche legate a http non ci sarebbe nessuna tappa intermedia con l’allunaggio. A questo punto molti si chiederanno: ma devo avere la laurea per conoscere questa potentissima libreria? No. Prima di imparare Express.js, devi avere le conoscenze di base di JavaScript e Node.js. Il punto di forza di Express.js come libreria? È un dispositivo veloce, robusto e asincrono che ha rivoluzionato il modo di andare nello spazio (sempre per essere coerenti e usare la metafora dei viaggi spaziali). In questo articolo ci limiteremo a vedere questo oggetto da lontano e in maniera distaccata come faremmo di fronte a un quadro di Bosch perchè se ci avviciniamo troppo al quadro (alle problematiche tecniche) rischieremo di bruciarci un ideale di bellezza. Quindi alla domanda che cos’è Express.js potremmo adeguarci alle risposte accademiche e dire che Express è un framework web veloce, deciso, essenziale e moderato di Node.js. Puoi assumere express come un layer creato nella parte superiore di Node.js che aiuta a gestire un server e le route. Fornisce un solido set di funzionalità per lo sviluppo di applicazioni Web e mobili. In particolare Express framework:

o Può essere utilizzato per progettare applicazioni Web a pagina singola, multipagina e ibrida.
o Permette di installare software per rispondere alle richieste HTTP.
o Definisce una tabella di routing che viene utilizzata per eseguire diverse azioni in base al metodo HTTP e all’URL.
o Consente di eseguire il rendering dinamico di pagine HTML in base al passaggio di argomenti ai modelli.

Perché usare Express?

o I / O ultra veloce
o Asincrono e a thread singolo
o struttura simile a MVC
o L’API robusta semplifica il routing

Applicazione express esempio: basic_express.js:

var express = require(‘express’);
var app = express();
app.get(‘/’, function (req, res) {
res.send(‘Welcome to Skyapper!’);
});
var server = app.listen(8000, function () {
var host = server.address().address;
var port = server.address().port;
console.log(‘Example app listening at http://%s:%s’, host, port);
});

Innanzitutto, è necessario installare il framework express a livello globale per creare un’applicazione Web utilizzando il terminale Node e la common line interface (CLI). Utilizzare il seguente comando per installare express framework a livello globale:

npm installa -g express

a questo punto creo la cartella mi ci posiziono dentro con il comando dos cd nomecartella da desktop se sono in windows e installerò il modulo vero e proprio nel progetto in locale che sto mettendo in piedi, utilizzare il comando seguente per installare express all’ interno del progetto:

npm install express –save

Il comando installa express nella directory node_module e crea una directory chiamata express all’interno di node_module. È necessario installare alcuni altri moduli importanti insieme a express. Di seguito è riportato l’elenco:

o body-parser: questo è un middleware node.js per la gestione dei dati dei moduli codificati JSON, Raw, Text e URL.
o cookie-parser: viene utilizzato per analizzare l’intestazione del cookie e popolare req.cookies con un oggetto digitato dai nomi dei cookie.
o multer: questo è un middleware node.js per la gestione di dati multipart / form.

I comandi per compiere queste operazioni di adeguamento saranno i seguenti:

npm install body-parser –save
npm install cookie-parser –save
npm install multer –save

A questo punto non ci resta che simulare una app Express.js. Facciamo un semplice esempio di app Express che avvia un server e ascoltiamo su una porta locale. Risponde solo alla homepage. Per ogni altro percorso, risponderà con un errore 404 Not Found.

File: express_example.js, contenuto:

var express = require(‘express’);
var app = express();
app.get(‘/’, function (req, res) {
res.send(‘Welcome to Skyapper);
})
var server = app.listen(8000, function () {
var host = server.address().address
var port = server.address().port
console.log(“Example app listening at http://%s:%s”, host, port)
})

Gli oggetti Richiesta e risposta Express.js sono i parametri della funzione di callback utilizzata nelle applicazioni Express. L’oggetto richiesta express.js rappresenta la richiesta HTTP e ha proprietà per la stringa della query di richiesta, i parametri, il corpo, le intestazioni HTTP e così via. Il protocollo client server passa per HTTP che si comporta come una rete mentre due avversari si fronteggiano con le racchette: ci sarà appunto una richiesta che parte dalla nostra tastiera e una risposta:

Sintassi:
app.get (‘/’, function (req, res) {
// –
})

La tabella seguente specifica alcune delle proprietà e le relative descrizioni associate all’oggetto richiesta della libreria Express.js.

req.app – This is used to hold a reference to the instance of the express application that is using the middleware.

req.baseurl – It specifies the URL path on which a router instance was mounted.

req.body – It contains key-value pairs of data submitted in the request body. By default, it is undefined, and is populated when you use body-parsing middleware such as body-parser.

req.cookies – When we use cookie-parser middleware, this property is an object that contains cookies sent by the request.

req.fresh – It specifies that the request is “fresh.” it is the opposite of req.stale.

req.hostname – It contains the hostname from the “host” http header.

req.ip – It specifies the remote IP address of the request.

req.ips – When the trust proxy setting is true, this property contains an array of IP addresses specified in the ?x-forwarded-for? request header.

req.originalurl – This property is much like req.url; however, it retains the original request URL, allowing you to rewrite req.url freely for internal routing purposes.

req.params – An object containing properties mapped to the named route ?parameters?. For example, if you have the route /user/:name, then the “name” property is available as req.params.name. This object defaults to {}.

req.path – It contains the path part of the request URL.

req.protocol – The request protocol string, “http” or “https” when requested with TLS.

req.query – An object containing a property for each query string parameter in the route.

req.route – The currently-matched route, a string.

req.secure – A Boolean that is true if a TLS connection is established.

req.signedcookies – When using cookie-parser middleware, this property contains signed cookies sent by the request, unsigned and ready for use.

req.stale – It indicates whether the request is “stale,” and is the opposite of req.fresh.

req.subdomains – It represents an array of subdomains in the domain name of the request.

req.xhr – A Boolean value that is true if the request’s “x-requested-with” header field is “xmlhttprequest”, indicating that the request was issued by a client library such as jQuery

Di seguito è riportato un elenco di alcuni metodi oggetto richiesta generalmente utilizzati:

req.accepts (types)
this method is used to check whether the specified content types are acceptable, based on the request’s Accept HTTP header field.
Examples:

req.accepts(‘html’);
//=>?html?
req.accepts(‘text/html’);
// => ?text/html?

req.get(field).
This method returns the specified HTTP request header field.
Examples:
req.get(‘Content-Type’);
// => “text/plain”
req.get(‘content-type’);
// => “text/plain”
req.get(‘Something’);
// => undefined

req.is(type).
This method returns true if the incoming request’s “Content-Type” HTTP header field matches the MIME type specified by the type parameter.

Examples:
// With Content-Type: text/html;
//charset=utf-8
req.is(‘html’);
req.is(‘text/html’);
req.is(‘text/*’);
// => true

req.param(name [, defaultValue]) . This method is used to fetch the value of param name when present.
Examples:
// ?name=sasha
req.param(‘name’)
// => “sasha”
// POST name=sasha
req.param(‘name’)
// => “sasha”
// /user/sasha for /user/:name
req.param(‘name’)
// => “sasha”

Express.js Response Object. The Response object (res) specifies the HTTP response which is sent by an Express app when it gets an HTTP request.
Che cosa fa?

o It sends response back to the client browser.
o It facilitates you to put new cookies value and that will write to the client browser (under cross domain rule).
o Once you res.send() or res.redirect() or res.render(), you cannot do it again, otherwise, there will be uncaught error.

Response Object Properties: vediamo come per l’oggetto request le descrizioni legate alle proprietà:

res.app – It holds a reference to the instance of the express application that is using the middleware.
res.headers – Sent It is a Boolean property that indicates if the app sent HTTP headers for the response.
res.locals – It specifies an object that contains response local variables scoped to the request

Response Object Methods methods,l studiamoli alcuni nel dettaglio:

Response Append method
Syntax: res.append(field [, value])
This method appends the specified value to the HTTP response header field. That means if the specified value is not appropriate then this method redress that.
Examples:
res.append(‘Link’, [‘<http://localhost/>&#8217;, ‘<http://localhost:3000/>’%5D);
res.append(‘Warning’, ‘199 Miscellaneous warning’);

Response Attachment method
Syntax: res.attachment([filename])
This method facilitates you to send a file as an attachment in the HTTP response.
Examples:
res.attachment(‘path/to/js_pic.png’);

Response Cookie method
Syntax: res.cookie(name, value [, options])
This method is used to set a cookie name to value. The value can be a string or object converted to JSON.
Examples:
res.cookie(‘name’, ‘Aryan’, { domain: ‘.xyz.com’, path: ‘/admin’, secure: true });
res.cookie(‘Section’, { Names: [Aryan,Sushil,Priyanka] });
res.cookie(‘Cart’, { items: [1,2,3] }, { maxAge: 900000 });

Response ClearCookie method
Syntax: res.clearCookie(name [, options])
As the name specifies, the clearCookie method is used to clear the cookie specified by name.
Examples:
To set a cookie
res.cookie(‘name’, ‘Aryan’, { path: ‘/admin’ });
To clear a cookie:
res.clearCookie(‘name’, { path: ‘/admin’ });

Response Download method
Syntax: res.download(path [, filename] [, fn])
This method transfers the file at path as an “attachment” and enforces the browser to prompt user for download.
Example:
res.download(‘/report-12345.pdf’);

Response End method
Syntax: res.end([data] [, encoding])
This method is used to end the response process.
Example:
res.end();
res.status(404).end();

Response Format method
Syntax: res.format(object)
This method performs content negotiation on the Accept HTTP header on the request object, when present.
Example:
res.format({
‘text/plain’: function(){
res.send(‘hey’);
},
‘text/html’: function(){
res.send(‘
hey’);
},
‘application/json’: function(){
res.send({ message: ‘hey’ });
},
‘default’: function() {
// log the request and respond with 406
res.status(406).send(‘Not Acceptable’);
}
});

Response Get method
Syntax: res.get(field)
This method provides HTTP response header specified by field.
Example:
res.get(‘Content-Type’);

Response JSON method:
Syntax: res.json([body])
This method returns the response in JSON format.
Example:
res.json(null)
res.json({ name: ‘ajeet’ })

Response JSONP method:
Syntax: res.jsonp([body])
This method returns response in JSON format with JSONP support.
Examples:
res.jsonp(null)
res.jsonp({ name: ‘ajeet’ })

Response Links method
Syntax: res.links(links)
This method populates the response?s Link HTTP header field by joining the links provided as properties of the parameter.
Examples:
res.links({
next: ‘http://api.rnd.com/users?page=5&#8217;,
last: ‘http://api.rnd.com/users?page=10&#8217;
});

Response Location method
Syntax: res.location(path)
This method is used to set the response location HTTP header field based on the specified path parameter.
Examples:
res.location(‘http://xyz.com&#8217;);

Response Redirect method
Syntax: res.redirect([status,] path)

This method redirects to the URL derived from the specified path, with specified HTTP status
Examples:
res.redirect(‘http://example.com&#8217;);

Response Render method
Syntax:res.render(view [, locals] [, callback])
This method renders a view and sends the rendered HTML string to the client.
Examples:
// send the rendered view to the client
res.render(‘index’);
// pass a local variable to the view
res.render(‘user’, { name: ‘aryan’ }, function(err, html) {
// …
});

Response Send method
Syntax: res.send([body])
This method is used to send HTTP response.
Examples:
res.send(new Buffer(‘whoop’));
res.send({ some: ‘json’ });
res.send(‘
…..some html
‘);

Response sendFile method
Syntax: res.sendFile(path [, options] [, fn])
This method is used to transfer the file at the given path. It sets the Content-Type response HTTP header field based on the filename’s extension.
Examples:
res.sendFile(fileName, options, function (err) {
// …
});

Response Set method
Syntax: res.set(field [, value])
This method is used to set the response of HTTP header field to value.
Examples:
res.set(‘Content-Type’, ‘text/plain’);
res.set({
‘Content-Type’: ‘text/plain’,
‘Content-Length’: ‘123’,
})

Response Status method
Syntax: res.status(code)
This method sets an HTTP status for the response.
Examples:
res.status(403).end();
res.status(400).send(‘Bad Request’);

Response Type method
Syntax: res.type(type)
This method sets the content-type HTTP header to the MIME type.
Examples:
res.type(‘.html’); // => ‘text/html’
res.type(‘html’); // => ‘text/html’
res.type(‘json’); // => ‘application/json’
res.type(‘application/json’); // => ‘application/json’
res.type(‘png’); // => image/png:

Richiesta GET di Express.js

GET e POST sono due richieste HTTP comuni utilizzate per la creazione di API REST. Le richieste GET vengono utilizzate per inviare solo una quantità limitata di dati poiché i dati vengono inviati nell’intestazione mentre le richieste POST vengono utilizzate per inviare grandi quantità di dati poiché i dati vengono inviati nel corpo. Express.js ti facilita la gestione delle richieste GET e POST utilizzando l’istanza di express. Metodo GET Express.js Esempio 1 che recupera dati in formato JSON. Il metodo Get consente di inviare solo una quantità limitata di dati poiché i dati vengono inviati nell’intestazione. Non è sicuro perché i dati sono visibili nella barra degli URL. Facciamo un esempio per dimostrare il metodo GET.

File: index.html

<html>
<body>
<form action=”http://127.0.0.1:8081/process_get&#8221; method=”GET”>
First Name: <input type=”text” name=”first_name”> <br>
Last Name: <input type=”text” name=”last_name”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>

File: get_example1.js

var express = require(‘express’);
var app = express();
app.use(express.static(‘public’));

app.get(‘/index.html’, function (req, res) {
res.sendFile( __dirname + “/” + “index.html” );
})
app.get(‘/process_get’, function (req, res) {
response = {
first_name:req.query.first_name,
last_name:req.query.last_name
};
console.log(response);
res.end(JSON.stringify(response));
})
var server = app.listen(8000, function () {

var host = server.address().address
var port = server.address().port
console.log(“Example app listening at http://%s:%s&#8221;, host, port)

})

sostanzialmente recupero i dati che viaggiano sulla url sulla stessa pagina dopo il aver azionato il submit del form in formato JSON

Express.js GET Method Example 2

Fetch data in paragraph format, file: index.html:

<html>
<body>
<form action=”http://127.0.0.1:8000/get_example2&#8243; method=”GET”>
First Name: <input type=”text” name=”first_name”/> <br/>
Last Name: <input type=”text” name=”last_name”/><br/>
<input type=”submit” value=”Submit”/>
</form>
</body>
</html>

File: get_example2.js

var express = require(‘express’);
var app=express();
app.get(‘/get_example2’, function (req, res) {
res.send(‘<p>Username: ‘ + req.query[‘first_name’]+'</p><p>Lastname: ‘+req.query[‘last_name’]+'</p>’);
})
var server = app.listen(8000, function () {
var host = server.address().address
var port = server.address().port
console.log(“Example app listening at http://%s:%s&#8221;, host, port)
})

A differenza dell’ esempio precedente qui i dati vengono visualizzato con il valore contenuto nelle variabili nude e crude qualcosa tipo Username e Lastname valorizzate a quantità stringa

Express.js GET Method Example 3, file:index.html

<!DOCTYPE html>
<html>
<body>
<form action=”http://127.0.0.1:8000/get_example3″&gt;
<table>
<tr><td>Enter First Name:</td><td><input type=”text” name=”firstname”/><td></tr>
<tr><td>Enter Last Name:</td><td><input type=”text” name=”lastname”/><td></tr>
<tr><td>Enter Password:</td><td><input type=”password” name=”password”/></td></tr>
<tr><td>Sex:</td><td>
<input type=”radio” name=”sex” value=”male”> Male
<input type=”radio” name=”sex” value=”female”>Female
</td></tr>
<tr><td>About You :</td><td>
<textarea rows=”5″ cols=”40″ name=”aboutyou” placeholder=”Write about yourself”>
</textarea>
</td></tr>
<tr><td colspan=”2″><input type=”submit” value=”register”/></td></tr>
</table>
</form>
</body>
</html>

File: get_example3.js

var express = require(‘express’);
var app=express();

app.get(‘/get_example3’, function (req, res) {
res.send(‘<p>Firstname: ‘ + req.query[‘firstname’]+'</p>
<p>Lastname: ‘+req.query[‘lastname’]+'</p><p>Password: ‘+req.query[‘password’]+'</p>
<p>AboutYou: ‘+req.query[‘aboutyou’]+'</p>’);
})

var server = app.listen(8000, function () {
var host = server.address().address
var port = server.address().port
console.log(“Example app listening at http://%s:%s&#8221;, host, port)
})

qui i dati del form vengono stampati a video alla fine della pagina

Richiesta POST Express.js

GET e POST sono due richieste HTTP comuni utilizzate per la creazione di API REST come si diceva. Le richieste POST vengono utilizzate per inviare grandi quantità di dati.
Express.js ti facilita la gestione delle richieste GET e POST utilizzando l’istanza di express. Il metodo Post ti consente di inviare grandi quantità di dati perché i dati vengono inviati nel corpo. Il metodo Post è sicuro perché i dati non sono visibili nella barra dell’URL ma non sono utilizzati come il metodo GET. D’altra parte, il metodo GET è più efficiente e utilizzato più del POST. Facciamo un esempio per dimostrare il metodo POST.

Example1: Fetch data in JSON format, file: Index.html

<html>
<body>
<form action=”http://127.0.0.1:8000/process_post&#8221; method=”POST”>
First Name: <input type=”text” name=”first_name”> <br>
Last Name: <input type=”text” name=”last_name”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>

File: post_example1.js

var express = require(‘express’);
var app = express();
var bodyParser = require(‘body-parser’);
// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.use(express.static(‘public’));
app.get(‘/index.html’, function (req, res) {
res.sendFile( __dirname + “/” + “index.html” );
})
app.post(‘/process_post’, urlencodedParser, function (req, res) {
// Prepare output in JSON format
response = {
first_name:req.body.first_name,
last_name:req.body.last_name
};
console.log(response);
res.end(JSON.stringify(response));
})
var server = app.listen(8000, function () {
var host = server.address().address
var port = server.address().port
console.log(“Example app listening at http://%s:%s&#8221;, host, port)
})

A video dopo aver confermato l’invio dei dati nel form toccherò con mano che i dati hanno smesso di viaggiare sulla URL, come abbiamo sottolineato questo avviene perché POST nasconde i dati ed superiore al metodo GET come criteri di sicurezza. Con questa trattazione abbiamo forse esaurito il capitolo EXPRESS? Quando mai! Come avviene la gestione dei cookies? E il caricamento dei file? E la gestione fondamentale del ROUTING, dell’ instradamento dei dati sulla url? E poi che cosa sono i Template Engine, temi come Scaffolding e Middleware a cosa si riferiscono? Certamente abbiamo capito in fondo alla trattazione che EXPRESS.JS è come il labirinto finale di SHINING un luogo ricco di insidie e di complicati sentieri che potrebbero diventare letali. Per questo motivo ci fermiamo in attesa di ulteriori approfondimenti, per ora abbiamo solo toccato un mattoncino molto piccolo di NODE figuriamoci l’intera architettura da quanti pezzi LEGO è composta! E tuttavia come si sottolineava nella premessa iniziale, senza dare un occhiata a questi moduli indispensabili per una applicazione NODE saremmo alquanto limitati nella nostra comprensione. Per ora ci basta vedere che esistono degli strumenti di gestione che consentono a NODE di modellare le problematiche di rete legate all’ instradamento in rete e sul flusso dei dati che passano dal protoccollo HTTP. Meglio non avvicinarsi troppo al quadro ma è anche bene sapere che dentro la tela ci sono innumerevoli dettagli che arricchiscono l’opera.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...