Разбор данных формы в экспресс-приложении вручную без body-parser

Опубликовано: 31 Июля, 2021

Под синтаксическим анализом понимается доступ к данным, отправленным пользователем с помощью HTML-формы. Когда форма отправляется с помощью метода 'GET', данные добавляются в 'строку запроса', и к ним можно легко получить доступ, но когда форма отправляется с использованием метода 'POST', получить доступ к этим данным довольно сложно, поскольку они закодировано из соображений безопасности.
Существует NPM-метод парсера тела, который позволяет очень легко анализировать данные, но если мы попытаемся реализовать этот метод синтаксического анализа с нуля, потребуется несколько шагов.

Шаги:

Установить экспресс-пакет
```
 npm установить экспресс
```
Запуск экспресс-сервера (установить прослушиватель приложений)
```
 app.listen (ПОРТ, обратный вызов)
```
создать маршрут для отправки формы POST и настройки вызова функции промежуточного программного обеспечения
```
 app.post (путь, промежуточное ПО, обратный вызов)
```
создать функцию синтаксического анализа промежуточного программного обеспечения
- Превышение данных закодированной формы методом aap.on ().
- Преобразуйте закодированные данные в строку с помощью метода decodeURIComponent ().
- Создайте объект данных, отправленных пользователем, и назначьте его req.body объекта запроса.

Пример 1: Этот пример создания формы входа в систему.

Файл: loginForm.ejs

 <!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 > 

Файл: index.js

// 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) => {
  
    // Retrive 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}`)
})

Выход:

Форма входа:
Получены данные для входа:

Пример 2: Этот пример создания регистрационной формы.

Файл: registrationForm.ejs

 <!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 >
                < type input = 'password' for = 'password'
                    placeholder = 'Password'
                    name = 'password' >
            </ div >
        </ div >
 
        < div >
            < label id = 'confirmPassword' >
                Confirm Password
            </ label >
            < div >
                < type input = 'password'
                    for = 'confirmPassword'
                    placeholder = 'Confirm Password'
                    name = 'confirmPassword' >
            </ div >
        </ div >
 
        < div >
            < label >Sex:
                < label >
                    < type input = 'radio'
                        name = 'sex' value = 'Male' >
                    Male
                </ label >
 
                < label >
                    < type input = 'radio'
                        name = 'sex' value = 'Female' >
                    Female
                </ label >
            </ label >
        </ div >
 
        < div class = 'buttons' >
            < button >Register</ button >
        </ div >
    </ form >
 </ body >
 
</ html > 

Файл: index.js

 // 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) => {
 
    // Retrive 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}`)
 })

Выход:

Форма регистрации:
Получил регистрационные данные и распечатал их на консоли:

Node.js Вопросы о Web технологиях

Разбор данных формы в экспресс-приложении вручную без body-parser

РЕКОМЕНДУЕМЫЕ СТАТЬИ