Skip to content

Latest commit

 

History

History
122 lines (97 loc) · 4.34 KB

README.md

File metadata and controls

122 lines (97 loc) · 4.34 KB
Raw

电影评分应用

一个使用 React、Next.js、Redux Toolkit、TypeScript 和 Chakra UI 构建的电影评分应用。此项目旨在提供一个美观且功能齐全的用户界面，允许用户查看电影列表、查看电影详情以及对电影进行评分。应用还实现了弹性布局，无限滚动、防抖和节流，redux toolkit数据持久化等性能优化功能。

效果预览

列表页

Movie List

详情页

Movie Detail

功能特点

  • 弹性布局：电影列表采用网格布局，瀑布流式加载，网格宽度固定，列数根据屏幕宽度自适应，比如屏幕宽度1920的是7列, 1320的是5列
  • 滚动加载：随着页面滚动自动加载数据，todo:长列表使用react-window优化
  • 服务端渲染 (SSR)：首页前10个电影条目使用 SSR 加速初始加载
  • 防抖和节流：搜索框进行防抖处理，边输入边查询，提升用户体验，搜索时已忽略大小写及前后空格；查看详情按钮和评分按钮进行节流处理
  • Redux Toolkit：数据状态管理，详情页点击评分，列表页和详情页自动更新
  • 数据持久化：选用redux-persist支持数据持久化，刷新页面或者二次进入时上次的评分和搜索关键字仍然存在并回显
  • 图片优化：电影图片采用webp格式，减少图片大小，提升加载性能
  • 测试：使用 Jest 和 React Testing Library 进行单元测试和组件测试
  • 设计语言和数据：设计语言借鉴豆瓣电影，数据也从豆瓣电影抓取
  • 美观的 UI：使用 Chakra UI 设计的响应式和用户友好的界面

项目结构

src/
├── app/
│   ├── page.tsx                        # 首页
│   ├── layout.tsx                      # 页面布局
│   └── movie/[id]/page.tsx             # 电影详情页面
├── components/
│   ├── MovieList.tsx                   # 电影列表组件
│   ├── MovieDetail.tsx                 # 电影详情组件
│   ├── MovieCard.tsx                   # 电影列表项组件
│   ├── NoDataDisplay.tsx               # 无数据的空白页
│   ├── SearchBar.tsx                   # 搜索栏
│   └── StarRating.tsx                  # 给电影评分组件
├── store/
│   ├── movieSlice.ts                   # Redux 电影状态切片
│   └── store.ts                        # Redux 存储配置
├── utils/
│   ├── fetchMovies.ts                  # 电影数据拉取
│   └── formatedRating.ts               # 电影评分计算工具
├── data/
│   └── movies.json                     # 本地模拟的电影列表和详情数据
├── types/
│   └── index.ts                        # 类型定义
└── __tests__/
    └── MovieDetail.test.tsx            # 电影详情组件测试
    ├── MovieDetail.test.tsx            # 电影详情组件测试
    └── MovieCard.test.tsx              # 电影卡片组件测试

安装和运行

  1. 克隆仓库：

    git clone https://github.com/laughing001/movie-rating-web-app.git

  2. 进入项目目录：

    cd movie-rating-web-app

  3. 安装依赖：

    npm install

  4. 运行开发服务器：

    npm run dev

  5. 访问应用程序： 打开浏览器并访问 http://localhost:3000

构建和部署

  1. 构建应用：

    npm run build

  2. 部署到生产环境：

    npm run start

测试

  1. 运行测试：

    npm test

  2. 运行测试查看覆盖率：

    npm run test:coverage

贡献

欢迎贡献代码！请确保在提交 pull request 之前通过所有测试，并遵循代码风格。

  1. Fork 仓库。
  2. 创建一个新的分支 (git checkout -b feature/your-feature).
  3. 提交你的更改 (git commit -am 'Add new feature').
  4. 推送到分支 (git push origin feature/your-feature).
  5. 创建一个新的 pull request。

许可证

本项目使用 MIT 许可证 进行许可。

联系方式

如有任何问题或建议，请通过以下方式联系我：