使用vite+vue+flask实现一个简单的前后端交互效果

以下是一个简单的例子，展示了如何使用Vite、Vue和Flask来创建一个前后端交互的应用。

后端 (Flask):

from flask import Flask, jsonify
 
app = Flask(__name__)
 
@app.route('/api/data', methods=['GET'])
def data():
    response_data = {'message': 'Hello from Flask!'}
    return jsonify(response_data)
 
if __name__ == '__main__':
    app.run(debug=True)

确保Flask应用运行在端口5000上。

前端 (Vue + Vite):

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">{{ data.message }}</div>
  </div>
</template>
 
<script>
import { ref } from 'vue'
import axios from 'axios'
 
export default {
  setup() {
    const data = ref(null)
 
    const fetchData = async () => {
      try {
        const response = await axios.get('http://localhost:5000/api/data')
        data.value = response.data
      } catch (error) {
        console.error(error)
      }
    }
 
    return {
      data,
      fetchData
    }
  }
}
</script>

确保Vite开发服务器运行在端口3000上。

在这个例子中，当用户点击按钮时，Vue组件会发送一个GET请求到Flask后端的/api/data路由，后端响应请求并返回一个JSON对象。Vue组件捕获这个响应并更新其本地状态，随后在模板中展示出来。

请确保先启动Flask服务器，再启动Vite开发服务器，并且在进行请求时确保两个服务器正常运行。