Entendiendo el enrutamiento de ExpressJS

Introducción

Express es un popular framework web Node.js. Entre su funcionalidad, proporciona una envoltura para enrutamiento. El Express Router ayuda en la creación de manejadores de rutas. En este tutorial, aprenderá cómo trabajar con Express Router.

Empecemos.

Crea un nuevo directorio para tu aplicación. Ejecute el comando para inicializar npm en el directorio que acaba de crear.

npm init -y

La única dependencia que necesitará es Express, así que adelante e instálela.

npm instalar --save express

Al final, el archivo package.json debería tener este aspecto.

# package.json "name": "express-router", "version": "1.0.0", "description": "," main ":" index.js "," scripts ": " test " : "echo \" Error: no se especificó la prueba \ && exit 1 "," keywords ": []," author ":" "," license ":" ISC "," dependencies ": " express ":" ^ 4.16.2 "

Ahora cree un nuevo archivo llamado index.js, que será su archivo de entrada como se indica en su paquete.json.

Por ahora, solo necesitas una configuración básica como esta:

# index.js const express = require ('express') const app = express () app.listen (3000, () => console.log ('Servidor que se ejecuta en el puerto 3000'))

Enrutamiento básico

Comience por crear algunas rutas básicas como las que tengo a continuación..

# index.js ... const router = express.Router () // 1 router.get ('/', (req, res) => // 2 res.send ('¡Esta es la página de inicio!')) router .post ('/ contact', (req, res) => // 3 res.send ('Esta es la página de contacto con una solicitud POST')) app.use ('/', router) // 4 ... 

1. Se crea una instancia de Express Router. La instancia se establece en una variable llamada enrutador. Esta variable se utilizará cuando quieras crear una ruta..
2. Se define una nueva ruta para el método GET a la raíz de la aplicación. Se adjunta a la instancia de la clase Express Router..
3. Se define una nueva ruta para el método POST a la página de contacto de la aplicación. Se adjunta a la instancia de la clase Express Router..
4. Esto monta algún middleware que se utilizará para manejar sus rutas. Aquí le dice a su aplicación que desea hacer uso del enrutador (que es la instancia del Enrutador Express) para cada solicitud hecha a la aplicación que corresponde a la ruta '/'. Si no monta una ruta en este middleware, se ejecutará para cada solicitud realizada a la aplicación.

Digamos que tienes el código de abajo en lugar.

app.use ('/ usuario', enrutador)

Esto coincidirá con todos los siguientes: /perfil del usuario, usuario / perfil / editar, usuario / panel de control / artículo / vista, y así.

Métodos de ruta

En el código anterior, adjuntó un método de ruta a una instancia de Express Router. El método de ruta se deriva de uno de los métodos HTTP y se adjunta a la instancia del Express Router como lo hizo.

Express admite los siguientes métodos de enrutamiento que corresponden a métodos HTTP: obtener, enviar, poner, cabeza, borrar, opciones, rastro, dupdo, bloquear, mkcol, movimiento, purga, desbloquear, informe, mkactivity, revisa, unir, m-búsqueda, notificar, suscribir, darse de baja, parche, y buscar.

Hay un método de enrutamiento espantar() que no se deriva de ningún método HTTP. Este método de enrutamiento se carga para las funciones en una ruta especificada para todos los métodos de solicitud.

Digamos que tienes el código de abajo en tu aplicación.

app.all ('/ books', (req, res) => res.send ('Esto accede a la sección del libro'))

Esto se ejecutará para solicitudes a "/ books" cuando esté utilizando GET, POST, PUT o cualquier método de solicitud HTTP.

Rutas de ruta

Una ruta de acceso se utiliza para definir un punto final donde se pueden realizar solicitudes. Lo hace con la combinación de un método de solicitud. En Express, las rutas de ruta pueden ser patrones de cadena o expresiones regulares.

Aquí hay ejemplos que puede agregar a su index.js expediente.

# index.js router.get ('/ about', (req, res) => res.send ('Esta ruta de acceso coincidirá con / about')) router.get ('/ profile.txt', ( req, res) => res.send ('Esta ruta coincidirá con /profile.txt'))

Veamos una ruta usando patrones de cuerdas..

router.get ('/ ab + xy', (req, res) => // 1 res.send ('ab + xy')) router.get ('/ ab (xy)? z', (req , res) => // 2 res.send ('/ ab (xy)? z'))

1. La ruta coincidirá abxy, abbxy, abbbxy, y así.
2. La ruta coincidirá /Abz y /Abxyz.

Parámetros de ruta

Estos se utilizan para capturar valores que se especifican en una posición determinada en la URL. Se llaman segmentos de URL. Los valores capturados están disponibles en el req.params objeto, utilizando el nombre del parámetro de ruta especificado en la ruta como las claves de los valores.

Aquí hay un ejemplo.

Si tiene una ruta similar a esta en su aplicación: / users /: userId / articles /:ID del artículo

La URL solicitada se verá así: http: // localhost: 3000 / users / 19 / articles / 104

En el req.params, los siguientes estarán disponibles: "userId": "19", "bookId": "104"

Continúe y cree una nueva ruta en su aplicación, utilizando la ruta de la ruta anterior.

router.get ('/ users /: userId / articles /: articleId', (req, res) => res.send (req.params))

Inicie su servidor y dirija su navegador a http: // localhost: 3000 / users / 19 / articles / 104. Verá el req.params objeto mostrado en su navegador.

El nombre de los parámetros de la ruta debe estar formado por caracteres de palabras. ([A-Za-z0-9_]).

Vamos más lejos!

Digamos que quieres tener una ruta llamada / usuarios /: nombre, donde el nombre del usuario se pasa a la URL y la aplicación muestra el nombre junto con una cadena. ¿Cómo crees que se puede lograr??

Anímate y pruébalo por tu cuenta primero..

Aquí es cómo debe verse la ruta.

router.get ('/ users /: name', (req, res) => res.send ('Welcome, $ req.params.name!'))

Cuando visite http: // localhost: 3000 / users / vivian, debería ver Bienvenido, vivian! mostrado en el navegador.

Rutas de inicio de sesión

Veamos cómo crear una ruta de inicio de sesión en Express. Sus rutas de inicio de sesión requieren dos acciones en una sola ruta. Las acciones serán diferenciadas por el método de ruta utilizado. Aquí es cómo se verá.

router.get ('/ login', (req, res) => res.send ('Esto debe llevar al formulario de inicio de sesión')) router.post ('/ login', (req, res) => res.send ('Esto se usa para procesar el formulario'))

Después de hacer esto, su formulario de tienda debe tener una acción cuyo valor sea la ruta definida con el método HTTP POST. Aquí es cómo debe verse.

Cuando se hace clic en el botón Enviar del formulario, se llama al enrutador especificado. La diferencia entre ambas rutas como se indica anteriormente es el HTTP POST. Así es como la aplicación determina quién es responsable de manejar los datos que se pasan a través del formulario..

Otro aspecto donde se puede experimentar es en el área de edición y actualización de recursos..

app.ruta ()

app.ruta () se puede utilizar para crear una cadena de controladores de ruta para una ruta de ruta específica.

Utilizando el ejemplo de la ruta de inicio de sesión, aquí es cómo utilizará app.ruta ().

app.route ('/ login') .get ((res, req) => res.send ('Esto debe llevar al formulario de inicio de sesión')) .post ((res, req) => res. enviar ('Esto se usa para procesar el formulario'))

Puedes agregar más manejadores de ruta que los que tenemos arriba.

Conclusión

En este punto, debe saber cómo funciona el enrutamiento en Express. Ha aprendido cómo configurar el enrutamiento básico y también cómo trabajar con métodos y rutas de ruta. Ya vio cómo hacer uso de los parámetros de ruta y recuperar los valores enviados a través de la URL.

Si está buscando recursos de JavaScript adicionales para estudiar o usar en su trabajo, consulte lo que tenemos disponible en Envato Market.

Con este conocimiento, puede ir más lejos para crear una aplicación Express con enrutamiento complejo.