flask传参给vue

### 如何在 Flask 后端向 Vue 前端传递参数 为了实现 Flask 向 Vue 传递参数的功能，可以通过 RESTful API 的方式完成数据交换。具体来说，Flask 可以提供一个接口返回 JSON 数据，Vue 则通过 HTTP 请求获取这些数据并渲染到页面上。 #### 实现方法 1. **创建 Flask 接口** 在 Flask 中定义一个路由来处理 GET 请求，并返回所需的参数作为 JSON 格式的响应。 ```python from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/data', methods=['GET']) def get_data(): data = { 'message': 'Hello from Flask!', 'value': 42 } return jsonify(data), 200 ``` 上述代码展示了如何设置一个 `/api/data` 路由[^1]，当客户端访问该 URL 时，它会返回包含 `message` 和 `value` 键值对的 JSON 对象。 2. **前端调用 Flask 接口** 在 Vue.js 中使用 Axios 库发起 HTTP 请求，从而从 Flask 获取所需的数据。 #### 安装 Axios 如果尚未安装 Axios，则需先执行以下命令： ```bash npm install axios ``` #### 编写 Vue 组件逻辑 下面是一个简单的 Vue 组件示例，展示如何从 Flask 后端接收数据： ```javascript <template> <div> <h1>{{ message }}</h1> <p>Value received: {{ value }}</p> </div> </template> <script> import axios from 'axios'; export default { name: 'App', data() { return { message: '', value: null, }; }, mounted() { this.fetchData(); }, methods: { fetchData() { axios.get('http://localhost:5000/api/data') // 替换为实际部署地址 .then(response => { this.message = response.data.message; this.value = response.data.value; }) .catch(error => console.error('Error fetching data:', error)); }, }, }; </script> ``` 此组件会在挂载阶段自动触发 `fetchData()` 方法，进而向 Flask 发起请求并将接收到的数据绑定至模板中的变量[^2]。 3. **跨域问题解决方案** 当 Vue 运行于不同域名或端口号下时，默认情况下浏览器的安全策略可能会阻止此类请求（即 CORS 问题）。解决办法之一是在 Flask 中启用跨域资源共享功能。 ```python from flask_cors import CORS app = Flask(__name__) CORS(app) # 允许所有来源访问API资源 ``` 添加上述代码片段即可轻松应对大多数开发环境下的跨域需求[^3]。 4. **生产环境中 Nginx 配置优化** 若计划上线应用，在正式服务器上建议利用反向代理技术减少暴露风险以及提升性能表现。例如借助 Nginx 来分发静态文件和转发动态请求给内部网络里的 Flask 实例[^4]。 ---