Vue3与Flask后端Demo

准备工作

1. 安装开发环境

   • 安装 Python（推荐 Python 3.8 或更高版本）。
   • 安装 Node.js（推荐 LTS 版本）。
   • 安装 PyCharm（用于 Flask 开发）和 VSCode（用于 Vue3 开发）。
   • 使用 npm 安装 Vue CLI：npm install -g @vue/cli。

2. 创建项目

   • Flask 项目：在 PyCharm 中新建一个 Python 项目，并创建一个 app.py 文件。
   • Vue3 项目：在命令行中运行 vue create vue3-flask-project 创建一个新的 Vue 3 项目。

Flask 后端设置

1. 安装 Flask 和 Flask-CORS
   在 Flask 项目中，使用 pip 安装 Flask 和 Flask-CORS：

   pip install flask flask-cors
   

2. 编写 Flask 应用
   在 app.py 中，设置 Flask 应用并启用 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():# 假设接收 JSON 数据data = request.get_json()# 这里可以添加数据库验证等逻辑return jsonify({'status': 'success', 'user': data.get('username')})if __name__ == '__main__':app.run(debug=True)
   

Vue3 前端设置

1. 安装 Axios
   在 Vue3 项目中，使用 npm 安装 Axios：

   npm install axios
   

2. 配置 Axios
   在 Vue 组件中引入 Axios 并配置请求：

   <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' // 注意：实际应用中不应明文传输密码}).then(response => {message.value = `Login success: ${response.data.user}`;}).catch(error => {console.error('Error logging in:', error);});
   }
   </script>
   

3. 运行项目

   • 在 PyCharm 中运行 Flask 应用（通常会自动打开 http://localhost:5000/）。
   • 在 VSCode 的 Vue 项目中，运行 npm run serve，这将启动 Vue 开发服务器（通常位于 http://localhost:8080/）。

跨域问题

• 在 Flask 中，通过 Flask-CORS 插件已经处理了跨域请求。
• 如果在 Vue 项目中遇到跨域问题，可以在 vue.config.js 文件中配置代理（如果使用 Vue CLI 3+）：

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

  配置后，Vue 中的请求可以简化为 axios.get('/api/data') 而无需指定完整的 URL。

测试

• 点击 Vue 页面上的 “Fetch Data” 按钮，查看是否能从 Flask 后端获取数据并显示。
• 点击 “Login” 按钮，查看是否能成功发送 POST 请求并处理返回的数据。

这样，你就完成了 Vue3 与 Flask 后端的基本配合设置，并能够通过实例看到前后端数据交互的过程。