作者:
源码: 协议:前言
看掘金上有人写过 React 高仿的豆瓣电影,我也准备尝试一下,顺便试试 React 新的编写风格 react-hooks
设计
豆瓣电影主站的 UI 样式不是很好看(豆瓣,不要打我 ?),可能是它们主要是以数据信息为主,可能在样式上没有太注重
这里,我大部分参照了腾讯视频的样式结构
开发选型与技术栈
- 技术选型 由于这次还是练手,所以就选择了流行的开发框架和工具
下图是整个应用的技术栈结构图
前端
- React
- React-router
- Typescript
UI 框架和组件
- ant-design
- react-lazy-load
辅助工具
- axios
- lodash
后端
- Koa
应用概览
首页
- banner
- 历史记录
- 检索建议
- 正在热映
- 新片榜
- 北美票房榜
- 一周口碑榜
- Top250
- footer
电影详情页
- 电影评分、基本信息
- 剧照
- 预告片(点击打开播放虚拟页)
- 评论
- 热评
搜索详情页
- 搜索信息列表
标签详情页
- 搜索信息列表
票房页
- 评分排行图表
- 地域分布图表
- 电影标签分布图表
- 首页
- 电影详情页
- 电影预告播放页
- 搜索详情页
- 404 页
应用介绍
- React + React-router 实现的单页面应用
- 使用 Ant-design UI 框架开发,提高开发效率
- 用 Typescript 编写,类型严格提示,友好快捷开发
- 全部用 React-hooks 编写组件,很大程度排除了
this
的干扰 - 使用 react-lazy-load 实现图片的懒加载,减少首次的 http 请求,减轻服务器负担
- 编写骨架屏组件,提升用户体验
- 改写 react-router 调用风格,类似 vue-router 的配置式开发(其实有一个现成的轮子 ,大家就不要造轮子了 ?,我是为了练习)
- 使用 http-proxy-middleware 实现服务代理,解决跨域问题
- 使用 lodash 的防抖函数,合并输入框的多次请求,减轻服务器负担
- 使用 Koa 框架作为后端,对 ES6 友好,减少回调地狱的出现
总结
- react-hooks 的初次体验,大大减少了编码行数,再也不用担心
this
的问题 - Typescript 开发,严格的类型提示,及早发现潜在 bug 和规范 Javascript 的编写
- 更加喜欢 react 的以 js 为主的组件式开发
- 还有一部分功能没有实现,最近的空余时间不多,之后继续开发完成
豆瓣数据 api 来源于网络,侵删,本应用仅供学习使用,请勿用于商业用途
作者: 源码: 协议: