6. 仿豆瓣电影App（technical-architecture）

1. 架构设计

2. 技术描述

• 前端框架: React@18 + Redux ********** + Ant Design **********
• 初始化工具: vite-init
• 状态管理: Redux Toolkit 进行全局状态管理
• UI组件库: Ant Design Mobile 提供移动端组件
• 路由管理: React Router@6
• HTTP请求: Axios 处理API请求
• 后端: 使用第三方电影API（如豆瓣API或TMDB API）

3. 路由定义

4. 状态管理设计

4.1 Redux Store结构

interface RootState {
  movies: {
    nowPlaying: Movie[];
    comingSoon: Movie[];
    popular: Movie[];
    loading: boolean;
    error: string | null;
  };
  movieDetail: {
    current: MovieDetail | null;
    reviews: Review[];
    loading: boolean;
  };
  search: {
    results: Movie[];
    history: string[];
    loading: boolean;
  };
  favorites: {
    items: Movie[];
    loading: boolean;
  };
  user: {
    isLoggedIn: boolean;
    profile: UserProfile | null;
  };
}

4.2 核心API接口

获取正在热映电影

GET /api/movies/now-playing

请求参数：

响应数据：

{
  "data": [
    {
      "id": 123,
      "title": "电影名称",
      "poster": "海报URL",
      "rating": 8.5,
      "genres": ["剧情", "爱情"],
      "releaseDate": "2024-01-01"
    }
  ],
  "total": 100,
  "page": 1
}

获取电影详情

GET /api/movies/:id

响应数据：

{
  "id": 123,
  "title": "电影名称",
  "originalTitle": "Original Title",
  "poster": "海报URL",
  "backdrop": "背景图URL",
  "rating": 8.5,
  "voteCount": 10000,
  "genres": ["剧情", "爱情"],
  "runtime": 120,
  "releaseDate": "2024-01-01",
  "overview": "剧情简介...",
  "directors": ["导演姓名"],
  "cast": ["演员1", "演员2"],
  "trailer": "预告片URL"
}

搜索电影

GET /api/movies/search

请求参数：

5. 组件架构

5.1 核心组件结构

src/
├── components/           # 通用组件
│   ├── MovieCard/       # 电影卡片组件
│   ├── Rating/          # 评分组件
│   ├── SearchBar/       # 搜索栏组件
│   └── BottomNav/       # 底部导航组件
├── pages/               # 页面组件
│   ├── MovieHome/       # 电影首页
│   ├── NowPlaying/      # 正在热映
│   ├── MovieDetail/     # 电影详情
│   ├── SearchPage/      # 搜索页面
│   └── MyFavorites/     # 我的收藏
├── store/               # Redux状态管理
│   ├── slices/          # 状态切片
│   │   ├── moviesSlice.ts
│   │   ├── searchSlice.ts
│   │   └── favoritesSlice.ts
│   └── store.ts         # Store配置
├── services/            # API服务
│   ├── movieService.ts  # 电影相关API
│   └── userService.ts   # 用户相关API
└── utils/               # 工具函数
    ├── request.ts       # HTTP请求封装
    └── storage.ts       # 本地存储工具

5.2 组件通信流程

graph TD
    A[页面组件] --> B[Redux Action]
    B --> C[Redux Thunk]
    C --> D[API服务]
    D --> E[外部API]
    E --> F[返回数据]
    F --> G[Redux Reducer]
    G --> H[更新Store]
    H --> I[组件重新渲染]

6. 数据模型

6.1 电影数据模型

interface Movie {
  id: number;
  title: string;
  originalTitle: string;
  poster: string;
  backdrop: string;
  rating: number;
  voteCount: number;
  genres: string[];
  runtime: number;
  releaseDate: string;
  overview: string;
}

interface MovieDetail extends Movie {
  directors: string[];
  cast: string[];
  trailer: string;
  images: string[];
}

6.2 影评数据模型

interface Review {
  id: number;
  movieId: number;
  userId: number;
  userName: string;
  userAvatar: string;
  rating: number;
  content: string;
  createTime: string;
  usefulCount: number;
}

6.3 用户数据模型

interface UserProfile {
  id: number;
  name: string;
  avatar: string;
  joinDate: string;
  favoriteCount: number;
  reviewCount: number;
}

7. 性能优化

7.1 优化策略

• 图片懒加载: 使用Intersection Observer实现图片懒加载
• 虚拟滚动: 长列表使用虚拟滚动优化性能
• 数据缓存: Redux持久化存储，减少重复API请求
• 组件懒加载: 路由级别代码分割，按需加载页面组件
• 防抖节流: 搜索输入防抖，滚动事件节流

7.2 缓存策略

// 本地存储键值定义
const STORAGE_KEYS = {
  FAVORITES: 'douban_movie_favorites',
  SEARCH_HISTORY: 'douban_movie_search_history',
  USER_PROFILE: 'douban_movie_user_profile'
};