如何在不刷新vuejs页面的情况下向服务器发送数据？答案

【问题标题】：How to send data to the server without refreshing the page in vuejs?如何在不刷新vuejs页面的情况下向服务器发送数据？
【发布时间】：2020-08-20 20:08:41
【问题描述】：

我正在服务器端使用 vue-cli 和 nodejs 进行 CRUD。所以我有一个这样的表格

<template>
  <div id="formRoot">
    <div class="form" >
      <form @submit.prevent="sendToTable" action="/create" method="post">
      Name
      <input type="text" v-model="row.name" name="name" />
      Price
      <input type="number" name="price" v-model="row.price"  />
      Description
      <textarea v-model="row.description" rows="3" name="desc"/>
      <input type="submit" id="button" value="SAVE" />
    </form>
  </div>
  <form class="" action="create" method="post">
  <input type="text" name="input">
  <input type="submit" value="send">
 </form>
</div>
</template>

<script>

 export default{
   data(){
     return{
       row: {
         name: '',
         price: '',
         description: ''
       }
     }
   },
   methods: {
     sendToTable() {
       console.log(this.row);
       this.$parent.addToTable(this.row);
     }
   }
 }


 </script>

@submit.prevent 是为了避免页面刷新，当然我有一个名为 sendToTable 的方法。
在节点中我有这个：

  const path = require('path');
  const morgan = require('morgan');

  const app = express();

  //middlewares
  app.use(express.urlencoded({extended: false}));
  app.use(express.static(path.resolve(__dirname, '../dist')));
  app.use(morgan());

  app.post('/create', (req, res) => {
     console.log(req.body);

  });

  const port = 3000;
  app.listen(port, () => {
    console.log('server listening on port ' + port);
  });

问题是服务器无法获取发布请求，我认为是因为@prevent.default 属性。
我尝试使用邮递员发送帖子请求并且它有效，所以我确定问题出在前端。
我该怎么办？那些可以向服务器发送数据的单页 Web 应用程序实际上是如何编码的？

【问题讨论】：

sendToTable 是做什么的？
将表单数据添加到另一个vue组件中
不，我的意思是字面意思是什么？ Add it to your question。如果它是您的提交处理程序，它应该将数据发布到您的后端
您的服务器是否需要application/x-www-form-urlencoded 帖子正文或application/json？你在 Postman 中使用的是什么方法？
我使用这个中间件 app.use(express.urlencoded({extended: false}));在邮递员中，我当然使用了 post 方法

标签： html node.js forms vue.js post

【解决方案1】：

您需要通过 HTTP 请求实际发布表单数据。你可以使用Axios（非常受欢迎）或fetch（查看supported browsers list）之类的库。

您似乎正在做的另一件事是在该组件的父级上调用一个方法。这违背了 Vue 的 one-way data flow 并且不是最优的。更好的解决方案是让您的组件发出一个带有附加数据的事件。

例如（使用fetch）

<form @submit.prevent="sendToTable" method="post" action="/create">

methods: {
  async sendToTable ($event) {
    const form = $event.target
    // post form as a regular "submit" would
    let res = await fetch(form.action, {
      method: form.method,
      body: new URLSearchParams(new FormData(form))
    })
    if (res.ok) {
      // emit the "row-added" event to the parent
      this.$emit('row-added', { ...this.row }) // using spread syntax to break references
    } else {
      // you might want to do something else here in case of an error
      console.error(res)
    }
  }
}

在你的父组件中（假设子组件被命名为RowAdder）

<RowAdder @row-added="addToTable"/>

【讨论】：