preface
This project is a highly imitation B station mobile terminal project. It is based on the DEVELOPMENT of SSR server rendering template that I built before. The original intention of development is to use this template for actual combat, and only after actual combat can the reliability of the template be demonstrated. Most of the front end is page display, basically nothing to imitate, watching too much will feel tired, so I choose STATION B, the core function is video playback and bullet screen, mainly for learning and communication, please forgive the team of station B. Data from B station, I wrote a back-end service to do interface proxy, source code and preview address at the end
Server rendering links:
1. Project construction 2. Isomorphism of routes at the front and back ends 3
Technical point
- react
- react-router-dom
- react-router-config
- Redux (Data Management)
- Redux-thunk (supports asynchronous Action)
- The react – helmet (Head management)
- React-lazyLoad
- Loadable – Components (Code split)
- Cross-fetch (Fetch API common to browsers and Nodes)
- Express (Back-end Service)
Realize the function
- Home page
- Category pages
- list
- search
- Video details 1. Video playback 2. Bullet screen 3. Recommendation list 4
- UP homepage 1. Details 2. Submission list
- Personal center history
instructions
The directory structure
React
This project uses the new Context API added to React16.3, the createRef API, and the following two new life cycles
- static getDerivedStateFromProps(props, state)
- getSnapshotBeforeUpdate(prevProps, prevState)
ContextType was also added in version 16.6
interface
The interface is cross-domain restricted, allowing only the source http://localhost:3010 access, which can be modified
Pictures and videos
The image uses the interface as proxy, requests the image stream and then returns, the image interface verifies the request header, the page under http://localhost:3010 field can be accessed. The video and the picture verify the request header, the page under the http://localhost:3010 field can be accessed, the video adopts the breakpoint download, realize the on-demand, do not need to wait for the video load can jump to the middle position to start playing
barrage
Android browser will hijack the HTML5 video, always playing at the top and adding its own controls, and cannot adjust the level. In Android phones, bullet screen cannot be watched normally, but IOS phones do not have such problems
Screen capture
The source code
Github
Hope you can give a Star, thank you ~