初尝python flask + vue3 axios 接口配置_vue调用python接口

首先使用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接收参数正常。