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.
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
API Mailchimp NodeJS: cómo conectar y crear miembros en lista
Como sabemos uno de los mejores métodos para promover nuestro negocio es email marketing y si usamos…
Google Auth2.0 NodeJS: inicio de sesión con google
Una de las herramientas más importantes para nuestro sitio o desarrollo web es el inicio de sesión, …
CRUD Mongodb Atlas
En esta sexta sesión de la escuela desarrollo web con Node Js veremos cómo implementar CRUD Mongodb …
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-parserUna 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:
- action contiene la ruta sobre la cual se va a llevar la solicitud.
- method contiene el método que en este caso es post.
- button submit permite reunir todo y finalizar la solicitud para su envío.
Ahora, input tiene 3 atributos importantes:
- type contiene el tipo de dato que se va entregar.
- name contiene el nombre o etiqueta sobre la cual se va a dar uso al dato enviado, en back-end.
- 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:
- Lo primero es crear el método similar a get, con una ruta y una función con los argumentos req y res.
- A continuación con req.body.nombredelinput creamos una nueva variable.
- 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.
- Creamos variable para sumar ambos datos creados.
- Imprimimos los datos obtenidos y el resultado de la sumatoria.
- 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.
Quntis Lámpara para monitor de computadora, barra de luz para monitor de pantalla para el cuidado de los ojos, lámpara de tareas LED de lectura electrónica con atenuación automática, barra de lámpara regulable, control táctil, sin deslumbramiento de pantalla, ahorro de espacio, lámparas de escritorio para oficina en casa
- Sin reflejos de pantalla y sin parpadeo, antiluz azul: la barra de luz para monitor de computadora Quntis tiene un diseño óptico asimétrico único que ilumina solo tu escritorio y teclado mientras garantiza que no se reflejen en la pantalla. Gracias a su avanzado sistema de protección ocular, nuestras lámparas de escritorio para oficina en casa bloquean la luz azul y la radiación óptica, aliviando eficazmente la fatiga ocular para proteger tus ojos. Es la opción ideal para estudiantes, diseñadores de pintura y trabajadores de oficina de negocios.
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.
