Note: If you

  • Browsers that support IE 8 or later are required
  • Need to support React below React 16.8.0
  • You need to run in an environment below Node 10
  • There is a strong need and desire for webPack customization
  • You need to select a different routing scheme

Please do not choose UMI for development

0, preface

  • Use UMi3 and ANTD PRO5 to implement the full stack back end management system from zero

0-1. Technology stack

Front-end: TS, React, React Hooks, UMi3, ANTD-PRO5 Back-end: Express, mongodb, JWT

0-2. Functions implemented

  • Back-end user authentication
  • Front-end Permission Management
  • User Password Encryption
  • Encapsulate a set of general popover form components, to achieve new, modify, details function
  • User login registration (the backend needs to add a user login information for the first time)

  • The backend uses expressJWT to implement interface authentication and whitelist addition
  • Back-end logging
  • The back-end encapsulation method processes the returned information in a unified manner
  • To achieve the list of filtering, sorting, deleting, batch deleting
  • Realize new, modify, view details

1. Initialize the front-end project


yarn create umi myapp
npm i 
npm run dev

Copy the code

1. Set proxy under config


  dev: {
    '/api/': {
      target: "http://localhost:3000",
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },


Copy the code

2, login

Example Change the SRC /service/login.ts interface to/API /user/login


export async function fakeAccountLogin(params: LoginParamsType) {
  return request<API.LoginStateType>('/api/user/login', {
    method: 'POST'.data: params,
  });
}


Copy the code

Token storage pages/user/login/index. The TSX

localStorage.setItem('token' , msg.token)

Copy the code

The use of token services/user. Ts

export async function queryCurrent() {
  return request<API.CurrentUser>('/api/currentUser'.headers: {
      Authorization :  'Bearer ' + `The ${localStorage.getItem('token')}`}}Copy the code

Each request carries token SRC /app.tsx


export const request: RequestConfig = {
  errorHandler,
  headers: { 
    Authorization :  'Bearer ' + `The ${localStorage.getItem('token')}`}};Copy the code

Exit RightContent/AvatarDropdown TSX

 localStorage.removeItem('token')

Copy the code

3. Reference documents for PRO5

Procomponents. Ant. The design/components /…

4. Implement a user management

Summary: In general, using UMI and ANTD facilitates our development process, eliminating the need for routing and styling, and allowing us to focus on developing the business logic