时间戳

首页 > 解决方案 > 使用 Vue 前端和 Axios 将表单数据发布到 Express 后端

node.js - 使用 Vue 前端和 Axios 将表单数据发布到 Express 后端

问题描述

我有一个基本的 bootstrap-vue 表单，我正在尝试使用 Axios 将表单数据发布到 Express。

然而，目前我的 req.body 响应如下所示：body: { '{"name":"","country":"","message":""}': '' }

我真的很感激帮助我如何解决这个问题。我似乎无法弄清楚这一点。

形式：

<b-form @submit="onSubmit">
<b-form-input v-model="form.name" required></b-form-input>
<b-form-input v-model="form.country" required></b-form-input>
<b-form-input v-model="form.message" required></b-form-input>

方法：

  methods: {
    onSubmit (evt) {
      evt.preventDefault()
      axios.postForm(this.form)
    }
  }

爱讯：

const AXIOS = axios.create({
    baseURL: 'http://localhost:8081', // I'm running my node server here
    timeout: 5000,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

export default {
    postForm (form) {
        return AXIOS.post(`/newmessage/`, form)
    }
};

表达：

// ..require stuff here

app.use(bodyParser.urlencoded({ extended: true }));

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

标签： node.jsexpressvue.jsaxios

解决方案

这是修复：

方法：

  methods: {
    onSubmit (evt) {
      evt.preventDefault()
      axios.postForm(JSON.stringify(this.form))
    }
  }

爱讯：

const AXIOS = axios.create({
    baseURL: 'http://localhost:8081',
    timeout: 5000,
    headers: { 'Content-Type': 'application/json' }
});

表达：

app.use(bodyParser.json());

推荐阅读