Use antd pro and umi3 to implement a full-stack middle and background management system

Note: if you

• A browser that supports IE 8 or lower is required
• Need to support React below React 16.8.0
• Need to run in an environment below Node 10
• Strong webpack customization requirements and subjective willingness
• Need to choose a different routing scheme

Please do not choose umi to develop

0. Preface

• Using umi3 and antd pro5 to implement a full-stack mid- and background management system from scratch

0-1, involving technology stack

Frontend: TS, React, React Hooks, umi3, antd-pro5 Backend: express, mongodb, jwt

---

0-2. Functions implemented

• Back-end user authentication
• Front-end rights management
• User password encryption
• Encapsulate a set of general pop-up form components to realize the functions of creating, modifying, and detailing
• User login registration (for the first time, the backend needs to add a user login information by itself)

• The backend implements interface authentication and whitelisting through expressJWT
• Backend log function
• The back-end encapsulation method uniformly processes the returned information
• Filter, sort, delete, and batch delete lists
• Create, modify and view details

---

1. Initialize the front-end project

yarn create umi myapp
npm i 
npm run dev

复制代码

1. Set the proxy proxy under config

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


复制代码

2. Login

Modify 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,
  });
}


复制代码

Store token pages/user/login/index.tsx

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

复制代码

使用token services/user.ts

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

复制代码

Bring token src/app.tsx to every request

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

复制代码

Exit RightContent/AvatarDropdown.tsx

 localStorage.removeItem('token')

复制代码

3. Pro5 reference documentation

procomponents.ant.design/components/…

4. Implement a user management

Summary: In general, the use of umi and antd facilitates our development process, saves the energy of routing and style consumption, and can fully devote ourselves to developing business logic.