¿Cómo enviar diferentes archivos HTML basados ​​en parámetros de consulta en Node.js?

El siguiente enfoque cubre cómo enviar diferentes archivos HTML según los parámetros de consulta en Node.js

Enfoque: la tarea se puede realizar fácilmente al recibir los parámetros de consulta y asignar diferentes archivos HTML con los parámetros respectivos.

Paso 1: Cree su carpeta de proyecto e instale el módulo express usando el siguiente comando:

npm install express

Paso 2: Cree un archivo main.js en el directorio raíz de su proyecto y escriba el siguiente código en él.

main.js

var express = require('express');
var app = express();
const fs = require("fs");
  
// Helper function to read and serve html files 
// according to the requested paths 
function readAndServe(path, res) {
    fs.readFile(path, function (err, data) {
        res.end(data);
    })
}
  
// Setting get request path to receive id as query parameter 
app.get('/:id', function (req, res) {
    console.log(req.params);
  
    // Mapping different id's with respective html files
    if (req.params.id == "id1")
        readAndServe("./id1.html", res);
    else if (req.params.id == "id2")
        readAndServe("./id2.html", res);
    else {
        res.end("Invalid request");
    }
});
  
app.listen(8080, () => { console.log("Server Listening on Port 8080") });

Paso 3: Cree archivos id1.html e id2.html en el directorio raíz de su proyecto como se muestra a continuación.

id1.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Id 1</title>
    </head>
    <body>
        <h1>Requested Id = 1</h1>
    </body>
</html>

id2.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Id 2</title>
    </head>
    <body>
        <h1>Requested Id = 2</h1>
    </body>
</html>

Paso 4: Ejecute el servidor usando el siguiente comando desde el directorio raíz del proyecto:

node main.js

Producción:

  • Ahora abra su navegador y vaya a http://localhost:8080/id1 , verá el siguiente resultado cuando se pase id1 como parámetro de consulta.

  • Ahora vaya a http://localhost:8080/id2 , verá el siguiente resultado cuando se pase id2 como parámetro de consulta.

Publicación traducida automáticamente

Artículo escrito por anshubajaj911 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *