React+Typescript 实现一个简单的豆瓣电影应用

栏目: IOS · Android · 发布时间: 5年前

内容简介:看掘金上有人写过 React 高仿的豆瓣电影,我也准备尝试一下,顺便试试 React 新的编写风格 react-hooks豆瓣电影主站的 UI 样式不是很好看(豆瓣,不要打我 :joy:),可能是它们主要是以数据信息为主,可能在样式上没有太注重这里,我大部分参照了腾讯视频的样式结构

看掘金上有人写过 React 高仿的豆瓣电影,我也准备尝试一下,顺便试试 React 新的编写风格 react-hooks

设计

豆瓣电影主站的 UI 样式不是很好看(豆瓣,不要打我 :joy:),可能是它们主要是以数据信息为主,可能在样式上没有太注重

这里,我大部分参照了腾讯视频的样式结构

开发选型与技术栈

  • 技术选型 由于这次还是练手,所以就选择了流行的开发框架和工具

下图是整个应用的技术栈结构图

React+Typescript 实现一个简单的豆瓣电影应用

前端

  • React
  • React-router
  • Typescript

UI 框架和组件

  • ant-design
  • react-lazy-load

辅助工具

  • axios
  • lodash

后端

  • Koa

应用概览

首页

  • banner
  • 历史记录
  • 检索建议
  • 正在热映
  • 新片榜
  • 北美票房榜
  • 一周口碑榜
  • Top250
  • footer

电影详情页

  • 电影评分、基本信息
  • 剧照
  • 预告片(点击打开播放虚拟页)
  • 评论
  • 热评

搜索详情页

  • 搜索信息列表

标签详情页

  • 搜索信息列表

票房页

  • 评分排行图表
  • 地域分布图表
  • 电影标签分布图表
  • 首页
    React+Typescript 实现一个简单的豆瓣电影应用
  • 电影详情页
    React+Typescript 实现一个简单的豆瓣电影应用
  • 电影预告播放页
    React+Typescript 实现一个简单的豆瓣电影应用
  • 搜索详情页
    React+Typescript 实现一个简单的豆瓣电影应用
  • 404 页
    React+Typescript 实现一个简单的豆瓣电影应用

应用介绍

  • React + React-router 实现的单页面应用
  • 使用 Ant-design UI 框架开发,提高开发效率
  • 用 Typescript 编写,类型严格提示,友好快捷开发
  • 全部用 React-hooks 编写组件,很大程度排除了 this 的干扰
  • 使用 react-lazy-load 实现图片的懒加载,减少首次的 http 请求,减轻服务器负担
  • 编写骨架屏组件,提升用户体验
  • 改写 react-router 调用风格,类似 vue-router 的配置式开发(其实有一个现成的轮子react-router-config ,大家就不要造轮子了 :joy:,我是为了练习)
  • 使用 http-proxy-middleware 实现服务代理,解决跨域问题
  • 使用 lodash 的防抖函数,合并输入框的多次请求,减轻服务器负担
  • 使用 Koa 框架作为后端,对 ES6 友好,减少回调地狱的出现

总结

this

豆瓣数据 api 来源于网络,侵删,本应用仅供学习使用,请勿用于商业用途

作者: github.com/Yangfan2016

源码: github.com/Yangfan2016…

协议: MIT


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Processing语言权威指南

Processing语言权威指南

Casey Reas、Ben Fry / 张静 / 电子工业出版社 / 2013-10-1 / 139.00

本书介绍了可视化艺术中的计算机编程概念,对开源编程语言Processing作了非常详尽的阐述。学生、艺术家、设计师、建筑师、研究者,以及任何想编程实现绘画、动画和互动的人都可以使用它。书中的大部分章节是短小的单元,介绍Processing的语法和基本概念(变量、函数、面向对象编程),涵盖与软件相关的图像处理、绘制,并且给出了大量简短的原型程序,配以相应的过程图像与注释。书中还有一些访谈文章,与动画......一起来看看 《Processing语言权威指南》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试