前言
本專案是一個高仿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手機沒有這樣的問題
預覽
預覽地址：barrage.codemcx.work
二維碼：
原始碼
希望大家可以給個Star，謝謝啦～