### 实现 Python 后端接收 Vue3 前端 JSON 数据并保存为 TXT 文件 为了完成这一需求，可以通过 Django 或 Flask 构建一个简单的 RESTful API 来处理来自 Vue3 的 POST 请求。以下是具体实现方案： #### 1. 使用 Flask 创建后端接口 Flask 是一种轻量级的 Web 应用框架，适合快速开发小型项目。 ```python from flask import Flask, request, jsonify import os import json app = Flask(__name__) @app.route('/save_data', methods=['POST']) def save_data(): try: # 获取前端传递的 JSON 数据 data = request.json # 将接收到的数据写入当前项目的 TXT 文件 file_path = os.path.join(os.getcwd(), 'received_data.txt') with open(file_path, 'w') as f: f.write(json.dumps(data)) return jsonify({"status": "success", "message": "Data saved successfully"}), 200 except Exception as e: return jsonify({"status": "error", "message": str(e)}), 500 if __name__ == '__main__': app.run(debug=True) ``` 此代码创建了一个 `/save_data` 接口[^1]，该接口能够接收 Vue3 发送的 JSON 数据，并将其存储到名为 `received_data.txt` 的文件中。 --- #### 2. Vue3 前端发送 JSON 数据 在 Vue3 中，可以使用 Axios 库来发起 HTTP 请求并将数据发送给后端。 ```javascript <template> <button @click="sendData">Send Data</button> </template> <script> import axios from 'axios'; export default { methods: { async sendData() { const jsonData = { key: "value", anotherKey: "anotherValue" }; // 自定义 JSON 数据 try { await axios.post('http://localhost:5000/save_data', jsonData); console.log("Data sent and saved!"); } catch (error) { console.error("Error sending data:", error); } }, }, }; </script> ``` 在此示例中，当用户点击按钮时，会触发 `sendData` 方法，通过 Axios 将自定义的 JSON 数据发送至后端接口[^2]。 --- #### 3. 运行环境配置 - **后端运行**：启动 Flask 应用程序，在终端输入以下命令： ```bash python app.py ``` - **前端运行**：确保 Vue3 项目已正确设置，并安装了 Axios 插件。如果未安装 Axios，则需执行以下命令： ```bash npm install axios ``` --- #### 4. 测试流程 1. 启动 Flask 后端服务。 2. 打开 Vue3 项目页面，点击按钮以触发数据传输。 3. 查看当前项目目录下是否生成了 `received_data.txt` 文件，并确认其内容与发送的 JSON 数据一致。 --- ### 注意事项 - 如果需要支持跨域访问，请在 Flask 中启用 CORS 支持： ```python from flask_cors import CORS app = Flask(__name__) CORS(app) ``` - 确保前后端的服务地址匹配（如本地测试时均为 `localhost`），避免因网络问题导致通信失败。 ---