单页应用（SPA）凭借无刷新切换页面的流畅体验，成为当前前端开发的主流模式，而后端选择FastAPI构建接口服务，配合Vue作为前端框架，能高效实现前后端分离架构。FastAPI基于Python异步特性，性能优异且自带接口文档，非常适合作为单页应用的后端支撑。
环境准备
首先需要安装必要的依赖，后端使用FastAPI和uvicorn作为服务器，前端使用Vue3脚手架搭建项目。
后端依赖安装
创建Python虚拟环境后，执行以下命令安装依赖：
# 安装FastAPI和uvicorn pip install fastapi uvicorn # 安装跨域处理依赖 pip install fastapi-cors
前端项目初始化
确保本地已安装Node.js，执行以下命令创建Vue项目：
# 创建Vue3项目 npm create vue@latest spa-frontend # 进入项目目录安装依赖 cd spa-frontend npm install
FastAPI后端接口开发
后端需要提供数据接口，同时处理跨域请求，让前端可以正常访问接口。
基础接口与跨域配置
创建main.py文件，编写基础接口和跨域配置代码：
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
# 初始化FastAPI应用
app = FastAPI(title="单页应用后端接口")
# 配置跨域，允许前端地址访问
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:5173"], # Vue默认开发端口
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# 定义测试接口
@app.get("/api/hello")
def read_root():
return {"message": "Hello from FastAPI backend"}
# 定义获取用户列表接口
@app.get("/api/users")
def get_users():
return [
{"id": 1, "name": "张三", "age": 25},
{"id": 2, "name": "李四", "age": 28},
{"name": "王五", "age": 30}
]
启动后端服务，执行命令uvicorn main:app --reload，服务默认运行在http://127.0.0.1:8000，访问http://127.0.0.1:8000/docs可以看到自动生成的接口文档。
接口参数处理
如果需要接收前端传递的参数，比如新增用户的接口，可以这样编写：
from pydantic import BaseModel
# 定义请求体数据模型
class UserCreate(BaseModel):
name: str
age: int
@app.post("/api/users")
def create_user(user: UserCreate):
# 这里实际项目中会写入数据库，示例仅返回接收的数据
return {"code": 200, "message": "用户创建成功", "data": user.dict()}
Vue前端对接后端接口
前端需要调用后端提供的接口，获取数据并渲染页面，这里使用Vue3的组合式API开发。
封装请求工具
在Vue项目中安装axios作为请求工具，执行npm install axios，然后在src/utils目录下创建request.js文件：
import axios from "axios"
// 创建axios实例
const request = axios.create({
baseURL: "http://127.0.0.1:8000", // 后端接口基础地址
timeout: 5000
})
// 请求拦截器
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
页面调用接口示例
修改src/views/Home.vue文件，编写调用后端接口的代码：
<template>
<div class="home">
<h1>单页应用首页</h1>
<p>后端返回的消息：{{ helloMsg }}</p>
<h2>用户列表</h2>
<ul>
<li v-for="user in userList" :key="user.id">
{{ user.name }} - {{ user.age }}岁
</li>
</ul>
<h2>新增用户</h2>
<div>
<input v-model="newUser.name" placeholder="输入用户名" />
<input v-model.number="newUser.age" placeholder="输入年龄" type="number" />
<button @click="addUser">提交</button>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import request from "../utils/request"
// 定义响应式数据
const helloMsg = ref("")
const userList = ref([])
const newUser = ref({
name: "",
age: null
})
// 获取后端消息
const getHello = async () => {
const res = await request.get("/api/hello")
helloMsg.value = res.message
}
// 获取用户列表
const getUsers = async () => {
const res = await request.get("/api/users")
userList.value = res
}
// 新增用户
const addUser = async () => {
if (!newUser.value.name || !newUser.value.age) {
alert("请填写完整用户信息")
return
}
const res = await request.post("/api/users", newUser.value)
alert(res.message)
// 重新获取用户列表
getUsers()
// 清空输入框
newUser.value = { name: "", age: null }
}
// 页面挂载后调用接口
onMounted(() => {
getHello()
getUsers()
})
</script>
<style scoped>
.home {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #eee;
}
input {
margin-right: 10px;
padding: 5px;
}
button {
padding: 5px 15px;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
前后端联调测试
分别启动前后端服务，后端执行uvicorn main:app --reload，前端在项目目录执行npm run dev，访问前端地址http://localhost:5173，可以看到页面正常显示后端返回的消息和用户列表，填写用户信息点击提交，也能正常调用后端新增接口，说明前后端分离的单页应用已经搭建完成。
常见问题说明
- 跨域问题：如果前端访问接口出现跨域错误，检查FastAPI的跨域配置中
allow_origins是否包含前端的访问地址，开发环境和生产环境的地址需要分别配置。 - 接口地址错误：如果前端请求404，检查axios的
baseURL是否正确，后端接口路径是否和前端请求路径一致。 - 数据格式问题：前端传递的参数需要和后端定义的
BaseModel字段匹配，否则会返回422验证错误。