vue+python实现前后端交互
初学vue+python项目，目前对前后端交互这块不太懂。
目前前端UploadEQT.vue
uploadFile() {
// 创建FormData对象
const formData = new FormData();
formData.append('file', this.selectedFile);
// 发送表单数据到后端
axios.post('http://localhost:8080/#/UploadEQT', formData)
.then(response => {
// 根据后端返回的结果做出相应处理
console.log(response.data);
})
.catch(error => {
// 处理错误情况
console.error(error);
});
}
上传文件：
后端接收文件
from flask import Flask, request
app = Flask(__name__)
@app.route('/upload', methods=['POST'])
def upload_file():
uploaded_file = request.files['file']
if uploaded_file:
# 执行你想要的操作，比如保存文件到本地
uploaded_file.save(uploaded_file.filename)
return '文件上传成功！'
else:
return '未接收到文件！'
if __name__ == '__main__':
app.run()
后端文件结构
图中的eqt文件是我手动加进来的，目前不懂得是前端 axios.post()，和@app.route()怎么写
参考一下这个demo，这是之前我用gpt生成的：
下面是一个简单的 Vue 和 Flask 结合的文件上传示例的代码：
Vue 前端代码（App.vue）：
<template>
<div>
<input type="file" v-model="file" />
<button @click="uploadFile">上传文件</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null
};
},
methods: {
uploadFile() {
let formData = new FormData();
formData.append('file', this.file);
axios.post('http://localhost:5000/upload', formData)
.then(response => {
// 处理响应结果
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});
}
}
};
</script>
Flask 后端代码（app.py）：
from flask import Flask, request
from flask_cors import CORS
from werkzeug.utils import secure_filename
app = Flask(__name__)
CORS(app)
@app.route('/upload', methods=['POST'])
def upload_file():
if 'file' not in request.files:
return 'No file part', 400
file = request.files['file']
if file.filename == '':
return 'No selected file', 400
filename = secure_filename(file.filename)
filepath = 'your_upload_path/' + filename
file.save(filepath)
return 'File uploaded successfully'
if __name__ == '__main__':
app.run()
请确保在 Vue 项目中安装了 axios 库：npm install axios。将前端代码保存为 App.vue，在 Vue 项目中使用即可。将后端代码保存为 app.py，在 Flask 项目中运行 app.py 即可。注意替换代码中的上传路径 your_upload_path 为您希望保存文件的实际路径。
这个示例使用了 Axios 库来发送 POST 请求，通过 FormData 对象将文件数据添加到请求中。后端使用 Flask 来创建一个接收文件上传的路由处理函数，并使用 Werkzeug 的 secure_filename 函数确保文件名的安全性。当文件上传成功时，返回上传成功的消息。
请根据您的具体需求调整代码，并确保正确安装了 Flask 和相关依赖库。运行 Vue 和 Flask 项目后，访问 Vue 前端页面即可进行文件上传测试。
运行过程中有啥问题，可以随时交流
你请求的8080，所以改一下python代码
app.run(host="127.0.0.1", port="8080")