如何：使用 pug 和 javascript 发送和获取“formdata”答案

【问题标题】：HOW TO: send and get "formdata" with pug and javascript如何：使用 pug 和 javascript 发送和获取“formdata”
【发布时间】：2017-10-20 16:52:24
【问题描述】：

在哈巴狗中得到这个表格：

extends layout

block login
    form(id="form-login")
        input(type="text", name="email", value="", placeholder="Tu email")
        br
        input(type="password", name="password", value="", placeholder="Tu contraseña")
        br
        input(type="submit" value="Conectar")

我正在尝试在上述代码之后使用此脚本处理它（正确识别）：

script.
    const formLogin = document.querySelector('#form-login');

formLogin.addEventListener('submit', function(event) {
    const formData = new FormData(formLogin);
    console.log('Contenido de Formulario: ', formData);
    event.preventDefault();
    fetch('/signin', {
        method: 'POST',
        //body: formData
    })
    //- .then(function(res) {
    //-     res.json();
    //- })
    .then(function(data) {
        //console.log(data)
        localStorage.setItem('token', data.token)
    })
});

处理函数正在接收一个空的req.body。

这个问题扩展了my last question 我希望有人知道这里发生了什么，提前谢谢。

【问题讨论】：

formData的控制台输出是什么？
一个空对象{}
好的，这是你的问题。你能移动 const formLogin = document.querySelector('#form-login');提交回调中的行。并尝试控制台 formLogin。检查你是否能找到表格？
如果我这样做。 formLogin 将不再存在，您的意思是先声明它，然后在函数内为其赋值？
PUG 代码：body h1 Crear Post form(action="/api/post" method="post") input(type="text" name="title" placeholder="Titulo") br input(type="textarea" name="name" placeholder="Nombre del autor") br input(type="submit" value="Crear Post")

标签： javascript node.js forms express pug

【解决方案1】：

我认为这可能是答案，因为我从这里修复了它。

block login
    form(id="login" action="/signin" method="post")
        input(type="text", name="email", value="", placeholder="Tu email")
        br
        input(type="password", name="password", value="", placeholder="Tu contraseña")
        br
        input(type="submit" value="Conectar")

路线代码：

router.post('/signin', usercontrol.signIn)

控制器代码：

const User = require('../models/User')
const service = require('../services')
const bcrypt = require('bcrypt-nodejs')


function signUp (req, res) {
    console.log('Registrando usuario: ', req.body)
    const user = new User({
        email: req.body.email,
        displayName: req.body.displayName,
        password: req.body.password
    })

    user.save((err) => {
        if (err) res.status(500).send({ message: `Error al crear el usuario: ${err}`})

        return res.status(200).send({ token: service.createToken(user) })
    })
}

function signIn (req, res) {    
    console.log('Tratando de loguear con req: ', req.body.email)

    if (!req.body.email) return res.status(200).send({message: 'No recibo el usuario'})

    User.findOne({ email: req.body.email }, (err, user) => {
        console.log('Respuesta de búsqueda', user)

        if(err) return res.status(500).send({ message: err })
        if(!user) return res.status(404).render('login', { title: 'Intenta loguearte de nuevo' })
        console.log('Respuesta de user: ', user.email)

        let userPwd = req.body.password
        let dbPwd = user.password
        console.log('Pwd Usuario: ', req.body.password, 'Pwd Base de Datos: ', user.password)

        bcrypt.compare(userPwd, dbPwd, (error, isMatch) => {
            if (error) return res.status(500).send({ message: error })
            if (!isMatch) {
                console.log('La contraseña No es correcta !isMatch: ', !isMatch)
                return
            } else {
                req.user = user
                res.status(200).send({
                    message: 'Te has logueado correctamente',
                    token: service.createToken(user)
                })
            }
        })        
    })
}

module.exports = {
    signIn,
    signUp
}

【讨论】：