Практическое руководство по проекту antd design pro+hooks+typescript

React.js

Прежде чем начать, вы можете сначала испытать этот проект:онлайн предварительный просмотр(пожалуйста, проверьте на ПК)

Исходный код прикреплен в конце статьи, пожалуйста, проверьте его.

Введение в стек технологий

  • react@16.8.6: Фреймворк MVVM для создания пользовательских интерфейсов.
  • umi@2.8.7: Подключаемая платформа корпоративных приложений React.
  • dva@2.4.1: Схема потока данных на основе redux и redux-saga.
  • antd@3.21.4: Библиотека компонентов пользовательского интерфейса React на основе системы проектирования Ant Design.
  • Ant Design Pro@v4: решение для серверной части и дизайна корпоративного уровня.
  • Axios@0.19.0: 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. Это все еще о блоках. Когда я добавляю блок, я вижу, что структура каталогов добавленного блока такая

    block
    На картинке видно, что он добавил утилиты, сервисы, модели и прочее вместе.Некоторые блоки даже имеют свои компоненты.Сначала я думал, что все в порядке, но после добавления нескольких блоков я обнаружил, что есть есть некоторые вещи в этом блоке и в том блоке, поэтому я думаю, что блок прост в использовании, но после его добавления необходимо организовать структуру каталогов.

  3. Как я уже говорил выше, форма этого проекта разработана с использованием UForm.В плане обработки событий она все же сильно отличается от формы antd.События в UForm нужно обрабатывать в предусмотренных им эффектах, непосредственно в самом бесполезно писать onChange в Filed, правильный способ его использования следующий

// 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)
      }
    }
  }}
/>
  1. В сведениях о продукте, поскольку классификация информации о продукте является двухуровневой, категория второго уровня является подкатегорией, полученной асинхронно в соответствии с идентификатором категории первого уровня. Сначала для разработки я использовал Cascader от antd.При добавлении продуктов проблем не возникло.Однако, когда я посмотрел на детали продукта, я обнаружил, что Cascader не может удовлетворить требование получения классификации второго уровня на основе первого -уровня и добавить его в указанную классификацию первого уровня.В свойстве дочерние компонент Выбрать использовался в дальнейшем для переразработки. Конкретный код выглядит следующим образом
<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>
  1. При использовании typescript для написания проектов вы часто будете сталкиваться с ошибками типа ts, как показано ниже:
    ts报错
    В настоящее время мы можем отследить источник ошибки, например здесьinterface.d.ts(53, 5), mac user option+щелчок, получите правильный путь к определению типа и импортируйте его в файл следующим образом, чтобы решить проблему:
import { UploadFile } from 'antd/lib/upload/interface'
const [uploadList, setUploadList] = useState<UploadFile[]>([])

наконец

Категории