Question

Vue.js网站上有一个有趣的示例，该示例使用浏览器中运行的JS反转字符串。如何通过使用Flask将字符串传递给Python，在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

您可以使用fetch api或vue使用的某些http库，例如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)
    }
}

Answer 2

由于它们都托管在不同的端口上，因此无法使用，因此要与它们通信，您需要使用Axios或Flask跨源或处理HTTP请求。

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

2 个答案: