提问人：GaTe 提问时间：5/30/2023 更新时间：5/30/2023 访问量：1182
最佳实践 vue.js 前端和 python 后端
Best practise vue.js frontend and python backend
问：
我想要一个 python 脚本来触发 vue.js 组件的点击事件。 我见过的大多数方法似乎都是通过 .json 进行数据交换的。前端中的事件不直接进入脚本，而是使用所用组件的属性更新 .json。 Python 读取文件并将其推送回去。
由于我对涉及 vue.js 的所有事物都很陌生，我想问一下最佳实践是什么。因为也有建议，比如使用 FastAPI、Django 或 FLask，让 vue.js 进行渲染。！
提前致谢。
答：
2赞
Insula
5/30/2023
#1
Vue.js 是一门很棒的学习语言，很高兴你正在学习它！
有几种方法可以将 Python 与 Vue 集成，您的 Python 后端确实可以通过操作 JSON 数据来工作。然后，您的 Vue.js 应用程序将触发对 Python 后端的 API 请求（GET、POST 等）以响应用户操作，例如点击事件。
让我们以 Python Flask 为例。我们可以创建一个基本的 API，当特定路由被命中时，它只返回一些数据：
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/data', methods=['GET'])
def get_data():
data = {'key': 'value'}
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
然后在你的 Vue 应用程序中，你可以使用像 axios 这样的 HTTP 客户端，在点击按钮时向这个路由发送一个 GET 请求，并对响应数据做一些事情。
安装 Axios：
npm install axios
Vue.js：
<template>
<button @click="fetchData">Fetch data</button>
</template>
<script>
import axios from 'axios';
export default {
methods: {
fetchData() {
axios.get('http://localhost:5000/api/data')
.then(response => {
console.log(response.data);
// do something with response.data
})
.catch(error => {
console.error(error);
});
}
}
}
</script>
这样，当这个 Vue.js 组件中的按钮被点击时，它将触发一个 GET 请求来 http://localhost:5000/api/data（Flask 服务器）并记录响应数据。
这是一个简单的例子。在实际应用程序中，您需要正确处理错误，并可能使用 Vuex 来管理应用程序的状态。
评论
0赞
GaTe
5/30/2023
谢谢你，真的很有帮助！相反，我只会通过发布请求，对吧？
0赞
Insula
5/31/2023
@GaTe92是的！我建议查看一些 YouTube 教程，或者只是在谷歌上搜索将 Python 与 Vue 集成，那里有一些很棒的信息可以帮助您配对
评论