Как мне успешно сделать HTTP-запрос PUT в Vue? - PullRequest
Новая
       21

Как мне успешно сделать HTTP-запрос PUT в Vue?

1 голос
/ 31 марта 2019

Я уже четвертый день привыкаю к ​​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
      })
    })
  }
}

Ответы [ 3 ]

1 голос
/ 31 марта 2019

В 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 .

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

1 голос
/ 31 марта 2019

Вы можете использовать собственный браузер 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!'
  })
})
0 голосов
/ 31 марта 2019

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

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

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

...