给我一个flask vue 的交互代码
时间: 2024-05-01 07:20:42 浏览: 8
以下是一个简单的 Flask 和 Vue.js 的前后端交互代码示例:
Flask 后端代码:
```python
from flask import Flask, jsonify, request
app = Flask(__name__)
@app.route('/api/data', methods=['POST'])
def api_data():
data = request.json
# 处理数据
result = {"message": "数据处理成功"}
return jsonify(result)
if __name__ == '__main__':
app.run(debug=True)
```
Vue.js 前端代码:
```html
<template>
<div>
<input v-model="inputData">
<button @click="submitData">提交数据</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
inputData: '',
}
},
methods: {
submitData() {
const data = {inputData: this.inputData};
axios.post('/api/data', data)
.then(response => {
console.log(response.data.message);
})
.catch(error => {
console.log(error.response.data);
});
}
}
}
</script>
```
以上代码实现了一个简单的前后端交互,当用户在前端输入数据并点击提交按钮时,Vue.js 会将数据发送到 Flask 后端的 `/api/data` 接口,Flask 后端接收数据并进行处理,最后返回处理结果给前端。