我在第四天习惯了Vue CLI并尝试发出HTTP put请求,但实际上不知道从哪里开始。我已将其设置为当用户单击特定产品上的类似按钮时,它将添加类似于实际产品,但我希望它保存到我的数据库。任何帮助将不胜感激,但也知道我仍在学习这个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
})
})
}
}
您可以使用浏览器的原生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!'
})
})
在Vue Resource中,您可以发出如下所示的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 Resource docs以获取更多详细信息。
此外,我认为您不应该手动增加产品喜欢,如果响应包括更新的产品喜欢计数,您可以从请求响应中设置它,因为可能产品喜欢没有在服务器上更新。
首先,您需要确保可以直接发送PUT请求,而无需使用Vue。你可以使用Curl或Postman来做到这一点。
其次,当您从Vue发送请求时,请检查浏览器的开发人员工具(F12)中的“网络”选项卡。请求发送正确吗?服务器是否返回错误?
接下来,检查CORS问题。您的请求很可能被拒绝,因为它是从localhost发送到您的服务器,并且您没有允许正确的CORS访问。