[教程]掌握FastAPI与Vue.js完美结合：轻松构建高效Web应用实战指南

发布于 2025-07-06 13:21:34

538

引言随着Web应用开发的不断发展，选择合适的框架和工具变得尤为重要。FastAPI和Vue.js是目前最受欢迎的Web开发框架之一。FastAPI以其高性能和易于使用而著称，而Vue.js则以其简洁的...

引言

随着Web应用开发的不断发展，选择合适的框架和工具变得尤为重要。FastAPI和Vue.js是目前最受欢迎的Web开发框架之一。FastAPI以其高性能和易于使用而著称，而Vue.js则以其简洁的语法和强大的社区支持而受到开发者喜爱。本文将深入探讨如何将FastAPI与Vue.js完美结合，构建高效且可扩展的Web应用。

FastAPI简介

FastAPI是一个现代、快速（高性能）的Web框架，用于构建APIs，由Python 3.6+编写。它具有以下特点：

基于标准Python类型提示，自动验证和生成OpenAPI文档。
依赖注入系统，使编写可维护的代码变得简单。
高性能，使用Starlette和Uvicorn。

Vue.js简介

Vue.js是一个渐进式JavaScript框架，用于构建用户界面和单页应用。它具有以下特点：

轻量级，易于上手。
强大的社区支持和丰富的生态系统。
响应式数据绑定和组件系统。

快速开始

以下是一个简单的FastAPI和Vue.js结合的示例。

FastAPI后端

首先，创建一个FastAPI应用。

from fastapi import FastAPI
app = FastAPI()
@app.get("/")
async def read_root(): return {"Hello": "World"}

Vue.js前端

创建一个简单的Vue.js应用来调用FastAPI。

<!DOCTYPE html>
<html>
<head> <title>Vue.js with FastAPI</title> <script src="https://unpkg.com/vue@next"></script>
</head>
<body> <div id="app"> <h1>{{ message }}</h1> </div> <script> const app = Vue.createApp({ data() { return { message: '' } }, async mounted() { const response = await fetch('http://localhost:8000/'); this.message = await response.text(); } }); app.mount('#app'); </script>
</body>
</html>

高级功能

数据库集成

使用SQLAlchemy和FastAPI进行数据库集成。

from fastapi import FastAPI, Depends
from sqlalchemy.orm import Session
from .database import SessionLocal, Base
from .models import User
# 数据库会话依赖项
def get_db(): db = SessionLocal() try: yield db finally: db.close()
app = FastAPI()
# 定义数据库模型
Base.metadata.create_all(bind=engine)
@app.get("/users/{user_id}", response_model=User)
def read_user(user_id: int, db: Session = Depends(get_db)): return db.query(User).filter(User.id == user_id).first()

用户认证

使用OAuth2密码认证进行用户认证。

from fastapi import FastAPI, Depends, HTTPException, status
from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
from passlib.context import CryptContext
from pydantic import BaseModel
app = FastAPI()
# 密码哈希
pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
# 用户模型
class User(BaseModel): username: str hashed_password: str
# 用户认证
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")
# 密码认证
async def authenticate_user(form_data: OAuth2PasswordRequestForm = Depends()): user = authenticate_user_db(username=form_data.username, password=form_data.password) if not user: raise HTTPException( status_code=status.HTTP_401_UNAUTHORIZED, detail="Incorrect username or password", headers={"WWW-Authenticate": "Bearer"}, ) return user
# 用户数据库
async def authenticate_user_db(username: str, password: str): user = await db.query(User).filter(User.username == username).first() if not user: return False if not pwd_context.verify(password, user.hashed_password): return False return user
@app.post("/token", response_model=Token)
def login_for_access_token(form_data: OAuth2PasswordRequestForm = Depends()): user = authenticate_user(form_data) if not user: raise HTTPException( status_code=status.HTTP_401_UNAUTHORIZED, detail="Incorrect username or password", headers={"WWW-Authenticate": "Bearer"}, ) access_token = create_access_token(data={"sub": user.username}) return {"access_token": access_token, "token_type": "bearer"}