写一个vue和flask交互的代码
时间: 2023-08-31 12:41:06 浏览: 82
### 回答1:
可以的,以下是一个简单的 Vue 和 Flask 交互的代码示例:
Vue 部分:
```
<template>
<div>
<h1>{{ message }}</h1>
<button @click="getFlaskData">获取 Flask 数据</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
message: ''
}
},
methods: {
async getFlaskData() {
const response = await axios.get('http://localhost:500/flask-data')
this.message = response.data.message
}
}
}
</script>
```
Flask 部分:
```
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/flask-data')
def get_flask_data():
data = {'message': '这是来自 Flask 的数据'}
return jsonify(data)
if __name__ == '__main__':
app.run()
```
这个代码示例演示了如何在 Vue 中使用 axios 发送 GET 请求来获取 Flask 返回的 JSON 数据。在这个示例中,我们定义了一个名为 `getFlaskData` 的方法,该方法使用 axios 发送 GET 请求到 Flask 服务器的 `/flask-data` 路径。在 Flask 服务器中,我们定义了一个名为 `get_flask_data` 的路由,该路由返回一个 JSON 数据,其中包含一个名为 `message` 的键值对。在 Vue 中,我们将获取到的 `message` 数据显示在页面上。
### 回答2:
Vue 和 Flask 是一对经典的前后端配对,下面是一个简单的示例代码,演示了如何使用 Vue 和 Flask 进行交互。
首先,我们需要准备一个简单的 Flask 后端接口,提供一个 GET 请求,返回一个 JSON 格式的数据。
```python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/data', methods=['GET'])
def get_data():
data = {
'name': 'Vue',
'framework': 'Flask',
'interaction': 'Vue and Flask interaction is awesome!'
}
return jsonify(data)
if __name__ == '__main__':
app.run()
```
接下来,我们使用 Vue 创建一个简单的前端页面,发送 GET 请求到 Flask 的接口,接收返回的数据并在页面上显示出来。
```vue
<template>
<div>
<button @click="getData">Get Data</button>
<p>{{ responseData }}</p>
</div>
</template>
<script>
export default {
data() {
return {
responseData: ''
}
},
methods: {
getData() {
fetch('/api/data') // 发送 GET 请求到 Flask 的接口
.then(response => response.json()) // 将返回的数据解析为 JSON 格式
.then(data => {
this.responseData = data.interaction; // 在页面上显示返回的数据
})
.catch(error => console.error(error));
}
}
}
</script>
<style scoped>
button {
padding: 10px;
font-size: 16px;
background-color: #ccc;
}
p {
margin-top: 20px;
font-size: 18px;
}
</style>
```
这段代码中,我们首先在按钮的点击事件中调用 `getData` 方法,该方法使用 fetch 函数发送 GET 请求到 Flask 的接口。然后,我们通过解析返回的数据,将 `responseData` 设置为返回数据中的 `interaction` 字段。最后,在页面上通过插值将数据展示出来。
整合以上代码,我们可以在前后端交互的同时,将 Flask 返回的数据显示在 Vue 页面上。