如何在Vue中成功发出HTTP PUT请求？

Question

我已经习惯了Vue CLI的第四天，正在尝试发出HTTP放置请求，但真的不知道从哪里开始。 我将其设置为当用户单击特定产品上的“赞”按钮时，它将在实际产品中添加“赞”，但是我希望将其保存到我的数据库中。 任何帮助将不胜感激，但也知道我仍在学习并且对该JavaScript库非常陌生。 我也在使用Vue Resource发出此PUT请求。

当我单击“赞”按钮时，我可以确认它为该特定产品添加了“赞”，并在该特定产品上显示了“赞”数量。 只是不知道如何正确地将其发送到数据库。

这是我的PUT请求代码。 我是否需要标题和

    methods: {
      updateLikes(product){
        //make a put request to the backend to update the amount of likes on
        //the specific product when the user click like button
        product.likes = product.likes + 1
        this.$http.put(`https://tap-on-it-exercise-backend.herokuapp.com/products/${product.likes}`, {
          //send updated likes for the product to the backend

        })
        //close the modal after user like
        this.modalShow = false
      console.log(product.likes);
    }
  }

更新代码：

methods: {
  updateLikes(product){

    let newProductLikes = product.likes + 1

    //make a put request to the backend to update the amount of likes on
    //the specific product when the user click like button

    console.log('new', newProductLikes);

    fetch(`https://tap-on-it-exercise-backend.herokuapp.com/products/${product.likes}`, {
      method: 'PUT',
      mode: "cors",
      cache: "no-cache",
      credentials: "same-origin",
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        // send updated like to the server
        likes: newProductLikes
      })
    })
  }
}

Answer 1

您可以使用浏览器的本机fetch() API。

fetch(`https://tap-on-it-exercise-backend.herokuapp.com/products/${product.likes}`, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    // data you intend to send as JSON to the server
    whatever: 'ding!'
  })
})

Answer 2

在Vue资源中，您可以发出HTTP PUT请求，如下所示

this.$http.put('/someUrl', {your request body}).then(response => {
  this.product.likes = response.body.likes; // update your data from the response
}, error => {
   // error callback
});

您可以查看Vue资源文档以获取更多详细信息。

另外，我认为您不应该手动增加产品的赞数，如果响应中包含更新的产品的赞数，则可以从请求响应中进行设置，因为也许产品的赞数没有在服务器上更新。

Answer 3

首先，您需要确保可以直接发送PUT请求，而无需使用Vue。 您可以使用Curl或Postman进行此操作。

其次，当您从Vue发送请求时，请在浏览器的开发人员工具（ F12 ）中检查“网络”选项卡。 请求是否正确发送？ 服务器是否返回错误？

接下来，检查CORS问题。 您的请求很有可能被拒绝，因为它是从localhost发送到您的服务器的，并且您没有允许正确的CORS访问。