Programación

Express

El microframework popular de NodeJS

Express es una librería basada en Javascript y es la librería más popular para trabajar con NodeJS. Permite crear proyectos para aplicaciones web trabajando con otras librerías y frameworks. Cuenta con un sistema de rutas que maneja los métodos HTTP de forma muy eficiente y además permite trabajar con una amplia variedad de sistemas de plantillas. Express es considerado un microframework debido al tamaño de su núcleo, que a diferencia de otros frameworks, es muy reducido y destaca por disponer de una estructura flexible y sencilla.  Este denominado microframework no ofrece todas las ventajas o recursos que si ofrecen otros frameworks, funcionalidades como pueden ser la autenticación de usuarios, métodos para el manejo de bases de datos, pruebas de testing, etc..., pero si ofrece gran cantidad de paquetes de middleware compatibles, rápidos y fáciles de instalar que permiten conectarse con Express y  que permiten realizar cualquier funcionalidad como cualquier otro framework. 

INSTALAR EXPRESS

  1. npm install express

MANEJO DE PETICIONES

ENRUTADO BÁSICO

Para la implementación de Express es necesario llamar a la librería e instanciarla  como un objeto. Este objeto es el que va a permitir trabajar con los distintos métodos de Express.  A continuación un ejemplo de un proyecto Express muy básico.

  1. const   express = require("express"),
  2.             app=express();
  3. app.all("/",(req,res) => {
  4.     res.send("Respuesta con Express.js");
  5. })
  6. app.listen(3000, () => {"Iniciando Express.js en el puerto 3000 });

Analizando el ejemplo anterior se observa como se crea la instancia en la constante app y esa constante realiza una llamada al método all() de Express. A este método all (que engloba todos los verbos o métodos de HTTP) se le pasa como primer parámetro la ruta de la petición y como segundo parámetro un callback que envía los parámetros de petición y respuesta (muy presentes en los métodos de Express).  Por último se llama al método listen indicando el número de puerto a escuchar y un callback que permite mostrar algún tipo de información en la terminal.

ENRUTADO BÁSICO CON MÉTODOS

Express permite manejar las rutas con los distintos métodos o verbos de http. El código siguiente muestra como se crean las rutas con algunos de los métodos más utilizados. El código refleja la posibilidad de compartir la misma ruta, siempre y cuando, los métodos sean distintos.

  1. const 	express = require("express"),
  2. 	app=express();
  3. app
  4. .get("/user",(req,res) => res.end("Hola Mundo desde Express.js vía get"))
  5. .post("/user",(req,res) => res.send("Hola desde Express vía post"))
  6. .delete("/user",(req,res) => res.send("Hola desde Express vía delete"))
  7. .listen(3000,() => console.log("Iniciando Express.js en el puerto 3000"))

ENRUTAR ARCHIVO ESTÁTICO

Es posible mostrar el contenido de un archivo en el navegador mediante el método sendFile y enviando la ruta de un archivo estático.

  1. const   express = require("express"),
  2.             app=express();
  3. app.get("/",(req,res) => {
  4.     res.sendFile(`${__dirname}/index.html`);
  5. })
  6. app.listen(3000, () => {"Iniciando Express.js en el puerto 3000 });

RUTAS CON PARÁMETROS

Express permite manejar los parámetros pasados por la url mediante el signo de dos puntos y concatenarlos de forma indefinida. A continuación un ejemplo de rutas con parámetros mediante el uso de los dos puntos y separando los parámetros por guiones. Para evitar errores con tildes, eñes y otros caracteres es recomendable añadir el tipo de contenido y el tipo de codificación de caracteres con el método set.

  1. const   express = require("express"),
  2.             app=express();
  3. app.get("/user/:id-:name-:age",(req,res) => {
  4.     res
  5.     .set({"Content-Type":"text/html,charset=UTF-8"})
  6.     .end(`
  7.         El usuario ${req.params.name} tiene ${req.params.age} años 
  8.     `);
  9. })
  10. app.listen(3000, () => {"Iniciando Express.js en el puerto 3000 });

RUTAS CON PARÁMETROS DE TIPO BÚSQUEDA

Express permite obtener información de las variables incluidas en la url, muy útil para los mecanismos de búsqueda. Para ello en lugar de params visto en el apartado anterior, dispone del método  query que permite indicar el nombre de la variable y manejar el valor pasado por dicha variable.

  1. const   express=require("express"),            
  2.             app=express();
  3. app
  4. .get("/search",(req,res) => {
  5.     res
  6.     .set({"content-type":"text/html;charset=utf-8"})
  7.     .end(`    	
  8.         <p>El usuario ${req.params.name} tiene ${req.params.age} años</p>
  9. 	<p>Los datos de s: ${req.query.w}</p>
  10.     `)
  11. })
  12. app.listen(3000, () => {"Iniciando Express.js en el puerto 3000 });

En el código de arriba se observa como la variable asignada al método query es una w (aunque podría tener cualquier otro nombre), por tanto, a diferencia de las rutas anteriores que se puede indicar el tipo de separador como diagonal o guión (/ , -) que son los más comunes. Para este tipo de parámetros es necesario utilizar el interrogante seguido de la variable y su valor, comparable al manejo de parámetros de forma nativa en PHP.  Para dejar clara la diferencia, la ruta necesaria para una petición con parámetros con guiones, tal como se describe en la sección anterior, debería ser de esta forma:

  1. http://localhost:3000/users/12-Albert-58

Mientras que para realizar una petición, tal como se describe en esta sección, debería ser de esta otra:

  1. http://localhost:3000/search?w=dato

RUTAS DINÁMICAS

Las rutas dinámicas posibilitan la modificación o cambio del contenido  basándose en la información pasada por la url. Express permite trabajar mediante el objeto Router con rutas dinámicas, por lo general se crea un directorio routes donde se almacenan los archivos manteniendo una estructura más ordenada. Para trabajar con estas rutas es necesario indicar los datos requeridos de la url y la ubicación del archivo de ruta en cuestión.

  1. let dinamicRoute = require("./routes/dinamic")
  3. app.use("/", dinamicRoute)

El archivo de rutas puede interferir en la ruta o complementarla permitiendo trabajar las distintas rutas de forma independiente con los parámetros de la url.

  1. var express = require("express")
  2. var router = express.Router();
  4. router.get("/", (req,res) => {
  5.     res.send("respuesta");
  6. })
  7. router.get("/:id", (req,res) => {
  8.     res.send("Parámetro pasado por url: "+ req.params.id);
  9. })
  11. module.exports = router;


MANEJO DE RESPUESTAS

REDIRECCIONES

Express dispone de métodos de respuesta que permiten redireccionar a una ruta externa. Para ello es necesario indicar el tipo de redirección y la ruta a la que se va a enviar.

  1. const 	express = require("express"),
  2. 		app=express();
  4. app
  5. .get("/",(req,res) => {
  7. 	res.send("Hola Mundo desde Express")
  8. })
  9. .get("/1",(req,res) => {
  10. 	res.redirect(301,"//www.google.es")
  11. })

MANEJO DE DATOS JSON

 Para el manejo de datos json existe el método json() que permite transformar datos a un objeto de tipo json. 

  1. const 	express = require("express"),
  2. 		app=express();
  3. app
  4. .get("/",(req,res) => {
  5. 	res.send("Hola Mundo desde Express")
  6. })
  7. .get("/2",(req,res) => {
  8.     res.json({
  9.         name: "Joan",
  10.         age: "57",
  11.         email: "joan@gmail.com"    
  12.     })
  13. })

RENDERIZADO

El método render permite manejar las distintas vistas en sistemas de plantillas. Existen muchos motores de plantillas handlebars, pug, hogan, etc... Para integrar un motor a Express es necesario instalarlo y registrarlo en con el método set.

  1. .set("views", "./views")
  2. .set("view engine", "hbs")

Express-generator dispone de opciones para instalar y registrar algunos motores de plantillas al crear el proyecto.

  1. express --view=pug miproyecto

Las distintas opciones se pueden revisar mediante la opción de ayuda antes de crear el proyecto.

  1. express --help

MOTORES DE PLANTILLAS

A continuación la implementación de algunos de estos sistemas de plantillas en Express.

HANDLEBARS

Handlebars es un motor de plantillas Javascript que permite generar html con objetos json, dispone de helpers, es sencillo y uno de los más utilizados. 

INSTALAR HANDLEBARS

  1. npm i hbs

HANDLEBARS EN NODEJS

Para trabajar con Handlebars es necesario importar la librería, indicar el directorio de las vistas y establecer el motor de plantillas.

  1. const express=require("express"),
  2. 		fs = require("fs"),
  3. 		app= express(),
  4. 		routes = require("./routes/index"),
  5. 		hbs = require("hbs")
  6. app
  7. .set("port",(process.env.port||3000))
  8. .set("views",`${__dirname}/views`)
  9. .set("view engine","hbs")
  11. .get("/",(req,res)=> {
  12. 	res.render("index",{title: "Index"})
  13. })
  14. app.listen(3000, () => {"Iniciando Express.js en el puerto 3000 });
  15. module.exports = app

El contenido html se almacena en archivos con extensión hbs en el directorio registrado. La plantilla se asigna automáticamente al detectar un archivo layout.hbs aunque es posible modificarlo añadiendo la propiedad layout en el método render.

  1. .get("/",(req,res)=> {
  2. 	res.render("index",{title: "Index", layout: "plantilla"})
  3. })

El layout o plantilla permite, mediante llaves, añadir cadenas y expresiones (con doble llave) y contenido html (con triple llave).

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  6. 		<title>{{ title }}</title>		
  7. 	</head>
  8. 	<body>		
  9. 		<div class="main">
  10. 		    {{{body}}}
  11. 		</div>
  12. 	</body>
  13. </html>

Include en Handlebars

Handlebars también permite añadir secciones a la vista que se encuentran en otros archivos,  similar a los include mediante los denominados partials. Para poder mostrar  estas partes de código es necesario establecer la ruta de dichos archivos mediante el método registerPartials() y deben mantener la extensión hbs.

  1. const express=require("express"),
  2. 		fs = require("fs"),
  3. 		app= express(),
  4. 		routes = require("./routes/index"),
  5. 		hbs = require("hbs")
  6. 		
  7. hbs.registerPartials(`${__dirname}/views/partials`)
  9. app
  11. .set("port",(process.env.port||3000))
  12. .set("views",`${__dirname}/views`)
  13. .set("view engine","hbs")
  15. .use(routes)
  17. app.listen(
  18. 	app.get("port"),
  19. 	() => console.log(`Iniciando Express en el puerto ${app.get('port')}`)
  20. )
  22. module.exports = app

Para incluir estos archivos se indica el archivo entre dobles llaves como si de una expresión o cadena se tratase, pero, a diferencia de los anteriores se incluye un guión (>) antes del nombre del archivo.

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  6. 		<title>{{ title }}</title>		
  7. 	</head>
  8. 	<body>
  9.                 {{>header}}		
  10. 		<div>
  11. 		    {{{body}}}
  12. 		</div>
  13. 	</body>
  14. </html>

PUG

Es un motor de plantillas de alto nivel, sencillo basado en la indentación que permite generar código html sin necesidad de escribir etiquetas html. Ha sido implementado en Javascript para NodeJS y su versión anterior (jade) viene por defecto al crear un proyecto con Express-generator (aunque se recomienda instalar pug, ya que jade es considerado una versión obsoleta) .

INSTALAR PUG

  1. npm i pug

Con Pug es posible crear contenido html de forma normal, como también es posible crearlo sin necesidad de introducir ninguna etiqueta. Para que el sistema reconozca el contenido es indispensable que los archivos dispongan de la extensión pug y la ruta se encuentre registrada en Express.

El motor de Pug toma en cuenta la indentación para identiificar el nivel de los elementos y su sintaxis se basa en caracteres y palabras reservadas que permiten sustituir etiquetas html o añadir contenido externo. Un ejemplo de ello es la palabra reservada extends, término utilizado frecuentemente por otros frameworks, que permite incorporar una plantilla a un contenido específico,y de esa forma, una plantilla con contenido más genérico, puede ser compartido en distintas vistas .

  1. extends layout
  2. block content
  3.     h1 = "Google"
  4.     
  5. p
  6.     a(href="//www.google.es")

El sistema de Pug en Express permite manejar y enviar datos en formato json a la vista mediante el método render. 

  1. var express = require("express");
  2. var router = express.Router();
  4. router.get("/:id",(req,res) => {
  5.     res.render("index",{
  6.         data:{
  7.             title: "Datos por ID",
  8.             ID: req.params.id
  9.         }
  10.     })
  11. })

La vista recoge los datos haciendo uso de la indentación y sintaxis anteriormente mencionada

  1. h2 #{data.title}
  2. if data
  3.     ul
  4.         li ID: #{data.ID}
  5. else
  6.     <p>No existe data</p>


Comentarios: 0

Para poder comentar es necesario iniciar sesión


Este dominio utiliza cookies de terceros para crear estadísticas y publicidad personalizada. Si continúa navegando está aceptando su uso