Ant Design Pro V5 CRUD 页面 ProTable 的实现

更新日期: 2021-04-01 阅读次数: 235 字数: 665 分类: ReactJS

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 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。

相关文章

爱评论不评论