Node.js - Express Framework

Descripción general Express

Express es un marco de aplicación web Node.js mínimo y flexible que proporciona un conjunto sólido de funciones para desarrollar aplicaciones web y móviles. Facilita el rápido desarrollo de aplicaciones web basadas en Node. A continuación se muestran algunas de las características principales del marco Express:

Permite configurar middlewares para responder a solicitudes HTTP.
Define una tabla de enrutamiento que se utiliza para realizar diferentes acciones basadas en el método HTTP y la URL.
Permite renderizar páginas HTML de forma dinámica basándose en el paso de argumentos a las plantillas.

Instalación de Express

En primer lugar, instale el marco Express globalmente usando NPM para que pueda usarse para crear una aplicación web usando el terminal de nodo.

$ npm install express --save

El comando anterior guarda la instalación localmente en el node_modulesdirectorio y crea un directorio express dentro de node_modules. Debe instalar los siguientes módulos importantes junto con express -

body-parser - Este es un middleware de node.js para manejar datos de formulario codificados JSON, Raw, Text y URL.
cookie-parser - Analizar el encabezado de la cookie y completar req.cookies con un objeto codificado por los nombres de las cookies.
multer - Este es un middleware de node.js para manejar multipart / form-data.

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

Hola mundo Ejemplo

A continuación se muestra una aplicación Express muy básica que inicia un servidor y escucha en el puerto 8081 para la conexión. Esta aplicación responde conHello World!para solicitudes a la página de inicio. Para cualquier otro camino, responderá con un404 Not Found.

var express = require('express');
var app = express();

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Guarde el código anterior en un archivo llamado server.js y ejecútelo con el siguiente comando.

$ node server.js

Verá la siguiente salida:

Example app listening at http://0.0.0.0:8081

Abra http://127.0.0.1:8081/ en cualquier navegador para ver el siguiente resultado.

Solicitar respuesta

La aplicación Express utiliza una función de devolución de llamada cuyos parámetros son request y response objetos.

app.get('/', function (req, res) {
   // --
})

Objeto de solicitud: el objeto de solicitud representa la solicitud HTTP y tiene propiedades para la cadena de consulta de solicitud, parámetros, cuerpo, encabezados HTTP, etc.
Objeto de respuesta: el objeto de respuesta representa la respuesta HTTP que envía una aplicación Express cuando recibe una solicitud HTTP.

Puedes imprimir req y res objetos que proporcionan mucha información relacionada con la solicitud y respuesta HTTP, incluidas cookies, sesiones, URL, etc.

Enrutamiento básico

Hemos visto una aplicación básica que atiende solicitudes HTTP para la página de inicio. El enrutamiento se refiere a determinar cómo responde una aplicación a una solicitud del cliente a un punto final en particular, que es un URI (o ruta) y un método de solicitud HTTP específico (GET, POST, etc.)

Ampliaremos nuestro programa Hello World para manejar más tipos de solicitudes HTTP.

var express = require('express');
var app = express();

// This responds with "Hello World" on the homepage
app.get('/', function (req, res) {
   console.log("Got a GET request for the homepage");
   res.send('Hello GET');
})

// This responds a POST request for the homepage
app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST');
})

// This responds a DELETE request for the /del_user page.
app.delete('/del_user', function (req, res) {
   console.log("Got a DELETE request for /del_user");
   res.send('Hello DELETE');
})

// This responds a GET request for the /list_user page.
app.get('/list_user', function (req, res) {
   console.log("Got a GET request for /list_user");
   res.send('Page Listing');
})

// This responds a GET request for abcd, abxcd, ab123cd, and so on
app.get('/ab*cd', function(req, res) {   
   console.log("Got a GET request for /ab*cd");
   res.send('Page Pattern Match');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Guarde el código anterior en un archivo llamado server.js y ejecútelo con el siguiente comando.

$ node server.js

Verá la siguiente salida:

Example app listening at http://0.0.0.0:8081

Ahora puede probar diferentes solicitudes en http://127.0.0.1:8081 para ver el resultado generado por server.js. A continuación se muestran algunas capturas de pantalla que muestran diferentes respuestas para diferentes URL.

Pantalla que se muestra de nuevo http://127.0.0.1:8081/list_user

Pantalla que se muestra de nuevo http://127.0.0.1:8081/abcd

Pantalla que se muestra de nuevo http://127.0.0.1:8081/abcdefg

Entrega de archivos estáticos

Express proporciona un middleware integrado express.static para servir archivos estáticos, como imágenes, CSS, JavaScript, etc.

Simplemente necesita pasar el nombre del directorio donde guarda sus activos estáticos, al express.staticmiddleware para comenzar a servir los archivos directamente. Por ejemplo, si mantiene sus imágenes, CSS y archivos JavaScript en un directorio llamado público, puede hacer esto:

app.use(express.static('public'));

Conservaremos algunas imágenes en public/images subdirectorio de la siguiente manera:

node_modules
server.js
public/
public/images
public/images/logo.png

Modifiquemos la aplicación "Hello Word" para agregar la funcionalidad para manejar archivos estáticos.

var express = require('express');
var app = express();

app.use(express.static('public'));

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port

   console.log("Example app listening at http://%s:%s", host, port)
})

Guarde el código anterior en un archivo llamado server.js y ejecútelo con el siguiente comando.

$ node server.js

Ahora abra http://127.0.0.1:8081/images/logo.png en cualquier navegador y observe el siguiente resultado.

Método GET

Aquí hay un ejemplo simple que pasa dos valores usando el método HTML FORM GET. Vamos a usarprocess_get enrutador dentro de server.js para manejar esta entrada.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_get" 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>

Guardemos el código anterior en index.htm y modifiquemos server.js para manejar las solicitudes de la página de inicio, así como la entrada enviada por el formulario HTML.

var express = require('express');
var app = express();

app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.get('/process_get', function (req, res) {
   // Prepare output in JSON format
   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(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Acceder al documento HTML usando http://127.0.0.1:8081/index.htm generará el siguiente formulario:




First Name:



Last Name:

Ahora puede ingresar el nombre y apellido y luego hacer clic en el botón enviar para ver el resultado y debería devolver el siguiente resultado:

{"first_name":"John","last_name":"Paul"}

Método POST

Aquí hay un ejemplo simple que pasa dos valores usando el método HTML FORM POST. Vamos a usarprocess_get enrutador dentro de server.js para manejar esta entrada.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_post" 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>

Guardemos el código anterior en index.htm y modifiquemos server.js para manejar las solicitudes de la página de inicio, así como la entrada enviada por el formulario HTML.

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.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

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(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Acceder al documento HTML usando http://127.0.0.1:8081/index.htm generará el siguiente formulario:




First Name:



Last Name:

Ahora puede ingresar el nombre y apellido y luego hacer clic en el botón enviar para ver el siguiente resultado:

{"first_name":"John","last_name":"Paul"}

Subir archivo

El siguiente código HTML crea un formulario de carga de archivos. Este formulario tiene el atributo de método establecido enPOST y el atributo enctype se establece en multipart/form-data

<html>
   <head>
      <title>File Uploading Form</title>
   </head>

   <body>
      <h3>File Upload:</h3>
      Select a file to upload: <br />
      
      <form action = "http://127.0.0.1:8081/file_upload" method = "POST" 
         enctype = "multipart/form-data">
         <input type="file" name="file" size="50" />
         <br />
         <input type = "submit" value = "Upload File" />
      </form>
      
   </body>
</html>

Guardemos el código anterior en index.htm y modifiquemos server.js para manejar las solicitudes de la página de inicio y la carga de archivos.

var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}));

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/file_upload', function (req, res) {
   console.log(req.files.file.name);
   console.log(req.files.file.path);
   console.log(req.files.file.type);
   var file = __dirname + "/" + req.files.file.name;
   
   fs.readFile( req.files.file.path, function (err, data) {
      fs.writeFile(file, data, function (err) {
         if( err ) {
            console.log( err );
            } else {
               response = {
                  message:'File uploaded successfully',
                  filename:req.files.file.name
               };
            }
         
         console.log( response );
         res.end( JSON.stringify( response ) );
      });
   });
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Acceder al documento HTML usando http://127.0.0.1:8081/index.htm generará el siguiente formulario:

File Upload:
Select a file to upload: 





NOTE: This is just dummy form and would not work, but it must work at your server.

Gestión de cookies

Puede enviar cookies a un servidor Node.js que puede manejar lo mismo usando la siguiente opción de middleware. A continuación se muestra un ejemplo sencillo para imprimir todas las cookies enviadas por el cliente.

var express      = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function(req, res) {
   console.log("Cookies: ", req.cookies)
})
app.listen(8081)

↰ Previous page Next page ↱