将Vue.js输入发送到烧瓶后端？

Question

在Vue.js站点上有一个有趣的示例，它使用在浏览器中运行的JS反转字符串。如何通过使用Flask将字符串传递给Python，反转Python中的字符串，然后将结果发送回Vue -而不是在浏览器中执行字符串反转-来重新创建这个示例？

<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://v2.vuejs.org/v2/guide/

Answer 1

您可以使用fetch api或vue使用的一些http，比如vue资源，但这并不重要。

代码可能如下所示

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)
    }
}

Answer 2

由于这两个端口都托管在不同的端口上，所以要与它们通信，您需要使用Axios或Flask跨源或处理HTTP请求。