Cómo definir rutas y métodos de petición HTTP en Express

Introducción

Este artículo examinará cómo manejar rutas y métodos de petición HTTP dentro de un proyecto Express. Las rutas manejan la navegación del usuario a varias URLs a través de su aplicación. HTTP, abreviatura de Hyper Text Transfer Protocol, comunica y facilita los datos de su servidor Express al navegador web.

Aprenderás a definir rutas y a utilizar los métodos de petición HTTP GETPOSTPUT, y DELETE para manipular datos.

Requisitos previos

Para completar este tutorial, un conocimiento de Node.js es útil pero no es necesario. Si quieres aprender más sobre Node.js, echa un vistazo a la serie Cómo codificar en Node.js.

Cómo configurar tu proyecto

Como Express es un framework de Node.js, asegúrate de tener instalado Node.js desde Node.js antes de seguir los siguientes pasos. Ejecuta lo siguiente en tu terminal:

Crea un nuevo directorio llamado node-express-routing para tu proyecto:

mkdir node-express-routing

Cambia al nuevo directorio:

cd node-express-routing

Inicializa un nuevo proyecto Node con los valores predeterminados. Esto incluirá su archivo package.json para acceder a sus dependencias:

npm init -y

Crea tu archivo de entrada, index.js. Aquí es donde manejarás tus rutas y métodos de petición HTTP:

touch index.js

Instala tanto Express como nodemon como dependencias. Usarás nodemon para reiniciar continuamente tu proyecto Express cada vez que el archivo index.js cambie.

 
npm install express --save
 
npm install -D nodemon
 

Abre tu archivo package.json con tu editor de texto preferido y actualiza tu start script para incluir nodemon y tu archivo index.js:

Esto te permitirá utilizar el comando npm start en tu terminal para lanzar tu servidor Express y actualizar los cambios.

Ahora que has configurado tu proyecto y has configurado nodemon para que se actualice cuando detecte cambios en tu archivo index.js, estás listo para iniciar tu servidor Express.

Iniciando tu servidor Express

Tu servidor Express es donde manejarás la lógica para integrar tus rutas y métodos de petición HTTP. Configurarás y ejecutarás tu servidor para visualizar tu proyecto en el navegador.

Para iniciar tu servidor Express, requiere Express en tu archivo index.js y almacena una instancia en la variable app. A continuación, declara una variable PORT y especifica la dirección :3000.

A continuación, añade .listen() a app e inserta PORT como primer argumento, y luego una función de devolución de llamada. El middleware Express .listen() crea un navegador local a partir de la dirección de su variable PORT para visualizar sus cambios.

También incluye express.json() como argumento de app.use(). Esto es para analizar los datos entrantes a través de sus peticiones HTTP. Una versión anterior dependía de la dependencia body-parser, pero desde entonces Express ha incluido un middleware incorporado para analizar los datos.

Ejecuta el siguiente comando en tu terminal para iniciar el proyecto:

npm start

Tu proyecto se carga en . Navega en tu navegador, y observa lo siguiente:

Este es el comienzo de una instancia Express en funcionamiento. Vamos a trabajar en la definición de métodos HTTP para poblar el navegador.

Definiendo tu método de petición HTTP GET

Para ver tu proyecto, puedes enviar información desde tu servidor Express a través de una GET petición, un método HTTP.

En index.js, añade .get() a tu variable app, especificar una ruta anónima, e incluir un callback que acceda a los argumentos request y response:

 app.get('/', (request, response) => { response.send('Hello');});

El argumento request contiene información sobre la solicitud GET, mientras que response.send() envía datos al navegador. Los datos dentro de response.send() pueden ser una cadena, un objeto o un array.

Ahora que has implementado una petición GET, vamos a ver las rutas y otros métodos HTTP.

Entendiendo las rutas

Si navegas a recibirás todas las cuentas de tu matriz:

Output

También puedes filtrar los ID de las cuentas utilizando el endpoint /:id. Express considera el ID en el endpoint /:id como un marcador de posición para un parámetro de usuario, y coincide con ese valor.

Una vez que navegues a , obtendrás una cuenta que coincide con el parámetro /:id:

Output
{ "id": 3, "username": "sarahjane", "role": "guest"}

Diseño de los métodos de solicitud HTTP POST, PUT y DELETE

Los métodos HTTP proporcionan funcionalidad adicional a sus datos mediante las solicitudes POSTPUT y DELETE. El método de solicitud POST crea nuevos datos en su servidor, mientras que PUT actualiza la información existente. El método de petición DELETE elimina los datos especificados.

POST

Para crear nuevos datos en el array accounts, puedes integrar un método de petición POST.

En index.js, añade .post() a tu variable app, e incluye la ruta'/accounts' como primer argumento:

Empujarás cualquier dato entrante de tu solicitud POST en el array accounts y enviarás la respuesta como un objeto JSON.

Tu accounts array contiene ahora un nuevo usuario:

PUT

Puedes editar y actualizar una cuenta particular a través de una PUT solicitud.

En index.js, añade .put() a tu variable app e incluye la ruta '/accounts/:id' como primer argumento. Encontrarás el ID de la cuenta introducido, y establecerás una condicional para actualizar con los nuevos datos:

Ahora podrás actualizar los datos de la matriz accounts. Si un usuario cambia su "role":

{ "role": "guest"}

Nota que "role" se actualiza a guest desde admin en

Output
{ "id": 1, "username": "paulhal", "role": "guest"}

DELETE

Puedes eliminar usuarios y datos utilizando el método de solicitud DELETE.

Dentro de index.js, añade .delete() a tu variable app, e incluye '/accounts/:id' como primer argumento. Filtrarás el array accounts y devolverás la cuenta a eliminar.

Si envías una solicitud DELETE a , esto eliminará la cuenta con el /:id de 1 del array accounts.

Conclusión

La especificación de rutas y el uso de métodos de petición HTTP ayudan a generar un rendimiento adicional al crear, actualizar y eliminar usuarios y datos en tu servidor Express.