Obtenga cadenas de consulta y parámetros en Express.js

Repasaremos cómo extraer información de una URL en Express.js. Específicamente, ¿cómo extraemos información de una cadena de consulta y cómo extraemos...

Introducción

Repasaremos cómo extraer información de una URL en Express.js. Específicamente, ¿cómo extraemos información de una cadena de consulta y cómo extraemos información de los parámetros de ruta de URL?

En este artículo, asumo que tiene algo de experiencia con Node.js y con la creación de servidores Express.js (o al menos simples). El resto lo explicaremos a lo largo del artículo.

Extracción de parámetros de consulta

Antes de comenzar, sería útil comprender primero qué es exactamente una cadena de consulta/parámetro, y luego hablaremos sobre cómo podemos trabajar con ellos.

Entonces, ¿qué es un parámetro de consulta?

En términos simples, una cadena de consulta es la parte de una URL (Uniform Resource Locater) después del signo de interrogación (?). Está destinado a enviar pequeñas cantidades de información al servidor a través de la URL. Esta información generalmente se usa como parámetros para consultar una base de datos, o tal vez para filtrar resultados. Realmente depende de ti para qué se usan.

Este es un ejemplo de una URL con cadenas de consulta adjuntas:

1
https://wikihtp.com/?page=2&limit=3

Los parámetros de consulta son los pares clave-valor reales como página y límite con valores de 2 y 3, respectivamente.

Ahora, pasemos al primer objetivo principal de este artículo: cómo extraerlos de nuestro objeto de solicitud Express.

Este es un caso de uso bastante común en Express y en cualquier servidor HTTP, por lo que espero que los ejemplos y la explicación que muestro aquí sean claros.

Ahora, tomando el mismo ejemplo de arriba:

1
https://wikihtp.com/?page=2&limit=3

Nos gustaría extraer los parámetros page y limit para saber qué artículos devolver a la página que solicitó el usuario. Si bien los parámetros de consulta se usan normalmente en las solicitudes GET, aún es posible verlos en las solicitudes POST y DELETE, entre otras.

Sus parámetros de consulta se pueden recuperar del objeto query en el objeto solicitud enviado a su ruta. Tiene la forma de un objeto en el que puede acceder directamente a los parámetros de consulta que le interesan. En este caso, Express maneja todo el análisis de URL por usted y expone los parámetros recuperados como este objeto.

Echemos un vistazo a un ejemplo de cómo obtenemos parámetros de consulta en una ruta:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const express = require('express');
const bodyParser = require('body-parser');
const url = require('url');
const querystring = require('querystring');
const Article = require('./models').Article;

let app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// Function to handle the root path
app.get('/', async function(req, res) {

    // Access the provided 'page' and 'limt' query parameters
    let page = req.query.page;
    let limit = req.query.limit;

    let articles = await Article.findAll().paginate({page: page, limit: limit}).exec();

    // Return the articles to the rendering engine
    res.render('index', {
        articles: articles
    });
});

let server = app.listen(8080, function() {
    console.log('Server is listening on port 8080')
});

En el ejemplo anterior, asumimos que los parámetros page y limit siempre existen. Si ninguno de estos parámetros se proporciona en la URL, recibiríamos “indefinido” para “página” y “límite”.

Extraer parámetros de consulta sin Express

Como bonificación rápida, quería mostrarle cómo realizar el análisis real por su cuenta en caso de que necesite extraer información de una URL que no utiliza Express ni ningún otro marco web. Es bastante común crear un servidor extremadamente simple utilizando el módulo http, por lo que es bueno saberlo.

Por suerte para usted, Node.js ya proporciona algunas bibliotecas principales excelentes que tienen esta funcionalidad incorporada, por lo que solo es cuestión de “requerir” el módulo y llamar algunas líneas de código.

Aquí hay un ejemplo usando los paquetes cadena de consulta y URL.

1
2
3
4
5
6
7
8
9
const url = require('url');
const querystring = require('querystring');

let rawUrl = 'https://wikihtp.com/?page=2&limit=3';

let parsedUrl = url.parse(rawUrl);
let parsedQs = querystring.parse(parsedUrl.query);

// parsedQs = { page: '2', limit: '3' }

Puede ver en este código que necesitamos dos pasos de análisis para obtener los resultados que queremos.

Analicemos esto un poco más y mostremos qué sucede exactamente en cada paso. Después de llamar a url.parse(rawUrl) en nuestra URL, esto es lo que nos devuelve:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
    protocol: 'https:',
    slashes: true,
    auth: null,
    host: 'wikihtp.com',
    port: null,
    hostname: 'wikihtp.com',
    hash: null,
    search: '?page=2&limit=3',
    query: 'page=2&limit=3',
    pathname: '/',
    path: '/?page=2&limit=3',
    href: 'https://wikihtp.com/?page=2&limit=3'
}

Bien, estamos un poco más cerca de obtener los datos que necesitamos. Pero necesita ser desglosado una vez más. Podemos hacer esto usando el paquete querystring para analizar la cadena de consulta real. Por ejemplo:

1
let parsedQs = querystring.parse(parsedUrl.query);

Y finalmente, nuestro objeto parsedQs contiene lo siguiente:

1
2
3
4
{
    page: '2',
    limit: '3'
}

Extracción de parámetros de ruta

En cualquier aplicación web, otra forma común de estructurar sus URL es colocar información dentro de la ruta de URL real, que simplemente se denominan parámetros de ruta en Express. Podemos usarlos para estructurar páginas web por información/datos, que son especialmente útiles en las API REST.

Extraer estos parámetros de ruta es similar a los parámetros de consulta. Todo lo que hacemos es tomar el objeto req y recuperar nuestros parámetros del objeto params. Bastante simple, ¿verdad?

Echemos un vistazo a un ejemplo de cómo hacer esto en nuestra ruta Express:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// Route to return all articles with a given tag
app.get('/tag/:id', async function(req, res) {
    
    // Retrieve the tag from our URL path
    var id = req.params.id;

    let articles = await Article.findAll({tag: id}).exec();

    res.render('tag', {
        articles: articles
    });
});

Lo primero que debe notar es que le decimos a Express que nuestra ruta es /tag/:id, donde :id es un marcador de posición para cualquier cosa. Podría ser una cadena o un número. Entonces, lo que sea que se pase en esa parte de la ruta se establece como el parámetro id.

Si tuviéramos que navegar a la URL https://wikihtp.com/tag/node entonces id sería nodo, y obtendríamos un montón de artículos que tienen la etiqueta nodo en ellos . Y req.params en este caso sería {id: 'node'}, al igual que el objeto query.

Como puede ver, nuevamente tomamos nuestro parámetro directamente de un objeto contenido dentro del objeto de solicitud.

Conclusión

En este artículo, presenté formas de extraer tanto los parámetros de cadena de consulta como los parámetros de ruta de ruta de una URL en el marco web Express. Aquí hay un resumen rápido de cómo extraer los parámetros de los que hablamos:

  • req.query: acceda directamente a los parámetros de cadena de consulta analizados
  • req.params: acceda directamente a los parámetros de ruta analizados desde la ruta

Si bien el acto real de recuperar estos datos es muy simple, comprender de dónde proviene esta información y qué es puede ser confuso para algunos principiantes. Espero que este artículo te haya aclarado algunas cosas. Siéntase libre de dejarnos saber en los comentarios si hay algo que no está claro.