Python全栈开发：FastAPI到Vue3前后端分离实战

前言

前后端分离是现代Web开发的主流架构。本文使用FastAPI作为后端框架，Vue3+Element Plus作为前端框架，从零搭建一个完整的全栈项目，涵盖用户认证、CRUD接口、文件上传等核心功能。

一、项目结构

myapp/
├── backend/              # FastAPI后端
│   ├── app/
│   │   ├── __init__.py
│   │   ├── main.py       # 入口文件
│   │   ├── config.py     # 配置
│   │   ├── models/       # 数据模型
│   │   ├── schemas/      # Pydantic模型
│   │   ├── api/          # 路由
│   │   ├── services/     # 业务逻辑
│   │   └── utils/        # 工具函数
│   ├── requirements.txt
│   └── Dockerfile
├── frontend/             # Vue3前端
│   ├── src/
│   │   ├── api/          # API调用
│   │   ├── components/   # 组件
│   │   ├── views/        # 页面
│   │   ├── stores/       # Pinia状态
│   │   └── router/       # 路由
│   ├── package.json
│   └── Dockerfile
└── docker-compose.yml

二、FastAPI后端开发

2.1 项目初始化

# requirements.txt
fastapi==0.111.0
uvicorn==0.30.1
sqlalchemy==2.0.30
asyncpg==0.29.0
python-jose[cryptography]==3.3.0
passlib[bcrypt]==1.7.4
python-multipart==0.0.9
pydantic[email]==2.7.0
alembic==1.13.1

# 安装
pip install -r requirements.txt

2.2 数据库模型

# app/models/user.py
from sqlalchemy import Column, Integer, String, DateTime, Boolean
from sqlalchemy.sql import func
from app.config import Base

class User(Base):
    __tablename__ = "users"
    
    id = Column(Integer, primary_key=True, index=True)
    username = Column(String(50), unique=True, index=True, nullable=False)
    email = Column(String(100), unique=True, index=True, nullable=False)
    hashed_password = Column(String(200), nullable=False)
    is_active = Column(Boolean, default=True)
    created_at = Column(DateTime(timezone=True), server_default=func.now())
    updated_at = Column(DateTime(timezone=True), onupdate=func.now())

2.3 用户认证

# app/api/auth.py
from fastapi import APIRouter, Depends, HTTPException, status
from fastapi.security import OAuth2PasswordBearer
from sqlalchemy.ext.asyncio import AsyncSession
from jose import JWTError, jwt
from passlib.context import CryptContext
from datetime import datetime, timedelta

from app.config import get_db, settings
from app.models.user import User
from app.schemas.user import UserCreate, UserLogin, Token

router = APIRouter(prefix="/api/auth", tags=["认证"])
pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/api/auth/login")

SECRET_KEY = settings.SECRET_KEY
ALGORITHM = "HS256"

def verify_password(plain_password: str, hashed_password: str) -> bool:
    return pwd_context.verify(plain_password, hashed_password)

def get_password_hash(password: str) -> str:
    return pwd_context.hash(password)

def create_access_token(data: dict) -> str:
    to_encode = data.copy()
    expire = datetime.utcnow() + timedelta(hours=24)
    to_encode.update({"exp": expire})
    return jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)

async def get_current_user(
    token: str = Depends(oauth2_scheme),
    db: AsyncSession = Depends(get_db)
) -> User:
    try:
        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
        user_id: int = payload.get("sub")
        if user_id is None:
            raise HTTPException(status_code=401)
    except JWTError:
        raise HTTPException(status_code=401)
    
    user = await db.get(User, user_id)
    if user is None:
        raise HTTPException(status_code=401)
    return user

@router.post("/register", response_model=dict)
async def register(user: UserCreate, db: AsyncSession = Depends(get_db)):
    # 检查用户名是否已存在
    from sqlalchemy import select
    result = await db.execute(select(User).where(User.username == user.username))
    if result.scalar_one_or_none():
        raise HTTPException(status_code=400, detail="用户名已存在")
    
    db_user = User(
        username=user.username,
        email=user.email,
        hashed_password=get_password_hash(user.password)
    )
    db.add(db_user)
    await db.commit()
    return {"message": "注册成功"}

@router.post("/login", response_model=Token)
async def login(user: UserLogin, db: AsyncSession = Depends(get_db)):
    from sqlalchemy import select
    result = await db.execute(select(User).where(User.username == user.username))
    db_user = result.scalar_one_or_none()
    
    if not db_user or not verify_password(user.password, db_user.hashed_password):
        raise HTTPException(status_code=401, detail="用户名或密码错误")
    
    access_token = create_access_token(data={"sub": db_user.id})
    return {"access_token": access_token, "token_type": "bearer"}

2.4 CRUD接口

# app/api/items.py
from fastapi import APIRouter, Depends, HTTPException
from sqlalchemy.ext.asyncio import AsyncSession
from sqlalchemy import select
from typing import List

from app.config import get_db
from app.models.user import User
from app.models.item import Item
from app.schemas.item import ItemCreate, ItemResponse
from app.api.auth import get_current_user

router = APIRouter(prefix="/api/items", tags=["物品"])

@router.get("/", response_model=List[ItemResponse])
async def get_items(
    skip: int = 0,
    limit: int = 20,
    db: AsyncSession = Depends(get_db),
    current_user: User = Depends(get_current_user)
):
    result = await db.execute(
        select(Item)
        .where(Item.owner_id == current_user.id)
        .offset(skip)
        .limit(limit)
        .order_by(Item.created_at.desc())
    )
    return result.scalars().all()

@router.post("/", response_model=ItemResponse)
async def create_item(
    item: ItemCreate,
    db: AsyncSession = Depends(get_db),
    current_user: User = Depends(get_current_user)
):
    db_item = Item(**item.dict(), owner_id=current_user.id)
    db.add(db_item)
    await db.commit()
    await db.refresh(db_item)
    return db_item

@router.put("/{item_id}", response_model=ItemResponse)
async def update_item(
    item_id: int,
    item: ItemCreate,
    db: AsyncSession = Depends(get_db),
    current_user: User = Depends(get_current_user)
):
    db_item = await db.get(Item, item_id)
    if not db_item or db_item.owner_id != current_user.id:
        raise HTTPException(status_code=404, detail="物品不存在")
    
    for key, value in item.dict().items():
        setattr(db_item, key, value)
    
    await db.commit()
    await db.refresh(db_item)
    return db_item

@router.delete("/{item_id}")
async def delete_item(
    item_id: int,
    db: AsyncSession = Depends(get_db),
    current_user: User = Depends(get_current_user)
):
    db_item = await db.get(Item, item_id)
    if not db_item or db_item.owner_id != current_user.id:
        raise HTTPException(status_code=404, detail="物品不存在")
    
    await db.delete(db_item)
    await db.commit()
    return {"message": "删除成功"}

三、Vue3前端开发

3.1 项目初始化

# 创建Vue3项目
npm create vite@latest frontend -- --template vue
cd frontend
npm install
npm install element-plus @element-plus/icons-vue
npm install pinia vue-router@4 axios

3.2 Axios封装

// src/api/request.js
import axios from 'axios'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

const request = axios.create({
  baseURL: '/api',
  timeout: 10000
})

// 请求拦截器
request.interceptors.request.use(config => {
  const userStore = useUserStore()
  if (userStore.token) {
    config.headers.Authorization = `Bearer ${userStore.token}`
  }
  return config
})

// 响应拦截器
request.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response?.status === 401) {
      const userStore = useUserStore()
      userStore.logout()
      ElMessage.error('登录已过期，请重新登录')
    } else {
      ElMessage.error(error.response?.data?.detail || '请求失败')
    }
    return Promise.reject(error)
  }
)

export default request

3.3 页面组件

<!-- src/views/ItemList.vue -->
<template>
  <div class="item-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>物品列表</span>
          <el-button type="primary" @click="showDialog()">新增</el-button>
        </div>
      </template>
      
      <el-table :data="items" v-loading="loading">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="created_at" label="创建时间" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button size="small" @click="showDialog(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteItem(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="form.id ? '编辑' : '新增'">
      <el-form :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveItem">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/api/request'

const items = ref([])
const loading = ref(false)
const dialogVisible = ref(false)
const form = ref({ name: '', description: '' })

const loadItems = async () => {
  loading.value = true
  try {
    items.value = await request.get('/items/')
  } finally {
    loading.value = false
  }
}

const showDialog = (row) => {
  form.value = row ? { ...row } : { name: '', description: '' }
  dialogVisible.value = true
}

const saveItem = async () => {
  if (form.value.id) {
    await request.put(`/items/${form.value.id}`, form.value)
  } else {
    await request.post('/items/', form.value)
  }
  dialogVisible.value = false
  loadItems()
}

const deleteItem = async (id) => {
  await request.delete(`/items/${id}`)
  loadItems()
}

onMounted(loadItems)
</script>

四、部署

总结

FastAPI+Vue3是当前最流行的Python全栈技术栈，FastAPI的高性能和Vue3的现代化开发体验，让全栈开发变得高效愉快。如果需要全栈开发服务，欢迎联系17老师。

关于17老师：AI应用·数字化管理·全栈开发·网络安全全栈专家。联系邮箱：j.d88888888@qq.com，微信：AFIST17