打通Vue3+Flask（python3）+Mysql-实现简单数据交互

以下是一个简化的例子，展示如何在Vue 3、Flask和MySQL之间实现简单的数据交互。

前端（Vue 3）:

// Vue 3组件中的方法，用于获取数据
import { ref } from 'vue';
import axios from 'axios';
 
export default {
  setup() {
    const users = ref([]);
 
    const fetchUsers = async () => {
      try {
        const response = await axios.get('/api/users');
        users.value = response.data;
      } catch (error) {
        console.error('An error occurred while fetching users:', error);
      }
    };
 
    // 在setup函数中调用
    fetchUsers();
 
    return { users };
  }
};

后端（Flask）:

from flask import Flask, jsonify
from flask_sqlalchemy import SQLAlchemy
 
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://user:password@localhost/database'
db = SQLAlchemy(app)
 
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(80))
 
    def to_dict(self):
        return {
            'id': self.id,
            'name': self.name
        }
 
@app.route('/api/users')
def get_users():
    users = User.query.all()
    return jsonify([user.to_dict() for user in users])
 
if __name__ == '__main__':
    app.run(debug=True)

数据库（MySQL）:

确保你的MySQL数据库中有一个名为database的数据库，并且有一个名为users的表，表中有id和name字段。

这个例子展示了如何在Vue 3前端通过axios发送HTTP GET请求获取用户数据，并在Flask后端使用SQLAlchemy从MySQL数据库中查询这些数据，然后以JSON格式返回给前端。这只是一个简单的交互示例，实际应用中可能需要更复杂的逻辑和安全措施。