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