Cómo pasar datos al back-end con Body parser y método post

En esta tercera sesión de la escuela desarrollo web con node js veremos uno de los puntos más importantes y es cómo pasar datos del front al back-end con body parser y el método post. Si bien ya hemos visto varios conceptos clave sobre los métodos, en esta nueva sesión veremos la comunicación directa con el método post para traer datos al back-end y poder procesarlos.

Ahora, para iniciar dejare primero los enlaces de los que hablo en el video para proceder al contenido.

Lo que vas a necesitar

• Escuela desarrollo web Node js: haz click aquí para ver el orden de todas las sesiones
• Body parser: haz click aquí para ver la documentación de body parser.
• Respositorio: haz click aquí para ver el repositorio de la escuela desarrollo web con node js.

Qué es Body parser y método Post

Por definición body parser es un es un middleware usado por Express encargado de poner en POST el contenido de body. Ahora, el método post como los anteriores métodos permiten controlar las solicitudes que se hacen al servidor y en este caso, POST permite enviar datos hacia el back-end, por ejemplo, desde un formulario.

Ambos, body parser y post trabajan en equipo para poder enviar y procesar los datos hacia el bac-end. Es importante decir que en esta sesión no aprenderemos a mostrar los datos nuevamente en el front-end, únicamente vamos a recibir los datos y procesarlos.

Instalar Body parser

Lo primero que debemos hacer es instalar body parser en nuestro programa y para esto, copia y pega este código en la terminal:

npm i body-parser

Una vez instalado lo que debes hacer es solicitarlo con las siguientes líneas de código:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({extended: true}));

en la sesión pasada vimos cómo instalar express y también cómo usarlo por medio de app. Ahora como lo mencioné anteriormente, body parser es usado por express, por ende primero lo solicitamos normalmente como otro paquete, pero adicional agregamos la línea que permite procesar los datos desde archivos html pero desde «app».

Crear formulario

Ahora, lo que debemos hacer es crear el formulario desde la página html que tengamos en front-end. Podemos usar el siguiente formulario:

<!-- formulario de calculadora -->
        <form action="/calculadora" method="post">
            <input type="number" name="numero1" placeholder="Primer número" >
            <input type="number" name="numero2" placeholder="Segundo número" >
            <button type="submit">CALCULAR</button>
        </form>

En el anterior formulario analizamos algunos puntos:

1. action contiene la ruta sobre la cual se va a llevar la solicitud.
2. method contiene el método que en este caso es post.
3. button submit permite reunir todo y finalizar la solicitud para su envío.

Ahora, input tiene 3 atributos importantes:

1. type contiene el tipo de dato que se va entregar.
2. name contiene el nombre o etiqueta sobre la cual se va a dar uso al dato enviado, en back-end.
3. placeholder permite mostrar un texto como ejemplo para que el usuario ingrese un valor con base en este.

Ahora, una vez creado el formulario ya podemos proceder a crear el método POST.

Crear método post

El método post es similar al método get, pero cambiamos ciertas cosas entonces, vamos a copiar y pegar el siguiente fragmento de código:

app.post("/calculadora", function(req, res){

    // asignar valores del formulario a variables
    var numeroUno = Number(req.body.numero1);
    var numeroDos = Number(req.body.numero2);
    var total     = numeroUno + numeroDos;

    console.log("Los números enviados en el método Post son: " + numeroUno + " y " + numeroDos);
    console.log("La sumatoria es: ", total);

    // redirección a página de gracias
    res.sendFile(__dirname + "/gracias.html");
});

en el anterior fragmento analizamos los siguientes puntos:

1. Lo primero es crear el método similar a get, con una ruta y una función con los argumentos req y res.
2. A continuación con req.body.nombredelinput creamos una nueva variable.
3. Agregamos Number de javascript para poder convertir el string a número y así poder realizar operaciones matemáticas. De esta manera aseguramos que el dato sea número y no string así se haya puesto tipo número en el input.
4. Creamos variable para sumar ambos datos creados.
5. Imprimimos los datos obtenidos y el resultado de la sumatoria.
6. Por último redireccionamos a la página de gracias.

Una vez ejecutado en la terminal el archivo server.js de las anteriores sesiones, veremos primero el formulario en la ruta «/calculadora», luego al ingresar los datos y enviar, veremos en la terminal los número enviados y su sumatoria.

También la redirección a la página «gracias» correctamente.

Video de ayuda

Producto sugerido

Si eres como yo que pasa bastatne tiempo frente al compu, puede que la barra de luz te sirva bastante para cuidar tu vista en esas largas jornadas. También te dejo aquí el post para que veas la reseña completa.

Conclusión

En esta tercera sesión, es clave conocer qué es body parser y cómo pasar los datos con el método post. Esto de aquí en adelante nos permitirá poder procesar los datos y a futuro usarlos en una base de datos, entre otros.