This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

The previous two articles talked about the basic configuration and the five important modules of Ant Design Pro V5. This article will be easier to talk about the workflow of V5. If you are new to V5, I believe this article will help you.

V5 related technology stack

The technology used in Ant Design Pro V5 is relatively new, React (Hook functional programming) + TS + Ant Design + ProComponents + umi + DVA + Ant Design Chart, etc

React

If you’re not familiar with it, check out the React documentation, which is a prerequisite for this tutorial. Some friends who have learned Vue say that it is difficult to get started, not as simple and efficient as Vue. In fact, I personally disagree with this point, Vue is suitable for small projects with low code reuse. React is hard to get back to, but once you get the hang of it, you can’t put it down.

React Hook

Hook is a new feature in React 16.8. It lets you use state and other React features without having to write a class. React Hook Functional components can also have state and are much simpler to use than class components

dva

Dva is a data flow solution based on Redux and Redux-Saga. In order to simplify the development experience, DVA also has additional built-in React-Router and FETCH, so it can also be understood as a lightweight application framework. In short, Dva is a high level of packaging based on Mobx and Redux, making it easier and more efficient to use. Please see: Dva documentation

Umi@3

Umi is the bottom front-end framework of Ant Financial, which has directly or indirectly served 600+ applications. It is a pluggable enterprise react application framework. Umi is route-based, supports next-js contract routing, and various advanced routing functions, which are extended to support route-level load on demand. In short, with Umi, routing becomes so efficient and simple. See: Umi documentation

TypeScript

YpeScript is a superset of javascript. TypeScript not only contains javascript syntax, but also provides static type checking and improved code prompts. Any existing JavaScript program is a legitimate TypeScript program that can be easily learned for a better development experience. Simply put, TS is code inspection, which is super easy to use and makes code more standardized and easier to maintain

Interested students can take a look at the relevant documentation first, so that they can deepen their understanding of V5

File structure

In the directory structure, I recommend adding a public page for public pages

├─ Config # umi, Including Route, ├─ Public │ ├─ ├─ SRC │ ├─ Assets │ ├─ commonPages # Public page │ ├─ SRC │ ├─ ├─ Public page │ ├─ SRC │ ├─ ├─ commonPages # Public page │ # ├ ─ ─ components business common component │ ├ ─ ─ e2e # integration test cases │ ├ ─ ─ layouts # general layout │ ├ ─ ─ models # global dva model │ ├ ─ ─ pages # │ entrance and common business page template ├ ─ ─ services # backend interface service │ ├ ─ ─ utils # tool library │ ├ ─ ─ locales # internationalized resource │ ├ ─ ─ global. Less global style # │ └ ─ ─ global. Global JS ts # ├ ─ ─ tests ├─ Readme.md ├─ package.jsonCopy the code

The page code structure is recommended, and it is recommended to separate the interface from ~

SRC ├── Exercises ─ pages├ ─ ─ the Welcome / / routing component should not be contain other routing component, based on the convention can clearly distinguish the routing component and the routing component | ├ ─ ─ the components / / for complex page could make deeper tissue, But suggest that not more than three layers of | ├ ─ ─ index. The TSX / / the code page components | └ ─ ─ index. The less / / page style | └ ─ ─ interface. The complex, which s / / page Take out your ts | alone └ ─ ─ services. The ts / / interface | └ ─ ─ the mock. Ts / / analog data, most don't needCopy the code

V5 page execution order

1. Perform the operation first

Let’s start with the/SCR /app.tsx code

The page opens (which will happen on any page), executes app. TSX’s getInitialState, and then goes to queryCurrentUser, where it checks whether access exists and raises an error if it doesn’t. Send the status code 401 and it will go to the login page, otherwise it will stay on the current page

2. The login page is displayed

The login page is displayed. When you enter the account password, you go to the fetchUserInfo method, which stores the functions needed to log in to the interface in the first place

Note that the page in here does not execute the getInitialState function, so the method to get the user information is executed again

3. Switch pages

The page we made will be put on the browser, and we need login information to open it. However, the stored information will be changed due to many external reasons, such as clearing the cache and invalid login information due to a long time, etc. Then how to judge in V5?

It’s going to put the login information in the initialState, which we need in the onPageChange method in app TSX

This method is triggered by page conversion, which also checks whether the user information exists. If not, the login screen is redirected

other

What did @ do

We can see this sort of introduction at random

import Footer from '@/components/Footer';
Copy the code

So what’s at sign for?

In fact, when we introduce absolute paths and relative paths in projects, we usually put components under the Component module and configuration under the utils module, so the @ is actually equivalent to the absolute path, which is the function of/SRC, which is an alias

To help me introduce more quickly, see webpack alias Settings for details

So far, the three articles about Ant Design Pro V5 are completed. The above articles are just my opinions. If there is anything wrong, please leave a comment and thank you.

For the basic configuration of Ant Design Pro V5, see Building your Own Ant Design Pro V5.

Ant Design Pro V5 (2)