Ant Design Pro 新增一个表格页面（一）

前言

纪录个人学习Ant Design Pro并投入实际项目开发：新增表格页面的过程。
简述：从后端请求一个用户列表并用ProTable展示

Ant Design Pro新增一个表格页面

版本：antd pro v5 + typescript。

配置本地代理

修改文件config/proxy.ts中的dev：

dev: {
    '/index.php/api/': {
      target: 'http://localhost:63341',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },

具体如何写与每个人的后端接口有关，个人本地的后端接口示例：http://localhost:63341/index.php/api/passport/login
文件 src/services/ant-design-pro/api.ts 中的请求代码：

/** 登录接口 POST /index.php/api/login/account */
export async function login(body: API.LoginParams, options?: { [key: string]: any }) {
  return request<API.LoginResult>('/index.php/api/passport/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}

注意：在线上环境中，也就是npm run build生成的包，代理是不会生效的，因此发布到线上时，确定你的网站已经有了后端服务。

创建文件

在pages路径中新增一个文件夹admin，复制一份TableList文件夹到admin中，并修改名称为users

定义路由

路由配置文件：config/routes.ts 中添加以下代码：

{
    name: 'admin',
    icon: 'user',
    path: '/admin',
    routes: [{
      name: 'users',
      // icon: 'user',
      path: '/admin/users',
      component: './admin/users',
    }],
  },

同时在国际化文件(src/locales/zh-CN/menu.ts)中添加

  'menu.admin.users': '员工管理',

路由字段释义

• name: ‘admin’，定义的是该路由在导航栏的名称，会在国际化文件(src/locales/zh-CN)中寻找menu.admin的值，并渲染。
• icon: ‘user’，渲染了一个user图标
• path: ‘/admin/users’, 指定访问路由
• routes: 配置子路由
• component: ‘./admin/users’，指定该页面的组件，antd pro会到pages/admin/users下寻找index.tsx文件，并渲染它的内容

添加后运行命令npm run start:no-mock(:no-mock代表不使用mock模拟数据), 可以看到以下效果：

约定接口数据格式

文件为src/services/ant-design-pro/typings.d.ts, 添加用户相关接口数据返回格式，以下是个人的后端接口数据格式：

  type MemberList = {
    success: boolean;
    data?: {
      items: MemberListItem[];
      _links: Links;
      _meta: Pagination;
    };
  };

type MemberListItem = {
    id?: number;
    login_count?: number;
    type?: number;
    type_formatted?: string;
    avatar?: string;
    username?: string;
    created_at?: number;
    creator?: number;
    mobile_phone?: string;
  };
  
  type Links = {
    self: {
      href: string;
    };
    first: {
      href: string;
    };
    last: {
      href: string;
    };
  };

  type Pagination = {
    totalCount: number;
    pageCount: number;
    currentPage: number;
    prePage: number;
  };

注：根据自己的后端接口返回的数据格式编写

编写接口请求

接口请求文件：src/services/ant-design-pro/api.ts, 文件中自带rule的增删查改API，复制一份改为用户增删改查接口。

注意：

我根据自己的后端API查询参数格式，对原列表接口代码进行了一些修改。

ProTable默认使用的分页参数名是current以及pageSize，与后端不一致。这里我让后端适应前端，接收这两个参数进行分页。
此外，ProTable默认的排序方式也与后端不一致，我在前端进行了处理。

最后函数的返回值再进行额外的处理，data的值应为一个数组用于渲染表格。参考文档链接

/** 获取用户列表 GET /api/member/index */
export async function members(
  params: {
    // query
    /** 当前的页码 */
    current?: number;
    /** 页面的容量 */
    pageSize?: number;
  },
  // sorter接收排序字段
  sorter: {},
  options?: { [key: string]: any },
) {
  // 前端排序处理
  let sortObj = {};
  if (sorter) {
    for (let key in sorter) {
      sortObj['sort'] = sorter[key] == 'ascend' ? key : '-' + key;
      break;
    }
  }
  const response = await request<API.MemberList>('/api/member/index', {
    method: 'GET',
    // 添加排序参数到params
    params: {
      ...params, ...sortObj,
    },
    ...(options || {}),
  });
  return {
  	// 返回值处理
    data: response?.data?.items,
    success: response.success,
    total: response.data?._meta.totalCount,
  };
}

文件修改

接下来对admin/users/index.ts进行修改

未完待续

Ant Design Pro 新增一个表格页面（二）

视频教程

个人参考的Antd Pro视频教程：求知99网