React16.6和Typescript高仿B站Web移动端

栏目: 服务器 · 发布时间: 5年前

内容简介:本项目是一个高仿B站移动端项目,基于我之前搭建过的SSR服务端渲染模板开发,开发的初衷是想使用此模板进行实战,实战后才能说明模板的可靠性。前端大部分都是页面展示,基本上没什么可仿的,看多了就会觉得腻,就选了B站,核心功能在于视频播放和弹幕,主要用于学习和交流,还请B站团队海涵。数据来源于B站,我写了一个后端服务做接口代理,源码和预览地址在最后,接口部分不开源服务端渲染相关链接:1.项目搭建本项目使用了

本项目是一个高仿B站移动端项目,基于我之前搭建过的SSR服务端渲染模板开发,开发的初衷是想使用此模板进行实战,实战后才能说明模板的可靠性。前端大部分都是页面展示,基本上没什么可仿的,看多了就会觉得腻,就选了B站,核心功能在于视频播放和弹幕,主要用于学习和交流,还请B站团队海涵。数据来源于B站,我写了一个后端服务做接口代理,源码和预览地址在最后,接口部分不开源

服务端渲染相关链接:1.项目搭建 2.前后端路由同构 3.代码分割和数据预取

技术点

  • react
  • react-router-dom
  • react-router-config
  • redux(数据管理)
  • redux-thunk(支持异步Action)
  • react-helmet(Head管理)
  • react-lazyload(图片懒加载)
  • loadable-components(代码分割)
  • cross-fetch(浏览器和node通用的Fetch API)
  • express(后端服务)

实现功能

  • 首页
  • 分类页
  • 排行榜
  • 搜索
  • 视频详情页
    1.视频播放
    2.弹幕
    3.推荐列表
    4.评论列表
  • UP主页
    1.详情
    2.投稿列表
  • 个人中心
    历史记录

说明

目录结构

React16.6和Typescript高仿B站Web移动端

React

本项目使用了 React16.3 新加入的Context API、createRef API和以下两个新的生命周期

另外在 16.6 版本中加入了contextType

接口

接口做了跨域限制,只允许源 http://localhost:3010 访问

图片和视频

图片使用了接口做代理,请求图片流然后返回,图片接口验证了请求头, http://localhost:3010 域下的页面均可访问。 视频和图片一样验证了请求头, http://localhost:3010 域下的页面均可访问,视频采用了断点下载,实现了点播,不需要等待视频全部加载完就可以跳到中间位置开始播放


以上所述就是小编给大家介绍的《React16.6和Typescript高仿B站Web移动端》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

超预期

超预期

[美] 莱昂纳多·因基莱里、迈卡·所罗门 / 杨波 / 后浪丨江西人民出版社 / 2017-11 / 45.00元

用户体验决定产品成败,只有超预期才能赢得好口碑! 互联网大佬一致推崇的打造爆款产品及服务的核心理念 ................... ※编辑推荐※ ☆ 超预期,才有用户体验,互联网大佬一致推崇的打造爆款产品及服务的核心理念 - 周鸿祎:“什么叫用户体验?超过用户预期才叫 体验!” - 雷军:“口碑的真谛是超越用户的期望值。” - 马化腾:“用户体验,......一起来看看 《超预期》 这本书的介绍吧!

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

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具