Ant Design Pro 个性定制化过程记录以及坑点

1.框架

React.js + Ant Design + Ant Design Pro

2.React相关简单介绍

react组件分为两大类: 类式组件以及函数式组件

生命周期：

常用的几个hooks组件有：useState，useEffect，useRef

3 ant design pro个性定制化

项目根据官网的方法进行初始化，之后对整个项目进行了一些自定义的操作

3.1 系统首页个性化定制

pageTitleRender置为true，那么标签页的名称会变为: 当前页面名称 + title

title ，会影响标签页和左上角系统名称

logo，会影响标签页和左上角的图标

primaryColor，系统主题颜色

3.2 系统加载页面修改

3.2.1修改下图代码 影响位置1信息展示

3.2.2 修改下图代码 影响位置2、3位置信息展示

3.3 首页右侧信息栏自定义显示

根据该文件控制右侧标签内容展示

其中用户信息下拉框由Avatar组件进行控制，我们可以在AvatarDropdown.tsx文件中进行自定义的下拉框内容

3.4 ant design pro 全局共享对象使用

使用场景：全局的，加载次数较少的数据

https://v3.umijs.org/zh-CN/plugins/plugin-initial-state 原理
https://pro.ant.design/zh-CN/docs/upgrade-v5/#initialstate 使用方法
const { initialState, setInitialState } = useModel(‘@@initialState’);



setInitialState({key : value}) 存值

initialState.key 取值

全局变量定义 app.tsx中进行定义
其中return中的三个变量为全局共享变量
定义返回的参数类型

Promise<{
settings?: Partial;
currentUser?: API.CurrentUser;
fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}>

以下例子从smart do项目中取出

export async function getInitialState(): Promise<{
  settings?: Partial<LayoutSettings>;
  currentUser?: API.CurrentUser;
  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
  const fetchUserInfo = async () => {
    try {
      if(sessionStorage.getItem('uid') != null){
        const msg = await queryCurrentUser();
        return msg;
      }else{
        history.push(loginPath);
      }
    } catch (error) {
      history.push(loginPath);
    }
    return undefined;
  };
  // 如果是登录页面，不执行
  if (history.location.pathname !== loginPath) {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      settings: {},
    };
  }
  return {
    fetchUserInfo,
    settings: {},
  };
}

3.5 ant design pro 路由定义以及动态渲染

3.5.1 首先在routes中定义全量的路由信息

3.5.2

在app.tsx中获取后端返回的菜单层级信息，并渲染左侧路由菜单页面
该页面的
RunTimeLayoutConfig组件会在每次页面初始化以及刷新时调用一次，并且会根据meun属性中的request中的值渲染左侧的菜单项。从后端获取动态配置菜单项最少的配置样例如下

{
name: ‘application’,
routes: [
{
name: ‘list’,
path: ‘/application/list’,
}
]
}

父级菜单只需要提供name属性，子级菜单需要提供name与path属性，其中那么要与routes.ts中的路由那么要保持一致，否则会出现找不到菜单组件的情况。

3.6 全局请求拦截

smart Do使用的请求组件为 umi-request
官方文档：
https://github.com/umijs/umi-request/blob/master/README_zh-CN.md

使用

请求拦截

request.interceptors.request.use对全局请求进行拦截，在header中添加

AUTHORIZATION: sessionStorage.getItem(“smartdo-token”)


响应拦截

request.interceptors.response.use对全局响应进行拦截，从header中获取最近最新的token，判断token是否有返回，若返回则放入本地浏览器缓存中


全局请求代理

因为响应拦截无法对返回的数据做全局的格式处理，所以smart do项目对request进行了进一步封装，对返回的结果做格式以及异常做全局处理

3.7 umi相关

开启umi-ui可以让你快速生成相关的规范页面的框架

在工程目录下的命令行中执行以下指令

// 打开开发模式下页面右下角的小气泡，方便添加区块和模版等pro资产
$ tyarn add @umijs/preset-ui -D
// 或
$ npm install --save-dev @umijs/preset-ui

安装完成后即可看到项目右下角有一个小气泡，通过该组件可以快速生成符合开发规范的模版页面，加快开发

注意：该组件只能出现在本地环境开发中，不应出现在线上环境。若要禁用则需要修改start启动指令
cross-env UMI_UI=none umi dev

如下图：

3.8 proxy请求代理

ant design pro初始化项目自带请求代理功能，监听对应的路径将其替换为target地址 如下图

如果代理生效可在network中看到请求代理后的远程地址信息

4.开发注意事项

4.1
由于ant design pro的layout页面为自动生成的，所以在如果需要更改layout等公用页面时需要通过配置修改。
如果配置未刷新，建议删除.umi以及.umi-production目录下的所有文件，重新启动会生成相应的目录文件。

4.2
如果修改首页的各个组件，如下图的红框区域，应在src/components中寻找对应的位置进行修改，ant design pro在启动时会将这些组件嵌入到.umi的layout页面

5. 踩坑记录

Ant Design Pro + Ant Design + React 踩坑记录