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鼓励一下做者吧👍