前后端分离架构下，Python后端负责提供数据接口，Vue前端负责页面渲染和交互，两者通过HTTP协议进行通信。要实现稳定高效的对接，需要处理好接口定义、跨域配置、数据格式统一等多个环节。
环境准备
首先我们需要准备好基础开发环境，这里以Python的Flask框架作为后端示例，Vue使用Vue3的组合式API开发。
后端环境
安装Flask和跨域处理依赖：
pip install flask flask_cors
前端环境
使用Vue CLI创建项目并安装请求库axios：
npm create vue@latest cd 项目目录 npm install axios
Python后端接口开发
我们先编写一个简单的Flask后端，提供用户查询和新增的接口，接口数据格式统一使用JSON。
from flask import Flask, request, jsonify
from flask_cors import CORS
# 初始化Flask应用
app = Flask(__name__)
# 开启跨域支持，允许所有来源访问，生产环境可指定具体域名
CORS(app)
# 模拟用户数据
user_list = [
{"id": 1, "name": "张三", "age": 25},
{"id": 2, "name": "李四", "age": 28}
]
# 获取用户列表接口，支持GET请求
@app.route("/api/users", methods=["GET"])
def get_users():
return jsonify({
"code": 200,
"msg": "查询成功",
"data": user_list
})
# 新增用户接口，支持POST请求
@app.route("/api/users", methods=["POST"])
def add_user():
# 获取前端传递的JSON数据
req_data = request.get_json()
new_user = {
"id": len(user_list) + 1,
"name": req_data.get("name"),
"age": req_data.get("age")
}
user_list.append(new_user)
return jsonify({
"code": 200,
"msg": "新增成功",
"data": new_user
})
if __name__ == "__main__":
# 后端服务运行在5000端口
app.run(host="0.0.0.0", port=5000, debug=True)
Vue前端请求封装与调用
前端需要封装统一的请求方法，处理请求拦截和响应拦截，方便后续接口调用。
封装axios请求
在src目录下创建utils/request.js文件：
import axios from "axios"
// 创建axios实例
const request = axios.create({
// 后端接口基础地址，这里指向本地5000端口的后端服务
baseURL: "http://127.0.0.1:5000",
timeout: 5000
})
// 请求拦截器，可统一添加token等请求头
request.interceptors.request.use(
config => {
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器，统一处理响应数据
request.interceptors.response.use(
response => {
return response.data
},
error => {
return Promise.reject(error)
}
)
export default request
调用后端接口
在Vue组件中调用封装好的请求方法，实现用户列表查询和新增功能：
<template>
<div class="user-container">
<h3>用户列表</h3>
<ul>
<li v-for="user in userList" :key="user.id">
{{ user.name }} - {{ user.age }}岁
</li>
</ul>
<div class="add-user">
<input v-model="newName" placeholder="输入用户名" />
<input v-model="newAge" type="number" placeholder="输入年龄" />
<button @click="addUser">新增用户</button>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import request from "../utils/request"
const userList = ref([])
const newName = ref("")
const newAge = ref("")
// 获取用户列表
const getUsers = async () => {
try {
const res = await request.get("/api/users")
if (res.code === 200) {
userList.value = res.data
}
} catch (error) {
console.error("获取用户列表失败", error)
}
}
// 新增用户
const addUser = async () => {
if (!newName.value || !newAge.value) {
alert("请输入完整用户信息")
return
}
try {
const res = await request.post("/api/users", {
name: newName.value,
age: Number(newAge.value)
})
if (res.code === 200) {
alert("新增成功")
// 重新获取列表
getUsers()
newName.value = ""
newAge.value = ""
}
} catch (error) {
console.error("新增用户失败", error)
}
}
// 组件挂载时获取用户列表
onMounted(() => {
getUsers()
})
</script>
<style scoped>
.user-container {
padding: 20px;
}
.add-user {
margin-top: 20px;
}
.add-user input {
margin-right: 10px;
padding: 5px;
}
.add-user button {
padding: 5px 10px;
}
</style>
跨域问题处理
如果后端没有配置跨域，前端调用接口时浏览器会报跨域错误，提示Access-Control-Allow-Origin相关的报错信息。除了使用Flask-CORS扩展，也可以手动在后端添加响应头解决跨域：
@app.after_request
def after_request(response):
# 允许所有来源访问，生产环境可替换为具体域名
response.headers.add("Access-Control-Allow-Origin", "*")
response.headers.add("Access-Control-Allow-Headers", "Content-Type,Authorization")
response.headers.add("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS")
return response
如果是OPTIONS预检请求，需要单独处理：
@app.route("/api/users", methods=["OPTIONS"])
def handle_options():
return "", 200
联调常见问题排查
- 接口404：检查后端接口路径是否正确，前端请求的URL是否和后端定义的路由一致
- 参数传递错误：POST请求确认前端是否使用
request.get_json()获取JSON数据，GET请求参数使用request.args.get()获取 - 数据格式不匹配：前后端约定好统一的数据返回格式，比如都使用
{code, msg, data}的结构 - 端口占用：确认后端5000端口和前端运行端口没有被其他程序占用
总结
Python后端和Vue前端对接的核心是统一接口规范、处理好跨域问题、封装好请求方法。实际开发中可以根据项目需求选择Django、FastAPI等Python后端框架，前端也可以根据项目情况调整请求封装逻辑，只要遵循HTTP协议和前后端分离的通信规则，就能实现稳定高效的对接。