Ant Design Pro V5 CRUD 页面 ProTable 的实现

Ant Design Pro V5 CRUD 页面的基本结构

src/pages/TableList/index.tsx

import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';

const TableList: React.FC = () => {
  return (
    <PageContainer>
      <ProTable<API.RuleListItem, API.PageParams>
  )
}

ProTable

ProTable 是 ProComponents 的一部分，参考：

https://procomponents.ant.design/components/table

ProTable 表格模板组件，抽象网络请求和表格格式化

连表格轮询都内置了，确实强大。

文档，及使用代码示例都非常详细。

ProComponents

https://procomponents.ant.design/components/

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

网络数据请求

ProTable 是如何从服务器拉取数据列表的呢？

回到代码文件 src/pages/TableList/index.tsx：

import { rule, addRule, updateRule, removeRule } from '@/services/ant-design-pro/api';

<ProTable<API.RuleListItem, API.PageParams>
    request={rule}
    columns={columns}
    ...
/>

src/services/ant-design-pro/api.ts

import { request } from 'umi';

/** 获取规则列表 GET /api/rule */
export async function rule(
  params: {
    // query
    /** 当前的页码 */
    current?: number;
    /** 页面的容量 */
    pageSize?: number;
  },
  options?: { [key: string]: any },
) {
  return request<API.RuleList>('/api/rule', {
    method: 'GET',
    params: {
      ...params,
    },
    ...(options || {}),
  });
}

Ant Design Pro V5 网络请求的介绍：

https://beta-pro.ant.design/docs/request-cn

API.RuleList

可以看到 request 函数后面加了 API.RuleList，猜测是 Typescript 的类型限定

return request<API.RuleList>('/api/rule', {

在 src/services/ant-design-pro/api.ts 文件的同级目录下，找到了

typings.d.ts

其中定义了：

declare namespace API {
  type RuleListItem = {
    key?: number;
    disabled?: boolean;
    href?: string;
    avatar?: string;
    name?: string;
    owner?: string;
    desc?: string;
    callNo?: number;
    status?: number;
    updatedAt?: string;
    createdAt?: string;
    progress?: number;
  };

  type RuleList = {
    data?: RuleListItem[];
    /** 列表的内容总数 */
    total?: number;
    success?: boolean;
  };
  
  ...
}

tips: 属性后的 ? 说明此字段可能不存在。 Typescript 中的问号和感叹号的用法非常类似于 Kotlin。

Mock 是如何启用的

又如何切换到真实的服务端数据源呢？

本地启动的 Ant Design Pro V5 开发环境，默认带的 Table 页面是有测试数据的。

具体配置在 mock/listTableList.ts 文件中。

而从浏览器看，ajax 请求的地址是：

http://localhost:8000/api/rule?current=1&pageSize=20

如何实现 Mock 数据对接的。

Ant Design Pro V5 文档中并没有提到这个问题，但是 V4 的文档中有讨论：

https://pro.ant.design/docs/mock-api-cn

$ npm run start:no-mock

这样启动就不会走 Mock 数据了。

但是，用 tyarn start:no-mock 运行后，后台无法登录，接口报错：405。

如果我本地有后台的开发环境，可以使用转发配置来将请求转发到后台的端口上：

// config/config.ts
export default {
  proxy: {
    '/api': {
      'target': 'http://jsonplaceholder.typicode.com/',
      'changeOrigin': true,
      'pathRewrite': { '^/api' : '' },
    },
  },
}

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”，查看更多联系方式