Funcionamiento del middleware Express.js y sus ventajas

Framework: Se sabe que es un esqueleto donde la aplicación define el contenido de la operación al llenar el esqueleto. Para el desarrollo web, hay python con Django, java con spring, y Para el desarrollo web tenemos Node.js con Express.js en node.js hay un módulo HTTP mediante el cual podemos crear un sitio web o aplicación web operable solo limitado . En general, el verdadero funcionamiento de cualquier aplicación web o sitio web es que es capaz de manejar cualquier tipo de solicitud. Las requests pueden ser publicar, obtener, eliminar y muchas más, como una solicitud de imagen, video, etc., por eso Express.js se usa como marco para Node.js. 

Express.js es un marco de enrutamiento y Middleware para manejar los diferentes enrutamientos de la página web y funciona entre el ciclo de solicitud y respuesta.

Trabajo de Middleware Framework:

Hay muchas funciones de middleware en Express.js como la función Express.js app.use(), etc. 

Sintaxis:

app.use(path,(req,res,next))

Parámetros: Acepta los dos parámetros mencionados anteriormente y descritos a continuación:

• ruta : es la ruta por la que se llama a la función de middleware. Puede ser una string que represente una ruta o un patrón de ruta o un patrón de expresión regular para que coincida con las rutas.
• devolución de llamada : es la función de devolución de llamada que contiene el objeto de solicitud, el objeto de respuesta y la función next() para llamar a la siguiente función de middleware si la respuesta del middleware actual no finaliza. En el segundo parámetro, también podemos pasar el nombre de la función del middleware.

El ciclo de trabajo de múltiples Middleware:

Beneficios de usar Express.js Middleware:

1. Generalmente usamos http.createServer() para crear un servidor y realizar requests y respuestas de acuerdo con la información, pero no podemos verificar qué tipo de solicitud realizó el cliente para que podamos realizar operaciones de acuerdo con la solicitud. 

2. Express.js contiene varios métodos para manejar todo tipo de requests en lugar de trabajar en un solo tipo de solicitud, como se muestra a continuación:

• Método Express.js req.get() : este método se utiliza cuando el cliente realiza una solicitud de obtención, por ejemplo: redirigir otras requests de página web, etc.
• Método Express.js req.post() : este método se utiliza cuando el cliente realiza requests de publicación para, por ejemplo, cargar documentos, etc.
• Método Express.js req.delete() : Este método se utiliza cuando el cliente realiza una solicitud de eliminación. Lo realiza principalmente el administrador, por ejemplo, para eliminar los registros del servidor.
• Método Express.js req.put() : este método se utiliza cuando el cliente realiza requests de actualización para actualizar la información en el sitio web.

3. Fácil de conectar con bases de datos como MongoDB, MySQL.

4. Fácil de servir archivos y recursos estáticos podemos servir fácilmente documentos HTML usando express.js.

5. Hay varios otros beneficios de usar Express.js, como manejar múltiples requests de obtención en una sola página web, lo que significa que le permite definir múltiples rutas de su aplicación basadas en métodos HTTP y URL.

Estructura del proyecto:

Módulo de instalación:

Instale el módulo express usando el siguiente comando:

npm install express

Nombre de archivo: Index.js

// Requiring module
const express = require("express");
 
// Creating express app object
const app = express(); 
 
// Handling '/' route
app.get("/", (req,res,next) => { 
  res.send("unknown request");
})
 
// Handling '/GFG' route   
app.get("/GFG", (req,res,next) => { 
  res.send("Getting request of GFG");
})
 
// Handling '/Hello' route
app.get("/Hello", (req,res,next) => { 
  res.send("Getting request of the Hello");
})
 
// Server setup
app.listen(3000, () => {
  console.log("Server is Running");
})

Ejecute el archivo index.js con el siguiente comando:

node index.js

Comando para ejecutar el proyecto

Producción:

Ahora abra su navegador y vaya a http://localhost:3000/GFG , puede ver el siguiente resultado:

Ahora vaya a http://localhost:3000/hello , puede ver el siguiente resultado:

Nota: El manejo de múltiples requests usando el módulo HTTP por defecto es una solicitud de obtención. Este método no se puede utilizar para múltiples requests de manejo. Si usamos el módulo HTTP para manejar múltiples requests de obtención, se requiere más longitud de código y múltiples condiciones if-else para manejar las diferentes rutas.

Manejo de requests múltiples usando un módulo HTTP:

Nombre de archivo: Index.js

// Requiring module
var http = require('http');
 
// Create a server object
http.createServer(function (req, res) {
     
   // The http header
   res.writeHead(200, {'Content-Type': 'text/html'});
     
   // Getting URL from the request object
   var url = req.url;
     
   // Checking url
   if(url === '/GFG') {
      res.send("Getting request of GFG");
      res.end();
   }
   else if(url === '/hello') {
       res.send("Getting request of the Hello");
       res.end();
   } else {
       res.send("unknown request");
       res.end();
   }
     
}).listen(3000, function() {
   // The server object listens on port 3000
   console.log("server start at port 3000");
});

Llamar a varios middleware desde un solo middleware:

Nombre de archivo: index.js

// Requiring module
const express = require("express"); 
const app = express();
 
// Middleware 1
function Middleware1(req,res,next) {  
    console.log("I am Middleware 1");
     
    // Calling the next middleware present in stack
    next(); 
}
 
// Middleware 2
function Middleware2(req,res,next) {  
 
  res.write("<h1>Express.js GFG<h1>")
   
  // Printing the statement
  console.log("I am Middleware 2"); 
   
  // Ending the response
  res.end(); 
}
 
// Request handling
app.get("/", Middleware1, Middleware2);
 
// Server setup
app.listen(3000, () => {
  console.log("Server is Running");
})

Producción:

Ahora abra su navegador, verá el siguiente resultado:

El siguiente será el resultado en la pantalla de su terminal:

Envío de documentos HTML usando Express.js: 

El middleware express.static() es el del módulo express.js que se usa para servir los documentos HTML estáticos. El beneficio de usarlo obtiene automáticamente el nombre del documento HTML presente en el directorio en particular.

Estructura del proyecto:

Nombre de archivo: index.html

<!DOCTYPE html>
<html>
 
<head>
    <style>
 
        /* Assign full width inputs */
        input[type=text],
        input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
 
        /* Set a style for the buttons */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }
 
        /* Set a hover effect for the button */
        button:hover {
            opacity: 0.8;
        }
 
        /* Set extra style for the cancel button */
        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }
 
        /* Centre the display image inside
          the container */
        .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
            position: relative;
        }
 
        /* Set image properties */
        img.avatar {
            width: 40%;
            border-radius: 50%;
        }
 
        /* Set padding to the container */
        .container {
            padding: 16px;
        }
 
        /* Set the forgot password text */
        span.psw {
            float: right;
            padding-top: 16px;
        }
 
        /* Set the Modal background */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 60px;
        }
 
        /* Style the model content box */
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto 15% auto;
            border: 1px solid #888;
            width: 80%;
        }
 
        /* Style the close button */
        .close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }
 
        .close:hover,
        .close:focus {
            color: red;
            cursor: pointer;
        }
 
        /* Add zoom animation */
        .animate {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
        }
 
        @-webkit-keyframes animatezoom {
            from {
                -webkit-transform: scale(0)
            }
 
            to {
                -webkit-transform: scale(1)
            }
        }
 
        @keyframes animatezoom {
            from {
                transform: scale(0)
            }
 
            to {
                transform: scale(1)
            }
        }
 
        @media screen and (max-width: 300px) {
            span.psw {
                display: block;
                float: none;
            }
 
            .cancelbtn {
                width: 100%;
            }
        }
    </style>
</head>
 
<body>
 
    <h2>Modal Login Form</h2>
    <button onclick="document.getElementById('id01')
        .style.display='block'" style="width:auto;">
        Login
    </button>
 
    <div id="id01" class="modal">
 
        <form class="modal-content animate"
            action="/action_page.php">
             
            <div class="imgcontainer">
                <span onclick="document
                    .getElementById('id01').style
                    .display='none'" class="close"
                    title="Close Modal">
                    ×
                </span>
                 
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/
20190710102234/download3.png" alt="Avatar" class="avatar">
            </div>
 
            <div class="container">
                <label><b>Username</b></label>
                <input type="text" placeholder=
                    "Enter Username" name="uname"
                    required>
 
                <label><b>Password</b></label>
                <input type="password" placeholder=
                    "Enter Password" name="psw"
                    required>
 
                <button type="submit">Login</button>
                <input type="checkbox"
                    checked="checked">
                    Remember me
            </div>
 
            <div class="container" style=
                "background-color:#f1f1f1">
                <button type="button" onclick=
                    "document.getElementById('id01')
                    .style.display='none'"
                    class="cancelbtn">
                    Cancel
                </button>
                 
                <span class="psw">Forgot <a href="#">
                    password?
                </a></span>
            </div>
        </form>
    </div>
 
    <script>
        var modal = document.getElementById('id01');
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
 
</html>

Nombre de archivo: app.js

// Requiring module
const express = require("express");
const app = express();
const path = require("path");
 
// Middleware
app.use(express.static(__dirname+"/public"));
 
// Handling request
app.get("/", (req,res,next) => {
    res.write("GFG");
    res.end();
})
 
// Server setup
app.listen((3000), () => {
    console.log("Server is Running");
})

Ejecute el archivo app.js con el siguiente comando:

node app.js

Producción: