博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React+Typescript 实现一个简单的豆瓣电影应用
阅读量:5741 次
发布时间:2019-06-18

本文共 1123 字,大约阅读时间需要 3 分钟。

作者:

源码:
协议:

前言

看掘金上有人写过 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 来源于网络,侵删,本应用仅供学习使用,请勿用于商业用途

作者:
源码:
协议:

转载于:https://juejin.im/post/5cebdc36e51d45775313814b

你可能感兴趣的文章
C++与MySQL的冲突
查看>>
siki学习之观察者模式笔记
查看>>
单元测试
查看>>
spring.net 继承
查看>>
ES6:模块简单解释
查看>>
JavaScript indexOf() 方法
查看>>
用Bootstrap写一份简历
查看>>
ZJU PAT 1023
查看>>
WMI远程访问问题解决方法
查看>>
从零开始学习IOS,(UILabel控件)详细使用和特殊效果
查看>>
Android开发历程_15(AppWidget的使用)
查看>>
阿花宝宝 Java 笔记 之 初识java
查看>>
7、设计模式-创建型模式-建造者模式
查看>>
Cesium官方教程11--建模人员必读
查看>>
我国古代的勾股定理
查看>>
Linux下的C编程实战
查看>>
[32期] html中部分代码与英语单词关系
查看>>
PHP安装环境,服务器不支持curl_exec的解决办法
查看>>
9.1(java学习笔记)正则表达式
查看>>
fopen打开文件失败的问题
查看>>