在 node.js 中使用 pug 在表单“post”之后发送空

Posted 2023-02-22

【中文标题】在 node.js 中使用 pug 在表单“post”之后发送空

【英文标题】：Sending empty after form "post" with pug in node.js

【发布时间】：2017-10-20 04:33:39

【问题描述】：

我正在尝试使用带有此哈巴狗代码的 fetch 将表单数据从登录页面传递到登录页面：

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');
    const formData = new FormData(formLogin);

    formLogin.addEventListener('submit', function(event) 
        console.log('Form Data: ', 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 到达登录。跟踪后它给出了这个 console.log

Form Data:  FormData 

还有一个未定义的 req.body。 如果我评论此脚本并通过添加action="/signin" and method="post" 的表单发送它，它会起作用并打印答案，但调用storage.setItem( token: <token> ) 会返回Uncaught (in promise) TypeError: Cannot read property 'token' of undefined 我想知道为什么这个脚本没有发送数据......无法弄清楚......所以任何帮助都会非常感激。

登录功能：

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

    User.findOne( email: req.body.email , (err, user) => 

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

        user.comparePassword(req.body.password, (error, isMatch) => 
            if (error) return res.status(500).send( message: error )
            if (!isMatch) 
                return res.redirect('login')
             else 
                req.user = user
                res.status(200).send(
                    message: 'Te has logueado correctamente',
                    token: service.createToken(user)
                )
                //$window.localStorage.setItem(token: service.createToken(user)); // NO WORKS
                return res.body = service.createToken(user) // TRYING THIS WITHOUT KNOWLEDGE ABOUT WHAT AM I DOING :O
            
        )                 
    )

提前致谢。

****编辑**** 正如@MichałSałaciński 建议的那样，首先评论.then res.json().... 至少会给出回应，但仍然不要理解这里发生了什么，为了正确学习并让事情变得更好，也希望有人能解释如何正确地做这样的事情。

  Response: body : ReadableStream
locked : false
__proto__ : Object
bodyUsed :   false
headers :  Headers
__proto__  :  Headers
ok :  true
redirected :  false
status : 200
statusText: "OK"
type  :   "basic"

【问题讨论】：

我对哈巴狗的经验为零。像这样将两个then 调用链接在一起是否正常？

是的，据我所知，promise 在脚本标签内，所以此时不​​应与 pug 冲突。是的，你可以链接 .then.Check docs here -> link

终于找到解决办法了吗？？我也有同样的问题！

【参考方案1】：

所以我遇到了同样的问题，我的哈巴狗表单的 POST 请求将空的 作为 req.body 对象发回。代码是一个简单的创建操作，使用这些：

bookController.js

exports.createBookForm = (req,res) => 
  res.render("create_book_form",  title: "Add A New Book")


exports.createBook = (req,res) => 
  const reqFields = ["title", "author"];

  for (let i = 0; i < reqFields.length; i++) 
    const field = reqFields[i];

    if (!field in req.body) 
      const message = `Missing $field in the request body`;
      console.log(message)
      return res.status(400).send(message)
    
  

  Book
    .create(
      title: req.body.title,
      author: req.body.author,
      summary: req.body.summary
    )
    .then((book) => 
      res.status(201).json(book.serialize())
    )
    .catch(err => 
      console.log(err);
    )

以及创建书的形式：

block content
  h1 Add a Book
  h3 Do use real details. Otherwise, what's the point?

  form(method="POST" action="/books")
    div.form-group
      label(for="title") Title:
      input#title.form-control(type="text", placeholder="Small Gods" name="title")
      label(for="author") Author:
      input#author.form-control(type="text", placeholder="Terry Pratchett" name="author")
      label(for="summary") Summary:
      textarea#summary.form-control(type="text", placeholder="God is turtle, world is flat" name="summary")
      div.form-group
        button.btn.btn-primary(type="submit" role="submit") Add Book

最终解决的问题是添加（在 server.js 中）

app.use(bodyParser.urlencoded( extended: false ))
app.use(bodyParser.json())

让我知道这是否适合您。我花了几个小时才得出这个结论，我讨厌看到没有答案的问题。

【参考方案2】：

您应该在“发送”事件侦听器中移动“新 FormData”。此外，在 type="submit" 之后缺少逗号，但总的来说，问题与 pug 无关：)

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('Form Data: ', 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)
        )
    );

【讨论】：

对我没有用，修复了缺少的逗号并在函数内部移动 const formData 没有任何变化，仍然卡住......有人赠送 -1......祝你度过最美好的一天！跨度>

是的，在这里投反对票很奇怪，因为这个问题似乎完全有效。如果还是不行，尝试返回“return res.json();”，也可以尝试带&不带“body:formData”

好的，试了一下，得到这个回复：Response type: "basic", url: "http://192.168.1.104:3000/signin", redirected: false, status: 200, ok: true… body : (...) bodyUsed : false headers : Headers __proto__ : Headers ok : true redirected : false status : 200 statusText : "OK" type : "basic" url : "http://192.168.1.104:3000/signin" 看起来response.body里面也没什么：body : ReadableStream locked : (...) __proto__ : Object bodyUsed : false