从 Vue.JS 发布到 Express 路由器答案

【问题标题】：Posting to Express router from Vue.JS从 Vue.JS 发布到 Express 路由器
【发布时间】：2017-09-12 12:02:57
【问题描述】：

我正在尝试将数据从 vue.js 前端发布到我的 express/node 后端。 POST 似乎通过了，但在后端我只是得到一个未定义的空数组。

前端：

main.js

var app = new Vue({
el: '#app',
data: {
    guests: [],
    code: '',
    showGuests: true
},
methods: {
    saveGuests: function() {
        $.ajax({
            type: "POST",
            url: '/api/rsvp/' + this.code,
            data: this.guests,
            success: function() {
                this.showGuests = false;
                // do more stuff to handle submission
            },
            dataType: 'json'
        });
    },
...

后端：

app.js

//body parser
var bodyParser = require('body-parser')

//express
var express = require('express');

// cfenv provides access to your Cloud Foundry environment
// for more info, see: https://www.npmjs.com/package/cfenv
var cfenv = require('cfenv');

// create a new express server
var app = express();

var rsvp = cloudant.db.use('rsvp');

// get the app environment from Cloud Foundry
var appEnv = cfenv.getAppEnv();

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
    extended: false
}))

// parse application/json
app.use(bodyParser.json())

// serve the files out of ./public as our main files
app.use(express.static(__dirname + '/public'));

//endpoint to post rsvp details
app.post('/api/rsvp/:code', function(req, res) {
    console.log(req.body);
    res.send('POST request received successfully')
});

// start server on the specified port and binding host
app.listen(appEnv.port, '0.0.0.0', function() {
    // print a message when the server starts listening
    console.log("server starting on " + appEnv.url);
});

guests 数组由我省略的另一个函数填充。它看起来像这样：

[{
   fullName: "john smith",
   rsvpStatus: "Not Responded"
},{
   fullName: "Mr Stack Overflow",
   rsvpStatus: "Yes"
}]

节点服务器上的console.log 只是在尝试 POST 后给我这个：

{ undefined: [ '', '' ] }

任何帮助都会很棒。也许在发布之前我需要对 Vue 数据绑定做些什么？我是 Vue 新手，所以几乎可以肯定做错了什么。

谢谢:D

【问题讨论】：

您的前端guests 数组在您的发布请求之前是否已填充数据？
是的，我在 POST 请求期间记录了这一点，它在前端显示数据#

标签： node.js http express vue.js

【解决方案1】：

设法自己回答了这个问题。基本上由于某种原因，在 Vue 中使用 jQuery POST 会搞砸事情。我为 vue 添加了"vue-resource" plugin，然后能够使用以下命令执行相同的 POST：

this.$http.post('url', data);

【讨论】：