Before you get started, you can try out the project: online preview (check it out on PC)

The source code is attached at the end of the article.

Introduction to Technology Stack

Main directory structure

├ ─ ─ the configUmi configuration, including routing, build, etc├ ─ ─ the SRC# Develop home directory│ ├ ─ ─ assets# local static resources│ ├ ─ ─ the componentsBusiness Common Components│ │ ├ ─ ─ Authorized# permission authentication│ │ ├ ─ ─ the Exception# exception component│ │ ├ ─ ─ GlobalHeader# global header│ │ ├ ─ ─ HeaderDropdown# header dropdown option│ │ ├ ─ ─ PageLoading# page loading│ │ ├ ─ ─ SelectLang# Language selection│ │ └ ─ ─ StandardTable# Advanced form│ ├ ─ ─ global. Less# global style│ ├ ─ ─ global benchmark# global js│ ├ ─ ─ layoutsCommon layout components for pages│ ├ ─ ─ locales# Internationalized language pack│ ├ ─ ─ modelsGlobal model #│ │ ├ ─ ─ the ts# User-relevant model│ │ ├ ─ ─ the connect. Which s# model associated type definitions│ ├ ─ ─ pages# page│ │ ├ ─ ─ Authorized. TSX# permission filtering│ │ ├ ─ ─ the ExceptionError page: 404 403 500│ │ ├ ─ ─ the Home# page│ │ ├ ─ ─ the Product# Product list, product classification│ │ ├ ─ ─ the Account# Login page│ │ └ ─ ─ the User# user list│ ├ ─ ─ services# API interface│ └ ─ ─ utils# Common methods
Copy the code

Project introduction

As a background management system project based on ANTD-Design-Pro and React hooks, this project made use of the functions provided by ANTD-Design-Pro, such as permission authentication, configured routing, page layout components, breadcrumbs, and completed the development of login, home page, product, and user modules. Personally, I felt uncomfortable using the forms provided by ANTD, so I found UForm and developed the product editing module with UForm more efficiently.

The pit of tread

  1. Antd-design-pro V4 version, the official more recommended to use the block scheme to add pages, but according to the block, I found that there is no response for a long time, online surfing found that there are many people with this problem. Umi block add path/to/ local address –path=/ page target address, e.g. Umi block add/Users/void/Documents/WWW/learn/pro – blocks/ListBasicList – path = / user/list.

  2. Again, it’s about blocks. When I add a block, I can see that the directory structure of the added block looks like this

    As you can see from the picture, it adds utils, Services, Models, less all at once. Some blocks even have their own components. At first I thought I was ok with that, but after adding a few blocks, I realized that there are some things in this block, there are some in that block. So I think blocks work well, but it’s also worth cleaning up the directory structure once they’re added.

  3. As I mentioned above, the form of this project is developed by using UForm, which is very different from ANTD form in dealing with events. Events in UForm need to be processed in the effects provided by IT. Filed directly, for example onChange, is useless

<SchemaForm effects={($)=>{$("onFieldChange").subscribe((fieldState)=>{})
    $("onFormInit").subscribe((formState)=>{})
    $("onFormMount").subscribe((formState)=>{})
    $("onFormReset").subscribe((formState)=>{})
    $("onFormSubmit"). The subscribe ((formState) = > {}))} / > / / in the Field to monitor the < Field title ="First class classification"
  enum={categoryParentList}
  type="string"
  name="parentCategoryId"
  required
  x-effect={() => {
    return {
      onChange(categoryId: number) {
        getCategoryList(categoryId)
      }
    }
  }}
/>
Copy the code
  1. In product details, the classification of product information is two-level, and the second-level classification is a subcategory asynchronously obtained according to the ID of the first-level classification. At the beginning, I used AntD’s Cascader for development. There was no problem when I added the product. However, when I checked the product details, I found that Cascader could not meet the requirements of obtaining the secondary classification according to the primary classification and adding it to the children attribute of the specified primary classification. Then use the Select component to re – develop. The specific code is as follows
<FormLayout inline={true}>
  <Field
    title="First class classification"
    enum={categoryParentList}
    type="string"
    name="parentCategoryId"
    required
    x-effect={() => {
      return {
        onChange(categoryId: number) {
          getCategoryList(categoryId)
        }
      }
    }}
   />
   {
    categoryList.length ? (
      <Field
        title="Secondary classification"
        enum={categoryList}
        type="string"
        name="categoryId"
        required
      />
    ) : null
 }
</FormLayout>
Copy the code
  1. When writing a typescript project, you often encounter ts type errors as shown in the following figure:

    At this point, we can trace the source of the error, such as hereinterface.d.ts(53, 5), MAC user option+ click to get the correct path for the type definition and import it into the file as follows to solve the problem:

import { UploadFile } from 'antd/lib/upload/interface'
const [uploadList, setUploadList] = useState<UploadFile[]>([])
Copy the code

The last

  • The backend interface is provided by the online project of the course “React16+React-Router4 Building enterprise E-commerce Backend Management System from Scratch”. I used NGINx as the proxy
  • Online preview (please view it on PC)
  • Github source address
  • If you find the article or project helpful, please encourage the author by leaving your valuable likes and stars 👍