En este tutorial, estudiaremos el marco Express. Este marco está construido de tal manera que actúa como un marco de aplicación web Node.js mínimo y flexible, proporcionando un conjunto robusto de características para construir una aplicación web híbrida y de una sola página.
En este tutorial, aprenderá:
- ¿Qué es Express.js?
- Instalación y uso de Express
- ¿Qué son las rutas?
- Servidor web de muestra con express.js
¿Qué es Express.js?
Express.js es un marco de trabajo de servidor de aplicaciones web Node js, que está diseñado específicamente para crear aplicaciones web híbridas, de una sola página y de varias páginas.
Se ha convertido en el marco de servidor estándar para node.js. Express es la parte de backend de algo conocido como pila MEAN.
El MEAN es un paquete de software JavaScript gratuito y de código abierto para crear sitios web dinámicos y aplicaciones web que tiene los siguientes componentes;
1) MongoDB : la base de datos estándar NoSQL
2) Express.js : el marco de aplicaciones web predeterminado
3) Angular.js : el marco de JavaScript MVC utilizado para aplicaciones web
4) Node.js : marco utilizado para aplicaciones de red y del lado del servidor escalables.
El marco Express.js facilita el desarrollo de una aplicación que se puede utilizar para manejar múltiples tipos de solicitudes, como las solicitudes GET, PUT, POST y DELETE.
Instalación y uso de Express
Express se instala a través del Administrador de paquetes de nodo. Esto se puede hacer ejecutando la siguiente línea en la línea de comando
npm install express
El comando anterior solicita al administrador de paquetes de Node que descargue los módulos express necesarios y los instale en consecuencia.
Usemos nuestro marco Express recién instalado y creemos una aplicación simple "Hello World".
Nuestra aplicación creará un módulo de servidor simple que escuchará en el puerto número 3000. En nuestro ejemplo, si se realiza una solicitud a través del navegador en este número de puerto, la aplicación del servidor enviará una respuesta de 'Hola' Mundo 'al cliente. .
var express=require('express');var app=express();app.get('/',function(req,res){res.send('Hello World!');});var server=app.listen(3000,function() {});
Explicación del código:
- En nuestra primera línea de código, usamos la función require para incluir el "módulo express".
- Antes de que podamos comenzar a usar el módulo express, necesitamos convertirlo en un objeto.
- Aquí estamos creando una función de devolución de llamada. Esta función se llamará siempre que alguien navegue a la raíz de nuestra aplicación web, que es http: // localhost: 3000 . La función de devolución de llamada se utilizará para enviar la cadena 'Hello World' a la página web.
- En la función de devolución de llamada, estamos enviando la cadena "Hello World" al cliente. El parámetro 'res' se utiliza para enviar contenido a la página web. Este parámetro 'res' es algo que proporciona el módulo 'solicitud' para permitir que uno envíe contenido a la página web.
- Entonces usamos la función escuchar para hacer que nuestra aplicación de servidor escuche las solicitudes del cliente en el puerto no 3000. Puede especificar cualquier puerto disponible aquí.
Si el comando se ejecuta con éxito, la siguiente salida se mostrará cuando ejecute su código en el navegador.
Producción:
De la salida,
- Puede ver claramente que si navegamos a la URL de localhost en el puerto 3000, verá la cadena 'Hola mundo' en la página.
- Debido a que en nuestro código hemos mencionado específicamente que el servidor escuche en el puerto no 3000, podemos ver la salida cuando navegamos a esta URL.
¿Qué son las rutas?
El enrutamiento determina la forma en que una aplicación responde a la solicitud de un cliente a un punto final en particular.
Por ejemplo, un cliente puede realizar una solicitud GET, POST, PUT o DELETE http para varias URL como las que se muestran a continuación;
http://localhost:3000/Bookshttp://localhost:3000/Students
En el ejemplo anterior,
- Si se realiza una solicitud GET para la primera URL, lo ideal es que la respuesta sea una lista de libros.
- Si la solicitud GET se realiza para la segunda URL, lo ideal es que la respuesta sea una lista de Estudiantes.
- Entonces, en función de la URL a la que se accede, se invocará una funcionalidad diferente en el servidor web y, en consecuencia, se enviará la respuesta al cliente. Este es el concepto de enrutamiento.
Cada ruta puede tener una o más funciones de controlador, que se ejecutan cuando la ruta coincide.
La sintaxis general de una ruta se muestra a continuación.
app.METHOD(PATH, HANDLER)
Donde,
1) la aplicación es una instancia del módulo express
2) METHOD es un método de solicitud HTTP (GET, POST, PUT o DELETE)
3) PATH es una ruta en el servidor.
4) HANDLER es la función que se ejecuta cuando la ruta coincide.
Veamos un ejemplo de cómo podemos implementar rutas en el expreso. Nuestro ejemplo creará 3 rutas como
- Una ruta / nodo que mostrará la cadena "Tutorial en nodo" si se accede a esta ruta
- Una ruta / Angular que mostrará la cadena "Tutorial en Angular" si se accede a esta ruta
- Una ruta predeterminada / que mostrará la cadena "Bienvenido a los tutoriales de Guru99".
Nuestro código básico seguirá siendo el mismo que en los ejemplos anteriores. El siguiente fragmento es un complemento para mostrar cómo se implementa el enrutamiento.
var express = require('express');var app = express();app.route('/Node').get(function(req,res){res.send("Tutorial on Node");});app.route('/Angular').get(function(req,res){res.send("Tutorial on Angular");});app.get('/',function(req,res){res.send('Welcome to Guru99 Tutorials');}));
Explicación del código:
- Aquí estamos definiendo una ruta si se selecciona la URL http: // localhost: 3000 / Node en el navegador. A la ruta, adjuntamos una función de devolución de llamada que se llamará cuando naveguemos a la URL del nodo.
La función tiene 2 parámetros.
- El parámetro principal que usaremos es el parámetro 'res', que se puede usar para enviar información al cliente.
- El parámetro 'req' tiene información sobre la solicitud que se está realizando. A veces, se pueden enviar parámetros adicionales como parte de la solicitud que se realiza y, por lo tanto, el parámetro 'req' se puede usar para encontrar los parámetros adicionales que se envían.
- Estamos usando la función de envío para enviar la cadena "Tutorial en el nodo" al cliente si se elige la ruta del nodo.
- Aquí estamos definiendo una ruta si se selecciona la URL http: // localhost: 3000 / Angular en el navegador. A la ruta, adjuntamos una función de devolución de llamada que se llamará cuando naveguemos a la URL angular.
- Estamos usando la función de envío para enviar la cadena "Tutorial sobre Angular" al cliente si se elige la ruta Angular.
- Esta es la ruta predeterminada que se elige cuando se navega hasta la ruta de la aplicación: http: // localhost: 3000 . Cuando se elige la ruta predeterminada, se enviará al cliente el mensaje "Bienvenido a los tutoriales de Guru99".
Si el comando se ejecuta con éxito, la siguiente salida se mostrará cuando ejecute su código en el navegador.
Producción:
De la salida,
- Puede ver claramente que si navegamos hasta la URL de localhost en el puerto 3000, verá la cadena 'Bienvenido a los tutoriales de Guru99' que se muestra en la página.
- Porque en nuestro código, hemos mencionado que nuestra URL predeterminada mostraría este mensaje.
De la salida,
- Puede ver que si la URL se ha cambiado a / Node, se elegirá la ruta de nodo respectiva y se mostrará la cadena "Tutorial en nodo".
De la salida,
- Puede ver que si la URL se ha cambiado a / Angular, se elegirá la ruta del nodo respectivo y se mostrará la cadena "Tutorial sobre Angular".
Servidor web de muestra con express.js
En nuestro ejemplo anterior, hemos visto cómo podemos decidir qué salida mostrar en función del enrutamiento. Este tipo de enrutamiento es el que se utiliza en la mayoría de las aplicaciones web modernas. La otra parte de un servidor web trata sobre el uso de plantillas en Node js.
Al crear aplicaciones de nodo sobre la marcha, una forma fácil y rápida es utilizar plantillas para la aplicación. Hay muchos marcos disponibles en el mercado para hacer plantillas. En nuestro caso, tomaremos el ejemplo del marco de jade para la creación de plantillas.
Jade se instala a través del administrador de paquetes de nodos. Esto se puede hacer ejecutando la siguiente línea en la línea de comando
npm instalar jade
El comando anterior solicita al administrador de paquetes de Node que descargue los módulos de jade necesarios y los instale en consecuencia.
NOTA: En la última versión de Node, jade ha quedado obsoleto. En su lugar, use pug.
Usemos nuestro marco de jade recién instalado y creemos algunas plantillas básicas.
Paso 1) El primer paso es crear una plantilla de jade. Cree un archivo llamado index.jade e inserte el siguiente código. Asegúrese de crear el archivo en la carpeta "vistas"
- Aquí estamos especificando que el título de la página se cambiará a cualquier valor que se pase cuando se invoque esta plantilla.
- También estamos especificando que el texto en la etiqueta del encabezado será reemplazado por lo que se pase en la plantilla de jade.
var express=require('express');var app=express();app.set('view engine','jade');app.get('/',function(req,res){res.render('index',{title:'Guru99',message:'Welcome'})});var server=app.listen(3000,function() {});
Explicación del código:
- Lo primero que se debe especificar en la aplicación es el "motor de visualización" que se utilizará para representar las plantillas. Dado que vamos a utilizar jade para representar nuestras plantillas, lo especificamos en consecuencia.
- La función de renderizado se utiliza para renderizar una página web. En nuestro ejemplo, estamos renderizando la plantilla (index.jade) que se creó anteriormente.
- Estamos pasando los valores de "Guru99" y "Bienvenido" a los parámetros "título" y "mensaje" respectivamente. Estos valores serán reemplazados por los parámetros 'título' y 'mensaje' declarados en la plantilla index.jade.
Si el comando se ejecuta con éxito, la siguiente salida se mostrará cuando ejecute su código en el navegador.
Producción:
De la salida,
- Podemos ver que el título de la página se establece en "Guru99" y el encabezado de la página se establece en "Bienvenido".
- Esto se debe a la plantilla de jade que se invoca en nuestra aplicación node js.
Resumen
- El marco expreso es el marco más común utilizado para desarrollar aplicaciones Node js. El marco expreso se basa en el marco node.js y ayuda a acelerar el desarrollo de aplicaciones basadas en servidor.
- Las rutas se utilizan para desviar a los usuarios a diferentes partes de las aplicaciones web en función de la solicitud realizada. La respuesta para cada ruta puede variar según lo que se deba mostrar al usuario.
- Las plantillas se pueden utilizar para inyectar contenido de manera eficiente. Jade es uno de los motores de creación de plantillas más populares que se utilizan en las aplicaciones de Node.js.