vuejs 2 axios 放置，删除答案

【问题标题】：vuejs 2 axios put, deletevuejs 2 axios 放置，删除
【发布时间】：2017-10-01 11:09:08
【问题描述】：

我有一些未答复的问题，我有一个带有 Axios 的示例 crud Vuejs，如下所示：

updateItem: function () {
  var obj = {'name': this.name, 'dob': this.dob, 'gender': this.gender}
  // console.log(obj)
  var strngObj = qs.stringify(obj)
  this.axios.put('http://localhost:3000/crud/update/', this.update_id,
  strngObj, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }
  // emulateJSON: true // fix cannot post as form data and urlencoded
  ).then((resp) => {
    if (resp.data.log === 'update success !') {
      this.items.push(resp.data.data)
      alert(resp.data.log)
    }
    console.log(resp.data) // check full object in browser console log
  })
},

下面这段代码是服务器端的

app.put('/crud/update/:UPid', (rqs, rsp, next) => {
   rqs.header("Access-Control-Allow-Origin", "*");
   rqs.header("Access-Control-Allow-Methods", "POST,PUT");

   var obj = { "_id" : mongodb.ObjectID(rqs.params.UPid) };
   var update = { $set : { name: rqs.body.name, dob: rqs.body.dob, gender: 
   rqs.body.gender} };  // $set is object 

   var cursor = db.collection('info').updateMany(obj,update, function(err, res)
   {
     if (err) throw err;
     rsp.send({log: "update success !",data: obj});
     console.log(rqs.body);
     // console.log(update);
     //db.close();
 });
})

我在 chrome 上进行了测试和调试。用于创建和读取工作正常，但更新（PUT 方法），删除（删除）根本不起作用，它总是显示错误：

204 无内容

感谢您的想法！

【问题讨论】：

我认为您的数据库有问题。你能在你的数据库中添加更多代码吗

标签： node.js vue.js vuejs2 axios

【解决方案1】：

您的更新代码正常工作，204 状态意味着您需要从后端（nodejs 代码）返回响应到您的前端（vuejs）

您需要将 json 对象从 nodejs api 返回到 vuejs，这意味着

nodejs 代码如下：

    app.put('/crud/update/:UPid', (rqs, rsp, next) => { 
`rqs.header("Access-Control-Allow-Origin", "*");
rqs.header("Access-Control-Allow-Methods", "POST,PUT");`

   `var obj = { "_id" : mongodb.ObjectID(rqs.params.UPid) };
   var update = { $set : { name: rqs.body.name, dob: rqs.body.dob, gender: `
  ` rqs.body.gender} };  // $set is object 
   var cursor = db.collection('info').updateMany(obj,update, function(err, res)
   {
     if (err) throw err;
     //delete this line
    // rsp.send({log: "update success !",data: obj});
     console.log(rqs.body);
     //add this line to return json object
rsp.json({ status: "success"});
 });
})`

你的 vuejs 更新方法将是：

` updateItem: function () {
  var obj = {'name': this.name, 'dob': this.dob, 'gender': this.gender}
  // console.log(obj)
  var strngObj = qs.stringify(obj)
  this.axios.put('http://localhost:3000/crud/update/', this.update_id,
  strngObj, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }
  // emulateJSON: true // fix cannot post as form data and urlencoded
  ).then((resp) => {
        // parse json object response 
    var status = JSON.parse( resp.data.status);
  }).catch(e => {
                this.errors.push(e);
   })
},`

【讨论】：