準(zhǔn)備工作

1. 安裝開發(fā)環(huán)境

   • 安裝 Python（推薦 Python 3.8 或更高版本）。
   • 安裝 Node.js（推薦 LTS 版本）。
   • 安裝 PyCharm（用于 Flask 開發(fā)）和 VSCode（用于 Vue3 開發(fā)）。
   • 使用 npm 安裝 Vue CLI：npm install -g @vue/cli。

2. 創(chuàng)建項(xiàng)目

   • Flask 項(xiàng)目：在 PyCharm 中新建一個(gè) Python 項(xiàng)目，并創(chuàng)建一個(gè) app.py 文件。
   • Vue3 項(xiàng)目：在命令行中運(yùn)行 vue create vue3-flask-project 創(chuàng)建一個(gè)新的 Vue 3 項(xiàng)目。

Flask 后端設(shè)置

1. 安裝 Flask 和 Flask-CORS
   在 Flask 項(xiàng)目中，使用 pip 安裝 Flask 和 Flask-CORS：

   pip install flask flask-cors
   

2. 編寫 Flask 應(yīng)用
   在 app.py 中，設(shè)置 Flask 應(yīng)用并啟用 CORS：

   from flask import Flask, jsonify
   from flask_cors import CORSapp = Flask(__name__)
   CORS(app, resources={r"/*": {"origins": "*"}}, supports_credentials=True)@app.route('/api/data', methods=['GET'])
   def get_data():return jsonify({'message': 'Hello from Flask!'})@app.route('/api/login', methods=['POST'])
   def login():# 假設(shè)接收 JSON 數(shù)據(jù)data = request.get_json()# 這里可以添加數(shù)據(jù)庫(kù)驗(yàn)證等邏輯return jsonify({'status': 'success', 'user': data.get('username')})if __name__ == '__main__':app.run(debug=True)
   

Vue3 前端設(shè)置

1. 安裝 Axios
   在 Vue3 項(xiàng)目中，使用 npm 安裝 Axios：

   npm install axios
   

2. 配置 Axios
   在 Vue 組件中引入 Axios 并配置請(qǐng)求：

   <template><div><h1>Vue3 with Flask Demo</h1><button @click="fetchData">Fetch Data</button><button @click="login">Login</button><p v-if="message">{{ message }}</p></div>
   </template><script setup>
   import { ref } from 'vue';
   import axios from 'axios';const message = ref('');function fetchData() {axios.get('http://localhost:5000/api/data').then(response => {message.value = response.data.message;}).catch(error => {console.error('Error fetching data:', error);});
   }function login() {axios.post('http://localhost:5000/api/login', {username: 'testuser',password: 'testpass' // 注意：實(shí)際應(yīng)用中不應(yīng)明文傳輸密碼}).then(response => {message.value = `Login success: ${response.data.user}`;}).catch(error => {console.error('Error logging in:', error);});
   }
   </script>
   

3. 運(yùn)行項(xiàng)目

   • 在 PyCharm 中運(yùn)行 Flask 應(yīng)用（通常會(huì)自動(dòng)打開 http://localhost:5000/）。
   • 在 VSCode 的 Vue 項(xiàng)目中，運(yùn)行 npm run serve，這將啟動(dòng) Vue 開發(fā)服務(wù)器（通常位于 http://localhost:8080/）。

跨域問(wèn)題

• 在 Flask 中，通過(guò) Flask-CORS 插件已經(jīng)處理了跨域請(qǐng)求。
• 如果在 Vue 項(xiàng)目中遇到跨域問(wèn)題，可以在 vue.config.js 文件中配置代理（如果使用 Vue CLI 3+）：

  module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:5000',changeOrigin: true,pathRewrite: { '^/api': '' }}}}
  };
  

  配置后，Vue 中的請(qǐng)求可以簡(jiǎn)化為 axios.get('/api/data') 而無(wú)需指定完整的 URL。

測(cè)試

• 點(diǎn)擊 Vue 頁(yè)面上的 “Fetch Data” 按鈕，查看是否能從 Flask 后端獲取數(shù)據(jù)并顯示。
• 點(diǎn)擊 “Login” 按鈕，查看是否能成功發(fā)送 POST 請(qǐng)求并處理返回的數(shù)據(jù)。

這樣，你就完成了 Vue3 與 Flask 后端的基本配合設(shè)置，并能夠通過(guò)實(shí)例看到前后端數(shù)據(jù)交互的過(guò)程。