Blog

ExpressJS: Rutas

Publicado por: Sergioal
Categoría: Blog

Una vez visto el Hola Mundo en Express, vamos a profundizar un poco más y vamos a ver las rutas y los posibles valores que podemos introducir.

Las rutas en ExpressJS son las que sirve nuestra aplicación y a las cuales nosotros le programamos una lógica para así devolver los resultados que el cliente solicita.

Tipos de ruta

Para empezar, vamos a ver cuales son los tipos de rutas que podemos manejar dentro de Express. Express da soporte a los siguientes métodos de direccionamiento que se corresponden con los métodos HTTP:

get, post, put, head, delete, options, trace, copy, lock, mkcol, move, purge, propfind, proppatch, unlock, report, mkactivity, checkout, merge, m-search, notify, subscribe, unsubscribe, patch, search y connect.

De esta lista, los importantes son get, post, put y delete. Podemos establecer tanto rutas simples como avanzadas y con expresiones regulares.

Rutas GET

Este tipo de rutas se caracteriza por mostrar información al usuario sin que se procesen datos introducidos por el usuario. Por ejemplo, una página que muestra información sobre un producto o una página de “quienes somos” normalmente manejan una petición GET.

En este tipo de rutas no debemos de introducir datos sensibles, como contraseñas o datos de sesión, ya que se guardan en el navegador y son visibles.

Para crear esta ruta, basta con hacerlo como este ejemplo:

const express = require('express');
uniwigs human hair cheap wigs are made of 100% human hair and are never mixed with any other types of materials.
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World')
})

app.get('/acerca', (req, res) => {
    res.send('acerca');
});

const server = app.listen(3000, () => {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Servidor de desarrollo ejecutandose en http://localhost:' + port)
})

Ahora, si volvemos a ejecutar node rutas.js, y nos dirigimos a http://localhost:3000/acerca, nos imprimirá “acerca” en pantalla.

Fíjate que en este caso he utilizado las funciones flechas en lugar de utilizar las funciones usando la palabra reservada function, esta es una manera más comoda de utilizar funciones y escribir menos código.

Podemos hacer uso de las expresiones regulares para formar una ruta personalizada. Por ejemplo, podríamos crear las siguientes rutas:

//Aquí se accederá cuando la ruta sea acd y abcd
app.get('/ab?cd', function(req, res) {
  res.send('ab?cd');
});

//Aquí se accederá cuando la ruta sea abcd, abbcd, abbbcd pudiendo poner tantas b como queramos, ya que hemos introducido el "+"
app.get('/ab+cd', function(req, res) {
  res.send('ab+cd');
});

//Mismo caso que el anterior, pero ahora podemos poner cualquier caracter después de la b, ya que hemos introducido el asterisco
app.get('/ab*cd', function(req, res) {
  res.send('ab*cd');
});

//Se accederá con /abcde
app.get('/ab(cd)e', function (req, res) {
    res.send('ab(cd)e');
});
//Se accederá con /abe y /abcde
app.get('/ab(cd)?e', function(req, res) {
 res.send('ab(cd)?e');
});

Ahora, vamos a explicar más a detalle que es lo que realiza cada expresión regular:

La expresión regular “?”: Toma en cuenta el caracter precedente, en nuestro ejemplo este caracter es la letra b la cual si no es incluida en la ruta, de igual forma se accedera a ella gracias a esta expresión regular.
La expresión regular “+”: También toma en cuenta el caracter precedente, para este caso también es la letra b y lo que hace es acceder a nuestra ruta sin importar la cantidad de letras b que se le envíen al servidor, pero solo con la letra b ya que si se coloca otra letra o número no funcionará.
La expresión regular “*”: Esta expresión es parecida a la anterior ya que se toma en cuenta el caracter precedente el cual sigue siendo la letra b, pero; esta vez si le pasamos cualquier letra, simbolo o número después de la b, de igual manera accederemos a la ruta.
La expresión regular “(args)”: Esta expresión lo que hace es introducir en la ruta los valores que se le pasen por parámetro, en nuestro caso hemos introducido las letras “cd” las cuales son agregadas a la ruta, esta expresión es práctica para cuando necesitamos pasar variables a la ruta.

También es posible escribir una ruta con un parámetro. Por ejemplo, si queremos crear una ruta de usuarios, con el usuario como parámetro, haríamos lo siguiente:

app.get('/usuario/:nombre', function (req, res) {
    res.send('Hola ' + req.params.nombre);
});

El cual, accediendo por ejemplo a esta dirección:

http://localhost:3000/usuario/unipython

Nos devolverá “Hola unipython”, ya que hemos introducido unipython como parámetro.

Rutas POST

Las rutas POST, como su propio nombre indica, son las que manejan rutas donde pasamos parámetros en POST.

Desde la versión 4 de Express, que es la que estamos utilizando en este curso, se requiere una dependencia para manejar las peticiones en POST. Esta dependencia se llama bodyParser, y se puede instalar forma muy sencilla con NPM. Para ello, tan sólo debemos de introducir este comando en la terminal:

sudo npm install --save body-parser

Para explicar bien estas rutas, vamos a hacer algo un poco más complejo. Vamos a introducir un usuario y una contraseña a través de un fichero html, y lo vamos a visualizar en la terminal una vez enviado.

Para ello, tendremos que crear un código como en el siguiente ejemplo en un nuevo archivo llamado rutas_post.js:

const express        =         require("express");
const bodyParser     =         require("body-parser");
const app            =         express();

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

//A la ruta principal, cargamos el fichero index.html
app.get('/',function(req,res){
    res.sendFile(__dirname + '/index.html');
});

//Cuando accedamos a la URL /sesion, que se redirige desde el index.html
app.post('/sesion',function(req,res){
    //Usuario introducido, como user
    var user_name=req.body.user;
    //Contraseña introducida
    var password=req.body.password;
    
    //Visualizamos por consola los datos
    console.log("El usuario es: "+user_name+", y su contraseña es: "+password);
    //Finalizamos la petición
    res.end("Finalizado");
});

//Configurar que el servidor escuche el puerto 3000
var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Ejemplo de aplicación del curso de NodeJS, ExpressJS y MongoDB en el puerto', port);
});

Y el fichero index.html quedaría así, el cual debemos de guardar en la misma altura que el archivo js:

<!DOCTYPE html>
<html>
<body>

<h2>Inicio de sesión</h2>

<form action="/sesion" method="post">
    <label for="fname">Usuario:</label><br>
    <input type="text" id="fname" name="user"><br>
    <label for="lname">Contraseña:</label><br>
    <input type="password" id="lname" name="password"><br><br>
    <input type="submit" value="Enviar">
</form>

</body>
</html>

Como podéis ver, hemos accedido al fichero index.html, el cual contiene un pequeño formulario que nos permite introducir los datos de usuario y contraseña. Esta petición ha sido GET, ya que de momento no hemos tratado ningún dato.

Cuando hacemos click en el botón enviar, los datos del formulario son enviados a la ruta /sesion, la cual sí que contiene datos en POST, y los visualizamos con req.body y su parámetro, este parametro es el atributo name que le dimos en el html, por ejemplo en el input de la contraseña, le dimos al atributo name el valor de “password”, entonces del lado del servidor es por eso que hacemos req.body.password para obtener la contraseña que ha introducido el usuario en el formulario. Para finalizar, visualizamos los datos por pantalla en la terminal.

Rutas ALL

Con Express, podemos emplear app.all para que cualquier ruta que contenga esa ruta, se dirija hacia ahí. Por ejemplo, si queremos que todas las rutas vayan al mismo sitio, podemos usar el siguiente ejemplo:

app.all('*', function (req, res, next) {
  console.log('Todas las rutas irán aquí, y funcionará ninguna más');
});

Hecho esto, cualquier ruta que se sitúe debajo de esta no va a funcionar. Si por el contrario queremos que se pueda acceder a esta ruta pero que posteriormente se dirija a las siguientes rutas, podemos emplear next() para ello.

app.all('*', function (req, res, next) {
    console.log('Se accede a esta ruta, y funcionan las siguientes');
    next();
});

Ahora, cada vez que se acceda a cualquier ruta, se imprimirá en la consola el mensaje y se dirigirá a la siguiente ruta.

Agrupar las rutas con route

Podemos usar el método route para crear varios tipos de rutas en un mismo sitio. Por ejemplo, si queremos que “/usuarios” tenga tres métodos: PUT, POST y GET, podemos hacerlo como en el siguiente ejemplo:

app.route('/usuarios')
    .get(function (req, res) {
        res.send('Petición GET');
    })
    .post(function (req, res) {
        res.send('Petición POST');
    })
    .put(function (req, res) {
        res.send('Petición PUT');
    });

Aquí tendríamos los tres tipos de peticiones en el mismo sitio, cada una con su respectivo método.

Router

Con Express podemos, con el método Router(), crear un enrutador dentro de un directorio. Por ejemplo, si queremos crear una serie de rutas para todo lo que esté dentro de /admin, por ejemplo /admin/posts, /admin/usuarios, podemos hacerlo de manera muy sencilla.

Primero, tendremos que crear un archivo separado para tenerlo mejor estructurado, aunque también podemos hacerlo dentro del mismo archivo. Dentro, creamos las rutas, y incluiremos este archivo dentro del js principal. Entonces, asignaremos a una ruta en concreto un router.

Vamos a verlo con un ejemplo para entenderlo mejor. Para empezar, crearemos en la raiz un archivo que se llame router_admin.js, que contendrá el enrutador de /admin:

const express = require('express');
const router = express.Router();

router.get('/posts', function (req, res) {
    res.send('Posts');
});

router.get('/usuarios', function (req, res) {
    res.send('Usuarios');
});

//Exportamos el router
module.exports = router;

Ahora, en un archivo llamado rutas_router.js, el cual ejecutaremos con node, llamaremos al router que hemos creado para hacer uso:

const express = require('express');
const app = express();

//Instanciamos el router
const router = express.Router();

//Llamamos al router que hemos creado
const router_admin = require('./router_admin');

//Usamos el router sobre el directorio /admin
app.use('/admin', router_admin);

//Configurar que el servidor escuche el puerto 3000
const server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Ejemplo de aplicación del curso de NodeJS, ExpressJS y MongoDB en el puerto', port);
});

Así, si vamos a la dirección http://localhost:3000/usuarios no nos devolverá ninguna respuesta. Sin embargo, si accedemos a http://localhost:3000/admin/usuarios sí obtendremos la respuesta del router.

Podemos definir tantos router como queramos, para tener mejor ordenado el proyecto. Tan sólo tendremos que crear un archivo y llamarlo desde el js principal.

Y con esto concluimos la clase de hoy. En la próxima veremos los Middlewares.

Iniciar sesión/Registrarse

Buscar

Menú