flask_sqlalchemy将查询到的数据以JSON格式传到前端vue
时间: 2024-02-25 14:58:53 浏览: 20
要将查询到的数据以JSON格式传到前端Vue,可以按照以下步骤:
1. 在后端Flask中,使用flask_sqlalchemy库查询到需要传给前端的数据,并将其转为字典格式,例如:
```python
from flask import jsonify
from app.models import User # 假设查询的是用户数据
from app import db
users = db.session.query(User).all() # 查询所有用户数据
user_list = []
for user in users:
user_dict = {
'id': user.id,
'username': user.username,
'email': user.email
}
user_list.append(user_dict)
return jsonify(user_list) # 将数据转为JSON格式并返回
```
2. 在前端Vue中,使用axios库向后端Flask发送请求,并在响应中获取JSON格式的数据,例如:
```javascript
<script>
import axios from 'axios'
export default {
data() {
return {
users: []
}
},
mounted() {
axios.get('/users') // 发送GET请求到后端Flask
.then(response => {
this.users = response.data // 获取响应中的JSON数据并赋值给Vue中的users变量
})
.catch(error => {
console.log(error)
})
}
}
</script>
```
在上述代码中,假设后端Flask中定义了一个路由'/users',用于获取所有用户数据。Vue中的axios库发送GET请求到该路由,并在响应中获取JSON格式的数据,并将其赋值给Vue实例中的users变量。