前端初学者的Ant Design Pro V6总结（上）

Posted 2023-04-06 流水吾情

前端初学者的Ant Design Pro V6总结（上）

一、UI组件开发流程

1. () => 通用（异步）函数
2. useEmotionCss 定义CSS
3. useModel获取全局状态
4. useCallback 处理React合成事件
5. JSX 拆分组件
6. initiateState 中CurrentUser空值处理
7. initiateState 中其他值的空值处理
8. 定义JSX中所使用的配置信息
9. return JSX

二、默认Footer

参考资料：https://procomponents.ant.design/components/layout/#footer

可用于简易Footer，antd pro默认Footer

三、Mock

参考资料：https://umijs.org/docs/guides/mock

Umi 约定 /mock 目录下的所有文件为 Mock 文件，例如这样的目录结构：

.
├── mock
    ├── todos.ts
    ├── items.ts
    └── users.ts
└── src
    └── pages
        └── index.tsx

目前支持两种方式

字面量函数

export default 
  '/api/users': [
     id: 1, name: 'foo' ,
     id: 2, name: 'bar' 
  ],
  '/api/users/1':  id: 1, name: 'foo' ,

可以使用defineMock帮助声明mock

export default defineMock(
  "/api/users": [
     id: 1, name: "foo" ,
     id: 2, name: "bar" ,
  ],
  "/api/users/1":  id: 1, name: "foo" ,
  "GET /api/users/2": (req, res) => 
    res.status(200).json( id: 2, name: "bar" );
  ,
);

自定义函数

export default 
  'POST /api/users/create': (req, res) => 
    // 添加跨域请求头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end('ok');
  

关闭Mock

配置方式

// .umirc.ts
export default 
  mock: false,
;

环境变量方式（package.json）

MOCK=none umi dev

四、国际化

国际化字符串处理流程

参考资料：https://umijs.org/docs/max/i18n#useintl

const intl = useIntl(); // 国际化
const defaultMessage = intl.formatMessage(
  id: 'app.copyright.produced',
  defaultMessage: '蚂蚁集团体验技术部出品',
);

字符串定义

在locales > zh-CN / zh-CN 定义常量

五、基于Hooks的简易数据流

参考资料：https://umijs.org/docs/max/data-flow

antd pro v6使用useModel + useRequest管理简易数据流。

数据流插件将数据流分为Model（stoore、action）、useMode、useRequestl（处理副作用）配置使用达到数据流管理的目的。

定义Model

2. Model采用约定式目录结构，约定在src/models和src/pages/xxxx/models/
3. Model即命名空间，它可以划分数据流，src/models/count.ts命名空间即count，src/pages/pageA/model.ts命名空间即pageA.model。
4. src/models 目录下不支持目录嵌套定义 model
5. pages/xxx/models 下 model 定义支持嵌套定义
6. Model就是个自定义Hooks，它需要一个默认导出的函数
7. Model中可以使用useState，useEffect等其他的Hooks

// src/models/userModel.ts
import  useState  from 'react';
import  getUser  from '@/services/user';
 
export default () => 
  const [user, setUser] = useState();
  const [loading, setLoading] = useState(true);
 
  useEffect(() => 
    getUser().then((res) => 
      setUser(res);
      setLoading(false);
    );
  , []);
 
  return 
    user,
    loading,
  ;
;

8. 可以利用aHooks中的useRequest简化请求流程

// src/models/userModel.ts
import  useRequest  from 'ahooks';
import  getUser  from '@/services/user';
 
export default () => 
  const  data: user, loading: loading  = useRequest(async () => 
    const res = await getUser();
    if (res) 
      return res;
    
    return ;
  );
 
  return 
    user,
    loading,
  ;
;

使用Model

// src/components/Username/index.tsx
import  useModel  from 'umi';
 
export default () => 
  const  user, loading  = useModel('userModel');
 
  return (
    loading ? <></>: <div>user.username</div>
  );

性能优化

使用useModel第二个参数回调中的model可以过滤不需要的参数，避免组件重复渲染。

// src/components/CounterActions/index.tsx
import  useModel  from 'umi';
 
export default () => 
  const  add, minus  = useModel('counterModel', (model) => (
    add: model.increment,
    minus: model.decrement,
  ));
 
  return (
    <div>
      <button onClick=add>add by 1</button>
      <button onClick=minus>minus by 1</button>
    </div>
  );
;

InitialState

参考资料：https://pro.ant.design/zh-CN/config/runtime-api#getinitialstate

antd pro默认会创建一个初始数据InitialState。

app.tsx中的 getInitialState 会被umi自动执行，用于获取初始化数据，初始化数据可使用 useModel 在各个组件中作为简易数据流的一部分使用。

它包含如下所示的settings，currentUser，loading，fetchUserInfo，如有更多数据可自定添加TS类型声明

export async function getInitialState(): Promise<
  settings?: Partial<LayoutSettings>; // 布局配置，不用管
  currentUser?: API.CurrentUser; // 当前用户
  loading?: boolean; // 是否加载完成，不用管
  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>; // 获取用户信息
> 

在组件的其他区域可以使用initialState，使用方式如下

const  initialState, setInitialState  = useModel('@@initialState');
const fetchUserInfo = async () => 
    const userInfo = await initialState?.fetchUserInfo?.();
    if (userInfo) 
      flushSync(() => 
        setInitialState((s) => (
          ...s,
          currentUser: userInfo,
        ));
      );
    
  ;

关于其他useModel可参考antd pro和umi关于简易数据流的文档

https://pro.ant.design/zh-CN/docs/simple-model

https://v3.umijs.org/zh-CN/plugins/plugin-model

六、主题

config.defaultSetting.ts中可以配置配色方案和token，关于token可参考

https://ant.design/docs/react/customize-theme-cn#%E4%BD%BF%E7%94%A8-design-token

config.ts中的theme字段可以做进一步的配置

具体可以参考：https://umijs.org/docs/api/config#theme

我觉得没什么好配置的。

七、配置文件

需要修改的几个配置

defaultSetting.ts

title: 'RBAC权限系统',
logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
token: ,
pwa: true,

八、路由配置

添加页面

参考文档：https://pro.ant.design/zh-CN/docs/new-page

有两种方式

1. 在pages下新建Component，再在config.routes中注册页面
2. 使用umi微生成器生成界面，再在config.routes中注册页面

九、Umi微生成器

参考文档：https://umijs.org/docs/guides/generator

Umi 中内置了众多微生成器，协助你在开发中快速的完成一些繁琐的工作。

生成页面

以目录方式生成页面，目录下为页面的组件和样式文件：

$umi g page bar --dir
Write: src/pages/bar/index.less
Write: src/pages/bar/index.tsx

编辑页面模板

由于Antd Deisign Pro V6默认使用All in js的方案，而生成器生成的代码使用less方案，建议修改默认的模版

生成DVA

为项目开启 Dva 配置，命令执行后，umi 会生成 Dva

$umi g dva
set config:dva on /Users/umi/umi-playground/.umirc.ts
set config:plugins on /Users/umi/umi-playground/.umirc.ts
info  - Update config file
info  - Write example model

007-ant design pro 和服务端进行交互

一、概述

　　原文地址：https://pro.ant.design/docs/server-cn

　　Ant Design Pro 是一套基于 React 技术栈的单页面应用，我们提供的是前端代码和本地模拟数据的开发模式， 通过 Restful API 的形式和任何技术栈的服务端应用一起工作。下面将简单介绍和服务端交互的基本写法。

二、详细介绍

2.1、前端请求流程

在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

1. UI 组件交互操作；

2. 调用 model 的 effect；

3. 调用统一管理的 service 请求函数；

4. 使用封装的 request.js 发送请求；

5. 获取服务端返回；

6. 然后调用 reducer 改变 state；

7. 更新 model。

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 services 文件夹中，并且一般按照 model 维度进行拆分文件，如：

services/
  user.js
  api.js
  ...

其中，utils/request.js 是基于 fetch 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。具体可以参看 request.js。

例如在 services 中的一个请求用户信息的例子：

// services/user.js
import request from ‘../utils/request‘;

export async function query() {
  return request(‘/api/users‘);
}

export async function queryCurrent() {
  return request(‘/api/currentUser‘);
}

models

// models/user.js
import { queryCurrent } from ‘../services/user‘;
...
effects: {
  *fetch({ payload }, { call, put }) {
    ...
    const response = yield call(queryUsers);
    ...
  },
}

2.2、Effect 处理异步请求

在处理复杂的异步请求的时候，很容易让逻辑混乱，陷入嵌套陷阱，所以 Ant Design Pro 的底层基础框架 dva 使用 effect 的方式来管理同步化异步请求：

effects: {
  *fetch({ payload }, { call, put }) {
    yield put({
      type: ‘changeLoading‘,
      payload: true,
    });
    // 异步请求 1
    const response = yield call(queryFakeList, payload);
    yield put({
      type: ‘save‘,
      payload: response,
    });
    // 异步请求 2
    const response2 = yield call(queryFakeList2, payload);
    yield put({
      type: ‘save2‘,
      payload: response2,
    });
    yield put({
      type: ‘changeLoading‘,
      payload: false,
    });
  },
},

通过 generator 和 yield 使得异步调用的逻辑处理跟同步一样，更多可参看 dva async logic。

2.3、从 mock 直接切换到服务端请求

通常来讲只要 mock 的接口和真实的服务端接口保持一致，那么只需要重定向 mock 到对应的服务端接口即可。

// .roadhogrc.mock.js
export default {
  ‘GET /api/(.*)‘: ‘https://your.server.com/api/‘,
};

这样你浏览器里这样的接口 http://localhost:8001/api/applications 会被反向代理到 https://your.server.com/api/applications 下。

2.3.1、关闭 mock

关闭 mock 的方法我们推荐采用环境变量，你可以在 package.json 中设置：

"script" : {
  "start": "roadhog server",
  "start:no-proxy": "cross-env NO_PROXY=true roadhog server"
}

然后在 .roadhogrc.mock.js 中做个判断即可：

const noProxy = process.env.NO_PROXY === ‘true‘;
...
export default noProxy ? {} : delay(proxy, 1000);