Отправить вход Vue.js в бэкэнд Flask?

Question

На сайте Vue.js есть интересный пример, который переворачивает строку, используя JS, запущенный в браузере.Как я могу воссоздать этот пример, передав строку в Python с помощью Flask, перевернув строку в Python, а затем отправив результат обратно в Vue - вместо того, чтобы выполнить обращение строки в браузере?

HTML

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

JS

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Источник: https://vuejs.org/v2/guide/

Answer 1

Это не сработает, так как они оба размещены на разных портах, поэтому для связи с ними вам нужно использовать Axios или Flask с перекрестным источником или для обработки HTTP-запроса.

Answer 2

вы можете использовать fetch api или какой-нибудь http lib, который vue использует как vue-resource, но это не имеет значения.

код может выглядеть примерно так

methods: {
    reverseMessage: function() {    
        fetch('/route', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(this.message)
            })
            .then(response => response.json())
            .then(data => this.message = data)
    }
}