Analizar significa acceder a los datos enviados por el usuario con un formulario HTML. Cuando el formulario se envía con el método ‘GET’, los datos se agregan en la ‘string de consulta’ y se puede acceder fácilmente, pero cuando se envía un formulario con el método ‘POST’, es un poco difícil obtener acceso a esos datos ya que son codificado por motivos de seguridad.
Existe un método NPM de analizador corporal que hace que sea muy fácil analizar los datos, pero si tratamos de implementar este método de análisis desde cero, hay que seguir algunos pasos.
Pasos:
- Instalar paquete Express
npm install express
- Iniciando el servidor express (establecer el oyente de la aplicación)
app.listen(PORT, callback)
- crear la ruta para el envío del formulario ‘POST’ y configurar la llamada a la función de middleware
app.post(path, middleware, callback)
- crear función de análisis de middleware
- Exceda el método aap.on() de datos de formulario codificado.
- Convierta los datos codificados en una string usando el método decodeURIComponent().
- Cree un objeto de datos enviados por el usuario y asígnelo a req.body del objeto de solicitud.
Ejemplo 1: este ejemplo crea un formulario de inicio de sesión.
Archivo: loginForm.ejs
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Form data parsing</title> </head> <body> <form action='information' method='POST'> <div> <label id='username'>Username</label> <div> <input type='text' for='username' placeholder='Username' name='username'> </div> </div> <div> <label class='label' id='password'> Password </label> <div> <input class='input' type='password' for='password' placeholder='Password' name='password'> </div> </div> <div class='buttons'> <button>Login</button> </div> </form> </body> </html>
Archivo: index.js
Javascript
// Installing package
const express = require('express')
const path = require('path')
const app = express()
const PORT = process.env.PORT || 3000
// Middleware function
const parseData = (req, res, next) => {
if (req.method === 'POST') {
const formData = {}
req.on('data', data => {
// Decode and parse data
const parsedData =
decodeURIComponent(data).split('&')
for (let data of parsedData) {
decodedData = decodeURIComponent(
data.replace(/\+/g, '%20'))
const [key, value] =
decodedData.split('=')
// Accumulate submitted
// data in an object
formData[key] = value
}
// Attach form data in request object
req.body = formData
next()
})
} else {
next()
}
}
// View engine setup
app.set("views", path.join(__dirname))
app.set("view engine", "ejs")
// Render Login form page
app.get('/', (req, res) => {
res.render('loginForm')
})
// Creating Post Route for login
app.post('/information', parseData, (req, res) => {
// Retrieve form data from request object
const data = req.body
const { username, password } = data
//Render information in the page
res.send(`
<p><strong>Login Information collected!</strong></p>
<div>
<strong>Username</strong> : ${username}
</div>
<div>
<strong>Password</strong> : ${password}
</div>
`)
})
// Setting up listener
app.listen(PORT, () => {
console.log(`Server start on port ${PORT}`)
})
Producción:
- Formulario de inicio de sesión:
- Información de inicio de sesión obtenida:
Ejemplo 2: Este ejemplo crea un formulario de registro.
Archivo: formulario de registro.ejs
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Form data parsing</title> </head> <body> <form action='information' method='POST'> <div> <label id='username'>Username</label> <div> <input type='text' for='username' placeholder='Username' name='username'> </div> </div> <div> <label id='email'>Email</label> <div> <input type='text' for='email' placeholder='Email' name='email'> </div> </div> <div> <label id='password'>Password</label> <div> <input type='password' for='password' placeholder='Password' name='password'> </div> </div> <div> <label id='confirmPassword'> Confirm Password </label> <div> <input type='password' for='confirmPassword' placeholder='Confirm Password' name='confirmPassword'> </div> </div> <div> <label>Sex: <label> <input type='radio' name='sex' value='Male'> Male </label> <label> <input type='radio' name='sex' value='Female'> Female </label> </label> </div> <div class='buttons'> <button>Register</button> </div> </form> </body> </html>
Archivo: index.js
Javascript
// Installing package
const express = require('express')
const path = require('path')
const app = express()
const PORT = process.env.PORT || 3000
// Middleware function
const parseData = (req, res, next) => {
if (req.method === 'POST') {
const formData = {}
req.on('data', data => {
// Decode and parse data
const parsedData =
decodeURIComponent(data).split('&')
for (let data of parsedData) {
decodedData = decodeURIComponent(
data.replace(/\+/g, '%20'))
const [key, value]
= decodedData.split('=')
// Accumulate submitted data
// in an object
formData[key] = value
}
// Attach form data in request object
req.body = formData
next()
})
} else {
next()
}
}
// View engine setup
app.set("views", path.join(__dirname))
app.set("view engine", "ejs")
// Render Login form page
app.get('/', (req, res) => {
res.render('registrationForm')
})
// Creating Post Route for login
app.post('/information', parseData, (req, res) => {
// Retrieve form data from request object
const data = req.body
const { username,
email,
password,
confirmPassword,
sex,
} = data
// Printing fetched data in
// developer's console
console.log(data)
})
// Setting up listener
app.listen(PORT, () => {
console.log(`Server start on port ${PORT}`)
})
Producción:
- Formulario de inscripción:
- Datos de registro obtenidos e imprimiéndolos en la consola:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA