Author: github.com/Yangfan2016 Source: github.com/Yangfan2016… Protocol: MIT

There’s also the electron versiondouban-movie-electron, currently under construction 👷…

preface

React-hooks: React-hooks: React-hooks: React-hooks: React-hooks: React-hooks: React-hooks

design

Douban movie master site UI style is not very good (douban, don’t call me 😂), may be they are mainly based on data information, may not pay too much attention to the style

Here, I mostly refer to the style structure of Tencent video

Develop model selection and technology stack

  • Because this time or practice, so I chose the popular development framework and tools

The following diagram shows the stack structure of the entire application

The front end

  • React
  • React-router
  • Typescript

UI frameworks and components

  • ant-design
  • react-lazy-load

Auxiliary tool

  • axios
  • lodash

The back-end

  • Koa

The application overview

Home page

  • banner
  • The historical record
  • Retrieve recommendations
  • Is hit
  • List of new
  • North American box office
  • Word of mouth of the Week
  • Top250
  • footer

Movie Details page

  • Movie ratings, basic information
  • still
  • Trailer (Click to open play virtual page)
  • comments
  • buzz

Search Details page

  • Search information list

Label Details page

  • Search information list

Sales page

  • Ranking chart
  • Geographical distribution chart
  • Movie label distribution chart
  • Home page
  • Movie Details page
  • Movie trailer play page
  • Search Details page
  • On page 404

Application is introduced

  • React + React-router implements single-page applications
  • Use ant-Design UI framework to improve development efficiency
  • Written in Typescript, type strict prompt, friendly and quick development
  • Write all components in react-hooks, largely ruled outthisThe interference of
  • React-lazy-load is used to load images lazily, reducing the first HTTP request and reducing the load on the server
  • Write skeleton screen components to improve user experience
  • React-router-config: react-router-config: react-router-config: react-router-config: react-router-config: react-router-config: react-router-config: react-router-config: react-router-config: react-router-config: react-router-config:
  • Use HTTP-proxy-Middleware to implement service proxies for cross-domain problems
  • Use LoDash’s anti-shake function to merge multiple requests from input boxes, reducing server load
  • Using the Koa framework as a back end is ES6 friendly and reduces the appearance of callback hell

conclusion

  • React-hooks for the first time, greatly reduce the number of lines of code and never worry againthisThe problem of
  • Typescript development, strict type hints, early detection of potential bugs, and standard Javascript writing
  • Prefer react component development based on JS
  • There are still some functions that have not been realized, and I don’t have much free time recently, so I will continue to complete the development later

Douban data API from the network, the application is only for learning to use, do not use for commercial purposes author: github.com/Yangfan2016 source: github.com/Yangfan2016… Protocol: MIT