前后端分离架构 + 项目架构设计

一句话：前后端分离是将前端和后端独立开发、部署的架构模式。项目架构设计是规划代码结构、模块划分、依赖关系的过程。

1. 前后端分离架构

1.1 什么是前后端分离？

graph TD

    A[前后端分离] --> B[前端独立]

    A --> C[后端独立]

    A --> D[API通信]

    A --> E[独立部署]

    style A fill:#e1f5fe

前后端分离：将前端和后端作为独立应用开发，通过API进行通信。

1.2 架构优势

优势	说明
开发效率	前后端并行开发
技术选型	前后端独立选择技术栈
部署灵活	独立部署，互不影响
扩展性	可独立扩展前端或后端

1.3 通信方式

graph LR

    A[前端] -->|HTTP/HTTPS| B[后端API]

    B -->|JSON数据| A

    style B fill:#e8f5e8

通信方式：

• RESTful API

• GraphQL

• WebSocket

• gRPC

2. 项目架构设计

2.1 分层架构

graph TD

    A[表现层] --> B[业务逻辑层]

    B --> C[数据访问层]

    C --> D[数据库]

    style A fill:#e1f5fe

    style B fill:#e8f5e8

    style C fill:#fff3e0

分层架构：

• 表现层：处理用户界面和请求

• 业务逻辑层：处理业务规则

• 数据访问层：处理数据存储

2.2 目录结构

 
project/
 
├── frontend/          # 前端代码
 
│   ├── src/
 
│   │   ├── components/  # 组件
 
│   │   ├── pages/       # 页面
 
│   │   ├── services/    # API服务
 
│   │   └── utils/       # 工具函数
 
│   └── package.json
 
├── backend/           # 后端代码
 
│   ├── app/
 
│   │   ├── api/         # API路由
 
│   │   ├── models/      # 数据模型
 
│   │   ├── services/    # 业务逻辑
 
│   │   └── utils/       # 工具函数
 
│   └── requirements.txt
 
├── docker-compose.yml # Docker配置
 
└── README.md
 

3. 实际案例

3.1 FastAPI + React项目

 
# docker-compose.yml
 
version: '3'
 
services:
 
  frontend:
 
    build: ./frontend
 
    ports:
 
      - "3000:3000"
 
    depends_on:
 
      - backend
 
  backend:
 
    build: ./backend
 
    ports:
 
      - "8000:8000"
 
    environment:
 
      - DATABASE_URL=postgresql://user:pass@db:5432/mydb
 
    depends_on:
 
      - db
 
  db:
 
    image: postgres:15
 
    environment:
 
      - POSTGRES_USER=user
 
      - POSTGRES_PASSWORD=pass
 
      - POSTGRES_DB=mydb
 
    volumes:
 
      - postgres_data:/var/lib/postgresql/data
 
volumes:
 
  postgres_data:
 

3.2 API设计

 
# FastAPI后端
 
from fastapi import FastAPI
 
from pydantic import BaseModel
 
app = FastAPI()
 
class UserCreate(BaseModel):
 
    name: str
 
    email: str
 
class UserResponse(BaseModel):
 
    id: int
 
    name: str
 
    email: str
 
@app.post("/api/users/", response_model=UserResponse)
 
async def create_user(user: UserCreate):
 
    # 创建用户逻辑
 
    return UserResponse(id=1, name=user.name, email=user.email)
 
@app.get("/api/users/{user_id}", response_model=UserResponse)
 
async def get_user(user_id: int):
 
    # 获取用户逻辑
 
    return UserResponse(id=user_id, name="Alice", email="alice@example.com")
 

3.3 React前端

 
// React前端
 
import { useState, useEffect } from 'react';
 
function UserList() {
 
    const [users, setUsers] = useState([]);
 
    useEffect(() => {
 
        fetch('/api/users/')
 
            .then(response => response.json())
 
            .then(data => setUsers(data));
 
    }, []);
 
    return (
 
        <div>
 
            <h1>Users</h1>
 
            <ul>
 
                {users.map(user => (
 
                    <li key={user.id}>{user.name}</li>
 
                ))}
 
            </ul>
 
        </div>
 
    );
 
}
 

4. 设计原则

4.1 SOLID原则

 
# 单一职责原则
 
class UserService:
 
    def create_user(self, user_data):
 
        # 只处理用户创建
 
        pass
 
# 开闭原则
 
class PaymentProcessor:
 
    def process(self, payment_method):
 
        # 对扩展开放，对修改关闭
 
        pass
 
# 里氏替换原则
 
class Animal:
 
    def speak(self):
 
        pass
 
class Dog(Animal):
 
    def speak(self):
 
        return "Woof!"
 

4.2 DRY原则

 
# 不要重复自己
 
def validate_email(email):
 
    # 邮箱验证逻辑
 
    pass
 
# 使用装饰器避免重复
 
def validate_user(func):
 
    def wrapper(user_data):
 
        validate_email(user_data['email'])
 
        return func(user_data)
 
    return wrapper
 

5. 常见坑点

1. API设计不一致

 
# /api/users/{id} (GET, PUT, DELETE)
 

2. 跨域问题

 
# 解决：配置CORS
 
from fastapi.middleware.cors import CORSMiddleware
 
app.add_middleware(
 
    CORSMiddleware,
 
    allow_origins=["http://localhost:3000"],
 
    allow_credentials=True,
 
    allow_methods=["*"],
 
    allow_headers=["*"],
 
)
 

核心要点

 
# 项目结构
 
project/
 
├── frontend/
 
├── backend/
 
├── docker-compose.yml
 
└── README.md
 
# API设计
 
GET /api/users/ - 获取用户列表
 
POST /api/users/ - 创建用户
 
GET /api/users/{id} - 获取用户
 
PUT /api/users/{id} - 更新用户
 
DELETE /api/users/{id} - 删除用户
 

速记卡（面试闪卡）

Q1：一句话讲清「前后端分离架构 + 项目架构设计」到底是什么？

A：前后端拆成独立应用靠 API 通信协作，项目架构则规划分层与目录结构。

Q2：题目核心 —— 怎么理解？

A：像餐厅前厅和后厨分开：各干各的，靠”点菜单”传话；英文 Front-end/Back-end Separation，通过 RESTful/GraphQL 等 API 通信。

Q3：思路拆解 —— 怎么理解？

A：如同盖楼分层：表现层管界面、业务层管规则、数据层管存储；英文 Layered Architecture 分层架构，前后端各自按模块划目录。

Q4：代码骨架 —— 怎么理解？

A：好比约定暗号：后端 FastAPI 用 Pydantic 定义请求响应模型，前端 fetch 调 /api/users；英文 CORS 解决跨域、REST 统一路由风格。

Q5：复杂度与实战 —— 怎么理解？

A：如同两家公司合租：独立部署互不影响，但 API 不一致、跨域是常见坑；英文 SOLID/DRY 原则指导模块划分避免重复。

Q6：核心速记主线有哪些？

• 分离：前后端独立开发部署，API（REST/GraphQL）通信

• 分层：表现层、业务层、数据访问层职责分明

• 案例：FastAPI+React，docker-compose 编排前后端与库

• 坑点：API 命名统一、配置 CORS 解决跨域

口诀

A：前后端分两家开

API传话不分家

分层职责划清楚

CORS跨域莫忘加

相关链接

• 📋 目录：00-技术全景

• 📚 学习清单：技术学习路线图 > 技术全景

• 🔗 FastAPI

• 🔗 React