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

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

内容简介：本项目是一个高仿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.投稿列表
个人中心
历史记录

说明

目录结构

React

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

另外在 16.6 版本中加入了contextType

接口

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

图片和视频

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

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

查看所有标签

猜你喜欢:

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

码农书籍

Head First HTML and CSS

Elisabeth Robson、Eric Freeman / O'Reilly Media / 2012-9-8 / USD 39.99

Tired of reading HTML books that only make sense after you're an expert? Then it's about time you picked up Head First HTML and really learned HTML. You want to learn HTML so you can finally create th......一起来看看《Head First HTML and CSS》这本书的介绍吧!

码农工具