antd pro 使用心得

antd,pro,使用,心得 · 浏览次数 : 1665

小编点评

**antd Pro 功能整理** **菜单配置** * config/routes.ts 中配置主菜单路由,如 `/auth`。 * 子菜单配置管理系统,配置每个子菜单的路由,例如 `/auth/user`。 **数据展示** * ProTable 是一个表格组件,用于展示和交互数据。 * 数据加载方式包括异步请求和配置请求属性。 **路由配置** * 路由配置位于 `config/routes.ts` 中。 * 路由根据 `path` 和 `name` 属性定义,并可以关联到菜单或页面。 **页面跳转** * 支持通过 `path` 属性指定路由路径,以及通过 `onClick` 事件处理跳转。 * 也可以通过 `history` 对象进行页面跳转,不需要通过菜单配置。 **数据初始化** * 在页面加载时,可能需要加载一些额外的数据,例如详情页面根据 ID 加载其他信息。 * 可以使用 `useState` 和 `useEffect` hook 进行数据初始化。

正文

最近用 antd pro 开发了一些 web 小工具。

antd pro 不仅仅是升级版的 antd 组件,更重要的是提供了全套的前端解决方案,包括前端工程的编译打包,路由配置,数据管理,样式和资源的引用,和后端的交互方式。
甚至对于网站的国际化也有支持。

本篇是近期使用antd pro 时,用到的一些功能的整理,整理这些内容是因为比较常用,省得每次在 antd pro 的官方文档中去搜索。

菜单部分

antd pro一般用在后台的管理系统,所以菜单部分是重中之重,antd pro 的菜单是集中在一个文件中(config/routes.ts)配置的,非常方便。

子菜单配置

管理系统中,随着管理粒度的细分,子菜单是必不可少的,antd pro中配置菜单主要在2个地方:

  • config/routes.ts
  • src/locales/zh-CN/menu.ts

配置子菜单的路由:

{
  path: 'auth',  // 一级菜单路由
  name: 'auth',  // 一级菜单名称
  icon: 'team',  // 一级菜单
  routes: [
    {
      path: '/auth/user',                 // 二级菜单路由
      name: 'user',                       // 二级菜单名称
      component: './auth/user/UserList',  // 二级菜单对应的模块
    },
  ],
}

继续在 path: '/auth/user'中配置 routes:[ ... ]就能形成三级菜单

配置菜单的名称:

'menu.auth': '认证权限',
'menu.auth.user': '用户管理',

隐藏的菜单

有时候,我们配置的一些路由并不希望它出现在菜单中,比如一些新增,修改页面,在页面跳转中会出现,但是不需要显示在菜单中,这时,只需如下设置:

{
    path: '/data/:data_id/detail',
    name: 'data.detail',
    hideInMenu: true,       // 隐藏此路由在菜单中的显示
    component: './data/detail/DataDetailList',
  },

table组件

ProTable 是 antd pro 中的重要组件,实际上我是通过使用 ProTable 才开始逐渐使用 antd pro 的。
这个组件可以方便的在表格中展示各种形态的数据,也很好的集成了分页和检索功能,基本上,只要准备好要展示的数据,配置下表格的各个列,数据的展示和基本的互动都自动完成了。

这里简单整理下数据的加载方式:

<ProTable<API.DataDetailItem>
  columns={columns}     // columns 是定义各个列属性的变量,这里不再详细列出了
  rowKey="id"
  rowClassName={getRowClassName}  // 这里可以自定义一个函数,突出显示正在操作的行
  actionRef={tableRef}
  headerTitle={`【${dataSource}】的明细数据`}
  search={{
    labelWidth: 'auto',
  }}
  toolBarRender={() => [  // 这里其实可以定义一系列操作表格的按钮或其他组件
    <Button
      key="button"
      icon={<PlusOutlined />}
      type="primary"
      onClick={() => {
        setModalAddVisible(true);
      }}
    >
      新建
    </Button>,
  ]}
  request={async (params: API.DataDetailItem & API.PageInfo) => {
    const resp = await getDataDetailList(params);  // getDataDetailList 是自定义的请求后台数据的API
    return {
      data: resp.data.data_detail,
      total: resp.data.data_detail_aggregate.aggregate.count,
    };
  }}
/>

ProTable<API.DataDetailItem>这里其实是定义了table中要处理的数据类型。
DataDetailItem不用和 table的 column完全一致,返回业务需要返回的数据即可,一般会比 column 要求的内容多。

request属性可以是一个异步函数,用来初始化 ProTable 的。
它的参数中包含了分页信息API.PageInfo和返回的数据类型 API.DataDetailItem
其中API.PageInfo包含的信息很简单:

  type PageInfo = {
    pageSize?: number;  // 每页显示的数量
    current?: number;   // 当前是哪一页
  };

而数据类型API.DataDetailItem则是和 ProTable<API.DataDetailItem> 定义的类型相对应。

路由组件

在 antd pro 中,路由就在 config/routes.ts中集中配置,并且可以和菜单关联,非常简单。
这里就整理两点,一个是页面中获取带参数路由的参数,一个是页面间的路由跳转(不是通过菜单来跳转路由)。

带参数的路由

路由配置在 config/routes.ts中:

{
  path: '/data/:data_id/meta',
  name: 'data.meta',
  hideInMenu: true,
  component: './data/meta/MetaDataList',
}

在对应的页面中,可以这样获取路由中的参数 data_id

import { useParams } from 'umi';

type MetaDataParams = {
  data_id: string;
};  // 定义路由参数的类型,这里只有一个参数 data_id

export default () => {
  const urlParams = useParams<MetaDataParams>();
	console.log(urlParams.data_id);
}



路由跳转

通过菜单的跳转不用额外配置,只要在 config/routes.ts中定义即可。
除此之外,还有一些页面跳转时不通过菜单的,比如从列表页面到明细页面,

列表页面的跳转:

import { history } from 'umi';

// 省略.... ....
<Button
  type="link"
  size="small"
  key="detail"
  onClick={() => {
    history.push('/data/' + rd.id + '/detail');
  }}
>
  明细
</Button>,
// 省略.... ....

明细页面返回列表页面:

import { history } from 'umi';


// 省略.... ....
<Button
  key="back"
  icon={<RollbackOutlined />}
  onClick={() => {
    history.goBack();
  }}
>
  返回
</Button>,
// 省略.... ....

页面初始化

其实,antd pro 的数据展示组件基本都有 request属性,用来初始化其中的数据,比如上面提到的 ProTable 组件。

但是,有时候在详情或者编辑页面,还是会需要加载一些其他的数据,这时候,就需要在页面加载时初始化一些数据,本质上这是 React 的功能,而不是 antd pro 的功能。

比如,详情页面根据ID加载其他信息:

import { useState, useEffect } from 'react';
import { history, useParams } from 'umi';

type MetaDataParams = {
  data_id: string;
};

export default () => {
  const urlParams = useParams<MetaDataParams>();
  const [dataSource, setDataSource] = useState('');
  
  useEffect(() => {
    if (dataSource === '') {
      (async function initDataItem() {
        const d = await getDataById(urlParams.data_id); // getDataById 是访问后端API的函数
        console.log(d);
        setDataSource(d.data.data_source_by_pk.name || '');
      })();
    }
    console.log('effect');
  }, [dataSource, urlParams]);
}

与antd pro 使用心得相似的内容: