如何在不刷新vuejs中的页面的情况下将数据发送到服务器？

Question

我正在服务器端使用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应用程序的实际编码方式是什么？

Answer 1

您实际上需要通过HTTP请求发布表单数据。您可以使用Axios（非常受欢迎）或fetch（检查支持的浏览器列表）之类的库。