架构设计

ProComponents 是基于 Ant Design 而开发的模板组件,提供了更高级别的抽象支持,开箱即用。可以显著的提升制作 CRUD 页面的效率,更加专注于页面。

  • ProLayout 解决布局的问题,提供开箱即用的菜单和面包屑功能
  • ProTable 表格模板组件,抽象网络请求和表格格式化
  • ProForm 表单模板组件,预设常见布局和行为
  • ProCard 提供卡片切分以及栅格布局能力
  • ProDescriptions 定义列表模板组件,ProTable 的配套组件
  • ProSkeleton 页面级别的骨架屏

如果您是阿里内网用户,欢迎尝试使用 TechUI。TechUI 在封装 ProComponents 的基础上还提供了丰富的 Ant Design 扩展组件。

与网络请求库配置使用

ProTable,ProList 使用了新的数据结构,如果你使用了我们约定的参数使用起来会非常简单。

const msg: {
data: T[];
page: number;
success: boolean;
total: number;
} = {
data: [],
page: 1,
success: true,
total: 0,
};

如果你的后端数据使用了自己熟悉的 url,虽然我们可以用 umi 的 request 来转化,但是每个 table 都需要配置就比较麻烦。如果你使用 umi 的 request,我们可以定义一个全局的转化器。我们需要在 app.tsx 中配置

import { request, RequestConfig } from 'umi';
export const request: RequestConfig = {
errorConfig: {
adaptor: (resData) => {
// resData 是我们自己的数据
return {
...resData,
total: resData.sum,
success: resData.ok,
errorMessage: resData.message,
};
},
},
};
<ProTable request={request('/list')} />;

如果使用了 fetch ,可以对 fetch 进行自定义。

const request = (url, options) => {
return fetch(url, options)
.then((res) => res.json())
.then((resData) => {
return Promise.resolve({
...resData,
total: resData.sum,
success: resData.ok,
errorMessage: resData.message,
});
});
};
// 使用时
<ProTable request={request('/list')} />;