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

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

内容简介：本项目是一个高仿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移动端》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

人人都在晒，凭什么你出彩

【美】奥斯丁•克莱恩 / 张舜芬、徐立妍 / 北京联合出版公司 / 2015-4 / 38.00

1. 《纽约时报》、亚马逊畅销书排名第1位、好评如潮的创意营销书。《出版人周刊》称其在社交网络时代“在安全范围内提供了实用的自我营销策略”。 2. TED演讲者创意分享：晒对了，全世界都为你点赞：别人在朋友圈、微博晒自拍、晒孩子、晒吃喝，你来晒创意、晒灵感、晒工作、晒收获，发出自己的声音，找到伙伴，机会也会主动找上门！ 3. 10堂创意课+手绘涂鸦，所有人都能轻松读完、迅速学会的创意小......一起来看看《人人都在晒，凭什么你出彩》这本书的介绍吧!

码农工具