“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 20 天，点击查看活动详情”

1. 简介

继续学习，继续深入

2. 代码案例

1. 使用 `PageContainer 与 ProTable搭建一个列表页

通过昨天创建了一个tsx页面与修改router 我们看到了一个雏形的网页，今天使用antd pro的组件继续开发我们网站

import { PageContainer, ProTable } from "@ant-design/pro-components";
import React from "react";

export default () => {
    return <PageContainer>
        <ProTable rowKey="id" search={{ labelWidth: 120 }}/>
    </PageContainer>
}

1. 可以看到只使用了短短的两行代码就创建了一个漂亮的网页

2. 接入数据

1. 数据接口推荐使用 StrApi docs 库来创建一个接口
2. StrApi界面修改为中文界面, 创建src/admin/app.js文件

export default {
  config: {
    locales: ['zh-Hans'],
    translations: {
      'zh-Hans': {
        'Auth.form.email.label': 'lize240810@163.com',
        Users: 'lize240810@163.com',
        City: 'Chinese (Simplified) (zh-Hans)',
        // 这里是刚刚在设置中新建的国际化语言版本的ID
        Id: '3',
      },
    },
  },
  bootstrap() {
  },
}

3. 其他的则在界面上修改，可以看看其他人对这个库的介绍
4. 创建一条数据，并开放接口，之后访问接口获得数据

3. 接入接口

1. 进入到config文件中修改代理
2. 我们现在还没有修改登录接口，不去动dev的/api/,在下面加一段代理

export default {
    dev: {
        '/api/': {
            // 要代理的地址
            target: 'https://proapi.azurewebsites.net',
            changeOrigin: true,
        },
        '/test/': {
            // 要代理的地址
            target: 'http://localhost:1337',
            changeOrigin: true,
            pathRewrite: { '^/test': '/api' },
        },
    }
};

3. 还需到axios拦截器（src/requestErrorConfig.ts）中修改请求拦截器

// 请求拦截器
requestInterceptors: [
  (config: RequestOptions) => {
    return config;
  },
],

4. 配置API与数据类型

1. 到services文件夹下创建需要用的api请求与数据类型

services
├─api
│  └─student
└─types
    └─student

2. API下的student文件

使用的框架为我们封装好的网络请求库

import { request } from '@umijs/max';

async function getAllStudent() {
    return request('/test/students', { method: 'GET', })
}

export const StudentService = {
    getAllStudent
};

4. 把数据显示到元素上

import { PageContainer, ProColumns, ProTable } from "@ant-design/pro-components";
import React from "react";
import { StudentService } from '@/services/api/student';
import { Student } from "@/services/types";
import { Tag } from "antd";


export default () => {

    const columns: ProColumns[] = [
        {
            title: "姓名",
            dataIndex: 'name',
            valueType: 'textarea',
        },
        {
            title: "性别",
            dataIndex: 'sex',
            render: sex => <Tag>{sex ? '男' : '女'}</Tag>
        }
    ];

    return <PageContainer>
        <ProTable<Student> rowKey="id" search={{ labelWidth: 120 }} request={StudentService.getAllStudent}
                           columns={columns}/>
    </PageContainer>
}

1. 使用request自动发送请求
2. 只需要配置一下columns项
3. 发现网页上数据行数已经出现了，但是并没渲染出数据，通过排查发现是接口返回的数据结构，不能使用
4. 手动封装转换一下数据

import { request } from '@umijs/max';
import { Student } from "@/services/types";

export interface GeneralArrayResponse<T> {
    data: T[];
}

async function getAllStudent() {
    return new Promise<GeneralArrayResponse<Student>>((resolve) => {
        request('/test/students', {
            method: 'GET',
        }).then(res => {
            resolve({
                data: res.data.map((item: { id: string, attributes: object }) => {
                    return {
                        id: item.id,
                        ...item.attributes
                    }
                })
            })
        })
    })
}

export const StudentService = {
    getAllStudent
};

5. 简单转换一下，就可以使用了
6. 发现表头多了几个筛选器，不需要或者不要这个类型的可以修改一下 columns

const columns: ProColumns[] = [
    {
        title: "姓名",
        dataIndex: 'name',
        valueType: 'textarea',
    },
    {
        title: "性别",
        dataIndex: 'sex',
        render: sex => <Tag>{sex ? '男' : '女'}</Tag>,
        hideInSearch: true
    },
    {
        title: "性别",
        dataIndex: 'sex',
        valueType: "switch",
        hideInTable: true
    }
];

8. 通过配置属性，就可以达到平时花半小时修改的效果

3. 总结

简单学习使用ProTable 来展示数据

是不是学习了那么久的React感觉使用了这个框架之后都用不上那些Hook了，别急，之后会慢慢遇到的