Vue.js入门：单页应用中如何将Vue.js数据传递给Flask？

先修正当前代码的兼容问题 #

你当前用 Vue 2 的 CDN 却写了 Vue 3 的 <script setup> 语法，会导致语法不兼容。如果想用组合式 API，建议换用 Vue 3 的 CDN；或者改用 Vue 2 的选项式 API 写法。

完整实现步骤 #

1. Flask 后端编写数据接收接口 #

在 app.py 中添加一个 POST 接口，用于接收前端传来的 JSON 数据：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/receive-data', methods=['POST'])
def receive_data():
    # 获取前端发送的JSON数据
    request_data = request.get_json()
    # 处理数据（示例：打印到控制台）
    print("收到前端数据：", request_data)
    # 返回响应给前端
    return jsonify({"status": "success", "msg": "数据接收完成"})

if __name__ == '__main__':
    app.run(debug=True)

2. Vue 前端发送数据（Vue 2 写法） #

修改你的前端页面代码，通过原生 fetch 发送请求：

<!DOCTYPE html>
<html>
<head>
    <title>Vue + Flask 数据交互</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="sendToFlask">发送数据给Flask</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    message: 'Hello World!',
                    dataToSend: '这是Vue传给Flask的测试数据'
                }
            },
            methods: {
                sendToFlask() {
                    fetch('/api/receive-data', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ content: this.dataToSend })
                    })
                    .then(res => res.json())
                    .then(result => {
                        console.log(result.msg);
                        this.message = '数据已发送！';
                    })
                    .catch(err => console.error('请求失败：', err));
                }
            }
        })
    </script>
</body>
</html>

3. Vue 3 + <script setup> 写法（适配CDN） #

如果想继续用 <script setup>，需要改用 Vue 3 的 CDN：

<!DOCTYPE html>
<html>
<head>
    <title>Vue3 + Flask 数据交互</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="sendToFlask">发送数据给Flask</button>
    </div>

    <script setup>
        const { ref } = Vue
        const message = ref('Hello World!')
        const dataToSend = ref('Vue3 传给Flask的数据')

        const sendToFlask = () => {
            fetch('/api/receive-data', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ content: dataToSend.value })
            })
            .then(res => res.json())
            .then(result => {
                console.log(result.msg)
                message.value = '数据发送成功！'
            })
        }
    </script>
</body>
</html>

关键注意事项 #

• 如果前端和后端运行在不同端口，需要解决跨域问题：安装 flask-cors 库，在 app.py 中添加 from flask_cors import CORS; CORS(app) 即可。
• 发送请求时必须设置 Content-Type: application/json，否则 Flask 无法正确解析 JSON 数据。

内容的提问来源于stack exchange，提问作者zark