Python 前后端分离的架构

目录

1. 后端部分（FastAPI）

1.1 requirements.txt

1.2 database.py

1.3 models.py

1.4 schemas.py

1.5 crud.py

1.6 api/endpoints.py

1.7 main.py

1.8 启动后端

2. 前端部分（Vue 3 示例）

2.1 package.json 依赖主要包括：

2.2 UserList.vue

2.3 main.js

2.4 App.vue

2.5 本地开发服务器启动

3. 跨域问题

4. 说明

---

采用主流的 FastAPI (后端) + Vue.js (前端) 架构。其中 FastAPI 负责 API 服务，Vue 负责界面渲染。数据库以 SQLite 举例。

1. 后端部分（FastAPI）

目录结构建议：

Code

backend/
├── app/
│   ├── main.py
│   ├── models.py
│   ├── schemas.py
│   ├── crud.py
│   ├── database.py
│   └── api/
│       └── endpoints.py
├── requirements.txt

1.1 requirements.txt

txt

fastapi
uvicorn
sqlalchemy
pydantic
aiofiles
python-multipart

1.2 database.py

Python

from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker, declarative_base

SQLALCHEMY_DATABASE_URL = "sqlite:///./test.db"

engine = create_engine(
    SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}
)
SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)

Base = declarative_base()

1.3 models.py

Python

from sqlalchemy import Column, Integer, String
from .database import Base

class User(Base):
    __tablename__ = "users"
    id = Column(Integer, primary_key=True, index=True)
    username = Column(String, unique=True, index=True)
    email = Column(String, unique=True, index=True)

1.4 schemas.py

Python

from pydantic import BaseModel

class UserBase(BaseModel):
    username: str
    email: str

class UserCreate(UserBase):
    pass

class User(UserBase):
    id: int

    class Config:
        orm_mode = True

1.5 crud.py

Python

from sqlalchemy.orm import Session
from . import models