Javascript 如何使用POST方法感知和访问参数_Javascript_Node.js_Express_Vue.js

Javascript 如何使用POST方法感知和访问参数

javascript node.js express vue.js

Javascript 如何使用POST方法感知和访问参数,javascript,node.js,express,vue.js,Javascript,Node.js,Express,Vue.js,我正在使用Javascript为我的网页创建一个authent表单，在客户端使用Vue JS，在服务器端使用带有ExpressJS的NodeJS 在服务器端，我编写了我的post方法： server.app.post("/login", function(req, res) { console.log(req.body.username); }) 在客户端，我的表单位于指向Vue实例的html链接上： <!DOCTYPE html> <html lang="fr"&g

我正在使用Javascript为我的网页创建一个authent表单，在客户端使用Vue JS，在服务器端使用带有ExpressJS的NodeJS

在服务器端，我编写了我的post方法：

server.app.post("/login", function(req, res) {
    console.log(req.body.username);
})

在客户端，我的表单位于指向Vue实例的html链接上：

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
  <div id="authent">
      <p>Username :</p>
      <input type="text" name="username" v-model="username" required>
      <p>Pwd :</p>
      <input type="password" name="password" v-model="password" required>
      <button v-on:click="authent">Login</button>
    </div>
    <script src='/authent/vue.js'></script>
    <script src='/authent/vue-resource.min.js'></script>
    <script src="authent.js"></script>
  </body>
</html>

显然，我在vue实例中错误地发送了参数，因为在服务器端，

req.body

未定义

编辑

参数已发送，但我不知道如何在服务器端的post方法中访问它们。

我不熟悉Vue，但您能否尝试使用

this.username

而不是

authent.username

在你的开发工具中，你能看到params已经被发现吗？当然，这是一个前端问题。

我不熟悉Vue，但您能否尝试使用

this.username

而不是

authent.username

在你的开发工具中，你能看到params已经被发现吗？当然这是一个前端问题。

您可以通过ajax方式发送它。您可能还将其作为json对象发送，而不是真正的post数据。在express中，您应该编写（使用json解析器）

app.use（express.json（））
为了安全起见。也添加主体解析器：-）
app.use（express.urlencoded（{extended:true}））

你迟早会需要它的
只需添加上面的中间件
即可通过ajax方式发送。您可能还将其作为json对象发送，而不是真正的post数据。在express中，您应该编写（使用json解析器）
app.use（express.json（））
为了安全起见。也添加主体解析器：-）
app.use（express.urlencoded（{extended:true}））

你迟早会需要它的
只需添加上述中间件这确实不是前端问题，参数已发送这确实不是前端问题，参数已发送
window.onload = function () {
  var authent = new Vue({
    el: '#authent',
    data: {
      username: null,
      password: null
    },
    methods: {
      authent: function() {
        try {
          this.$http.post('/login', {"username": authent.username, "password": authent.password})
            .then(function(response) {
                console.log(response.body);
          })
        } catch (e) {
          console.log(e);
        }
      }
    }
  })
}