node.js - vuejs 2 axios 放置，删除

Question

我有一些未答复的问题，我有一个带有 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 方法)、删除(DELETE)根本不起作用，并且总是显示错误:

204 No Content

谢谢你的想法!

Answer 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);
   })
},`