React family barrel project

Time:2020-11-26

Opening

In my spare time, I did a react project, which is a finished product. It is relatively simple and has many defects. The directory structure is quite simple. You can’t run without a database. If you want to run, delete the part of express calling database and write dead data.

ak47

This integrated react family bucket can be run directly or used in production environment directly.
https://github.com/xuya227939/ak47

Source code

https://github.com/bbww/sight.git

Preview address

It’s best to experience with Google explorer, other browsers are not tested.
https://downfuture.com

Technology stack

react + redux + saga + router + es6 + node.js + webpack + mysql

function

  • Simple login, registration and password modification
  • Users can praise and collect
  • The personal center can upload head pictures and pictures (up to three pictures can be uploaded), which is not compressed temporarily.
  • Personal center can change password and log out

directory structure

React family barrel project

common method

fetch

Encapsulate fetch request and report error uniformly.

function request({ method, options, callback }) {
  options.mode = "cors";
  if(!options.sign) {
    options.headers = {
      'Content-Type': 'application/json'
    };
    if(!(options.method === 'GET' || options.method === 'DELETE')) {
      options.body = JSON.stringify(options.body);
    }
  }
  options.credentials = 'include';
  return fetch(getApi + method, options )
    .then(checkStatus)
    .then(parseJSON)
    .then((data) => {
      return data;
    }).catch((err) => {
      message.config({
        top: 24,
        duration: 1,
        maxCount: 3,
      });
      message.error ('Send fetch failed '+ JSON.stringify (ERR) + ', method name:' + method);
    });

The interface conforms to restful design

React family barrel project

util.js

Tool class JS

router.js

All routing configurations are in this JS

epilogue

Site building steps, in my blog to share out. Welcome to discuss, only introduce the implementation, do not explain the meaning of the relevant code.
https://github.com/xuya227939/blog

Recommended Today

Second week of summer vacation (improve code and summarize problems)

preface: This week, we mainly reviewed and improved the unfinished refactoring tasks. In this process, we also encountered problems. We summarized them. At the same time, through continuous practice, we have a further understanding of the code of the tutorial. 1 Taking the management of teachers as an example, this paper analyzes the relationship between […]