初尝python flask + vue3 axios 接口配置

首先使���pycharm创建python flask 项目，

在项目的app.py文件下，

//Python flask app.pyfrom flask import Flask, request, jsonifyapp = 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.jsimport { 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.jsimport { createApp } from 'vue'import App from './App.vue'const app = createApp(App)app.mount('#app')

之后返回App.vue，渲染页面

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);    });};  get  post

这里注意代码中的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接收参数正常。