Блог

Я уже 4-й день привыкаю к Vue CLI и пытаюсь выполнить HTTP-запрос put, но на самом деле не знаю, с чего начать. Я настроил его таким образом, что когда пользователь нажимает кнопку «Мне нравится» на определенном продукте, он добавляет «Нравится» к реальному продукту, но я хочу, чтобы он сохранялся в моей базе данных. Я был бы очень признателен за любую помощь, но также знайте, что я все еще учусь и совершенно новичок в этой библиотеке JavaScript. Я также использую ресурс Vue для выполнения этого запроса 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 вы можете выполнить 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 для получения более подробной информации.

Также я думаю, что вам не следует вручную увеличивать количество лайков к продукту, вы можете установить это из ответа на ваши запросы, если ответ включает обновленное количество лайков к продукту, потому что, возможно, лайки к продукту не обновлялись на сервере.

Во-первых, вам нужно убедиться, что вы можете отправить запрос PUT напрямую, без использования Vue. Вы можете сделать это с помощью Curl или Postman.

Во-вторых, проверьте вкладку Сеть в инструментах разработчика вашего браузера (F12) при отправке запроса из Vue. Правильно ли отправлен запрос? Сервер возвращает ошибку?

Затем проверьте, нет ли проблем с CORS. Есть большая вероятность, что ваш запрос отклонен, потому что он отправляется с localhost на ваш сервер, и вы не разрешили правильный доступ CORS.