首先使用pycharm创建python flask 项目,
在项目的app.py文件下,
//Python flask app.py
from flask import Flask, request, jsonify
app = Flask(__name__)
# 处理GET请求
@app.route('/api/data', methods=['GET'])
def get_data():
# 处理GET请求的逻辑
data = {'name': 'yangMing', 'age': 24}
return jsonify(data)
# 处理POST请求
@app.route('/api/data', methods=['POST'])
def post_data():
# 获取POST请求的数据
data = request.json
# 处理POST请求的逻辑
# ...
# 返回响应
response_data = {'message': 'Data post successfully'}
return jsonify(response_data)
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5000)
//host表示该地址只在本机调用,调用端口号5000来运行该服务器项目
之后,开启flask,服务器在端口5000运行
配置vue,引入axios、
这个地方其实可以使用相对路径的方法去获取数据。如果使用绝对路径,会产生axios的跨域问题,我们首先在vite.config.js里配置路径
跨域的调试和修改方法也可以参考之前的关于axios GET/POST 跨域及传参问题
//vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import dns from 'dns'
import vue from '@vitejs/plugin-vue'
dns.setDefaultResultOrder('verbatim')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server:{
proxy:{
"/api":{
target:"http://127.0.0.1:5000/api/data", //目标路径
changeOrigin:true,
rewrite: (path) => path.replace(/^\/api/, ''),
}
}
}
})
main.js
//main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
之后返回App.vue,渲染页面
<script setup>
import axios from "axios";
const getEvent = function () {
axios
.get("/api")
.then((res) => {
console.log(res);
})
.catch(function (error) {
console.log(error);
});
};
let param = new URLSearchParams();
param.append("name", "yangMing");
param.append("age", 24);
const postEvent = function () {
axios
.post("/api", JSON.stringify(param), {
headers: {
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
})
.catch(function (error) {
console.log(error);
});
};
</script>
<template>
<button @click="getEvent">get</button>
<button @click="postEvent">post</button>
</template>
<style scoped></style>
这里注意代码中的axios.post方法,相比较之前文章的方法。此处,我们虽然设置了传参param,但是如果直接提交,
如果缺少请求头,则会报错 415
如果只存在请求头而不JSON解析数据后传参,则会报错400
因此,综上所述,在后端服务器python不写任何解析代码和简化HTTP请求代码的情况下,此处必须使用JSON传参,并必须携带请求头!
如果此处不使用JSON.stringify进行解析,则服务端flask就需要解析。前端和服务端如果都不解析,则会报错。Vue的axios包自带JSON解析功能,但仅限于获取数据,因此发送数据时,还是需要解析后发送的。
headers: {
"Content-Type": "application/json",
},
请求表头。
调试,
运行完成。
===============================解决BUG=================================
这里后台收不到post的参数传值,和之前遇到的情况一样。
百度看了一下,修改vue里定义param的代码,让let param = new FormData();
调试,后台接收参数正常。
let param = new FormData(); 这里的定义出现了差异
param.append("name", "yangMing");
param.append("ageee", "24");
const postEvent = function () {
axios
.post("/api", param, {
headers: {
"Content-Type": "application/json",
},
})
.then((res) => {
console.log(res);
})
.catch(function (error) {
console.log(error);
});
};
后台python接收参数正常。