antd design pro+hooks+typescript項目實戰指南

開始以前，你能夠先體驗一下這個項目：在線預覽(請在PC端查看)

源碼附在文章末尾, 注意查收。

技術棧簡介

• react@16.8.6 ：用於構建用戶界面的 MVVM 框架
• umi@2.8.7： 可插拔的企業級 react 應用框架
• dva@2.4.1： 基於 redux 和 redux-saga 的數據流方案
• antd@3.21.4：基於 Ant Design 設計體系的 React UI 組件庫
• Ant Design Pro@v4：一個企業級中後臺前端/設計解決方案
• Axios@0.19.0：一個基於 promise 的 HTTP 庫
• UForm@0.3.10：中後臺領域的表單解決方案
• typescript@3.5.3：Javascript的超集

主要目錄結構

├── config                       # umi 配置，包含路由，構建等配置
├── src													 # 開發主目錄
│   ├── assets                   # 本地靜態資源
│   ├── components               # 業務通用組件
│   │   ├── Authorized           # 權限認證
│   │   ├── Exception            # 異常組件
│   │   ├── GlobalHeader         # 全局頭部
│   │   ├── HeaderDropdown       # 頭部下拉選項
│   │   ├── PageLoading          # 頁面加載
│   │   ├── SelectLang           # 語言選擇
│   │   └── StandardTable        # 高級表格
│   ├── global.less              # 全局樣式
│   ├── global.tsx               # 全局js
│   ├── layouts                  # 頁面通用佈局組件
│   ├── locales                  # 國際化語言包
│   ├── models                   # 全局model
│   │   ├── account.ts           # 用戶相關model
│   │   ├── connect.d.ts         # model相關類型定義
│   ├── pages                    # 頁面
│   │   ├── Authorized.tsx       # 權限過濾
│   │   ├── Exception            # 錯誤頁面：404 403 500
│   │   ├── Home                 # 首頁
│   │   ├── Product              # 產品列表、產品分類
│   │   ├── Account              # 登陸頁面
│   │   └── User                 # 用戶列表
│   ├── services                 # api接口
│   └── utils                    # 通用方法
複製代碼

項目簡介

作爲一個基於antd-design-pro和react hooks打造的後臺管理系統項目，該項目利用了antd-design-pro提供的權限認證、配置化路由、頁面佈局組件、麪包屑等功能，完成了登陸、首頁、產品、用戶幾大模塊的開發。因爲我的感受antd提供的表單使用起來讓我感受不是很舒服，由此找到了UForm，使用UForm更高效的開發了產品編輯模塊。

踩過的坑

1. antd-design-pro v4這個版本，官方更加推薦使用區塊的方案來添加頁面，可是按照區塊的時候，我發現等了很久都沒有反應，網上衝浪發現有這個問題的人還很多。我最後的解決方案是：直接把pro-block整個倉庫下載到本地，而後umi block add path/to/本地地址 --path=/頁面目標地址，例：umi block add /Users/void/Documents/www/learn/pro-blocks/ListBasicList --path=/user/list。

2. 仍是跟區塊有關。當我添加一個區塊的時候，能夠看到添加進來的區塊的目錄結構是這樣的

   

   從圖中能夠看到它把utils、services、models、less一古腦兒的添加進去了，有些區塊甚至還有本身的components，一開始我以爲就這樣也沒事，可是添加了幾個區塊以後，我發現，有些東西這個區塊有，那個區塊也有，因此我以爲區塊好用，可是添加進來後，整理一下目錄結構還有頗有必要的。

3. 上面我說過，該項目的表單使用了UForm進行開發，在處理事件上，他跟antd的form仍是有很大的區別的，UForm中的事件須要在他提供的effects中去處理的，直接在Filed上寫例如onChange是沒有用的，正確使用方式以下

// SchemaForm中監聽
<SchemaForm
  effects={($)=>{
    $("onFieldChange").subscribe((fieldState)=>{})
    $("onFormInit").subscribe((formState)=>{})
    $("onFormMount").subscribe((formState)=>{})
    $("onFormReset").subscribe((formState)=>{})
    $("onFormSubmit").subscribe((formState)=>{})
  )}
/>
// Field中監聽
<Field
  title="一級分類"
  enum={categoryParentList}
  type="string"
  name="parentCategoryId"
  required
  x-effect={() => {
    return {
      onChange(categoryId: number) {
        getCategoryList(categoryId)
      }
    }
  }}
/>
複製代碼

4. 在產品詳情中，因爲產品信息的分類是兩級的，二級分類是根據一級分類的ID去異步獲取到的子類目。一開始我使用antd的Cascader進行開發，在添加產品的時候，倒也沒有問題，然而，在查看產品詳情的時候，卻發現Cascader沒法知足根據一級分類獲取二級分類並添加到指定一級分類children屬性中，後面又改用了Select這個組件來從新開發。具體代碼以下

<FormLayout inline={true}>
  <Field
    title="一級分類"
    enum={categoryParentList}
    type="string"
    name="parentCategoryId"
    required
    x-effect={() => {
      return {
        onChange(categoryId: number) {
          getCategoryList(categoryId)
        }
      }
    }}
   />
   {
    categoryList.length ? (
      <Field
        title="二級分類"
        enum={categoryList}
        type="string"
        name="categoryId"
        required
      />
    ) : null
 }
</FormLayout>
複製代碼

5. 在使用typescript寫項目的時候，會常常遇到ts的類型報錯，以下圖：

   

   這個時候，咱們能夠追蹤到報錯的根源，例如這裏的interface.d.ts(53, 5)，mac用戶option+單擊就能夠，獲得類型定義的正確路徑並按以下所示引入到文件中就能夠解決問題：

import { UploadFile } from 'antd/lib/upload/interface'
const [uploadList, setUploadList] = useState<UploadFile[]>([])
複製代碼

最後

• 後臺接口是《React16+React-Router4 從零打造企業級電商後臺管理系統》課程上線項目提供的，我利用nginx作了代理
• 在線預覽（請在PC端查看）
• github源碼地址
• 若是以爲文章和項目對你有幫助的話，那就留下你寶貴的贊和star鼓勵一下做者吧👍