前言
本项目是一个高仿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
域下的页面均可访问,视频采用了断点下载,实现了点播,不需要等待视频全部加载完就可以跳到中间位置开始播放
弹幕
安卓浏览器中会对HTML5的video进行劫持,总是在最上层播放,并加上自己的控件,并且无法调节层级,在安卓手机中弹幕会无法正常观看,IOS手机没有这样的问题
屏幕截图
源码
希望大家可以给个Star,谢谢啦~