### Flask 接收 Vue3 GET 请求参数 示例代码 在 Flask 中接收来自 Vue3 的 GET 请求参数，通常需要通过 `request.args` 对象来获取查询字符串中的参数。以下是一个完整的示例代码，展示如何实现这一功能。 #### Flask 后端代码 ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/get_data', methods=['GET']) def get_data(): # 从请求中获取参数 param1 = request.args.get('param1', default=None, type=str) # 获取字符串类型参数 param2 = request.args.get('param2', default=0, type=int) # 获取整数类型参数 if param1 is None: return jsonify({"error": "param1 is required"}), 400 # 如果参数缺失，返回错误信息 # 构造响应数据 response_data = { "received_param1": param1, "received_param2": param2, "message": "Parameters received successfully!" } return jsonify(response_data) if __name__ == '__main__': app.run(debug=True) ``` #### Vue3 前端代码 以下是 Vue3 使用 Axios 发送 GET 请求的示例代码： ```javascript <template> <div> <button @click="fetchData">Fetch Data</button> <p>Response: {{ response }}</p> </div> </template> <script> import axios from 'axios'; export default { data() { return { response: null, }; }, methods: { async fetchData() { try { const params = { param1: 'example', param2: 123, }; const response = await axios.get('http://127.0.0.1:5000/get_data', { params }); this.response = response.data; } catch (error) { console.error('Error fetching data:', error); this.response = 'Error occurred'; } }, }, }; </script> ``` ### 说明 - 在 Flask 中，`request.args.get()` 方法用于从 URL 查询字符串中提取参数[^1]。 - Vue3 使用 Axios 库发送 GET 请求时，可以通过 `params` 配置项传递查询参数[^3]。 - 上述代码展示了如何从前端发送参数，并在后端正确接收和处理这些参数。 #### 注意事项 - 确保前端与后端之间的跨域问题已解决。可以使用 Flask-CORS 扩展来支持跨域请求[^4]。 - 如果参数为必填项，需在后端进行校验以避免逻辑错误。