【Mock 平台】为系列测试开发教程，从 0 到 1 编码带你一步步使用 Spring Boot 和 Antd React 框架完成搭建一个测试工具平台，希望作为一个实战项目对各位的测试开发学习之路有帮助，大奇一个专注测试技术干货原创与分享的家伙。

经过一段时间自我磨（折）练（磨），终于算是能较为愉快的上手了 Antd Pro 的运用，以及掌握 React 基本代码开发能力，本篇就结合项目将自己总结的一套循序渐进的页面搭建经验总结下，希望你少走弯路，把更多的精力用在正确的事上。

Antd 页面搭建经验步骤

如果你跟我一样对使用 React 和 Antd 不熟，甚至第一次使用，可以参考笔者以下的经验，这个技巧也在小推团队内部得到有效分享和实践。

步骤 1: 确定交互界面后，先命名创建规范目录和空白页，并配置路由确保页面展示正常。<br />按照官方的建议规范创建必要的文件，并在页面index.jsx中添加最基本的可运行代码，最后如果页面是通过菜单显示转跳，在routes.js 配置菜单，如果保留了多语言还需要提前在语言文件夹中menu.js添加好命名变量。

Tips：在 Mock 平台源代码中大奇已经抽出一个模版页面，前期可作为 COPY 源。

步骤 2: 草稿画出布局，并用相关布局组件占位，确保占位页面占比展示符合预期。

在上一步编译运行没有问题后，不着急编写代码，先在心中或者随手一张纸上，草稿一下将要实现的需求页面的布局，以及可能用到的组件。比如下边以后边 Mock 平台将要实现的接口管理页面需求花了张草图。

Tips：在 CPM 敏捷项目管理中有关工作坊有个说明，“最好利用白板，张贴白纸等低技术含量，但搞互动工具来展示想法”，这里同样适用，即不要非得用什么原型或流程图软件去画出来，初期的设计往往越简单越高效。

步骤 3: 匹配各区域的基础组件，引用并编码不带任何属性的空组件，确保页面无报错并有框架展示。

在布局组件下，填充需要的组件如<Table/>表格，其中不带任何属性，通过页面编译运行查看是否正常，或者通过浏览器开发者模式下 Console 查看是否有错误，如果某些组件没有骨架展示，可以适当增加包含文字展示或者基本属性（title）等，来验证将要使用的组件正常。

步骤 4: 按依赖顺序或者核心组件先实现其 80%左右属性填充和依赖函数编码工作。

划分主次开发的组件，依次进行正式的样式配置和数据交互，比如要实现 Table 的数据展示，先进行 request 数据请求赋予定义函数式变量，然后绑定 dataSource， 这里可以 Ant 对应组件案例，或直接参考其 API。

步骤 5: 依次开发其他组件，配置必要的变量定义，数据请求等，进行联调交互测试等。

在调试好主或者必要部分的开发后，依次开发其他组件，其中数据的定义部分个人建议，用注解做好用途解释和作用域，还要重点关注组件间的数据依赖和传递性，并时常关注 Console 里是否有错误日志，如果尽量即使解决掉。

步骤 6: 组件抽离，简化和优化繁冗页面代码。

页面组件多，交互也复杂，建议在实现基本功能后尽快做优化提取，将其抽离出独立的组件在其对应页引用，此步骤在熟悉 Antd React 开发可放在步骤三后直接先开发自定义组件。如果此自定义组件在其他页面也类似用到，最好变成一个公共的组件。

Tips：在 React 编程中建议遵循其设计思想https://zh-hans.reactjs.org/docs/thinking-in-react.html

最后提炼下我的经验法则

法则一：从页面 0 代码逐步编码，不要以为图省事拷贝场景组件或参考页面全部代码，会让不熟悉前端开发的你不知所措，并且错误改到怀疑人生。耐心一点，一步步来直到你驾驭它。

法则二：多看官方文档，并不要忽略通用部分和建议内容，有问题多利用官方和 Google 搜索，想提高效率多关注 Antd 的生态组件比如 procomponents。多思考多实践，举一反三，培养出属于自己开发思维和体系。

以上是笔者摸着石头过河总结的经验，先亮了出来，没有感觉不要紧，具体的效果还依赖于实践，后边在项目中也会反复提及和应用。

实战项目管理数据展示

需求实战先从一个简单但很重要基础内容入手，接口项目的管理首先需要进行展示，通常做法就是查询列表数据，然后通过表格形式进行绑定展示，对应 Antd Design 的组件就是 <Table>[1] 表格，先看下基础样式。

Table 组件

场景是当有大量结构化的数据需要展现，需要对数据进行排序、搜索、分页、自定义操作等复杂行为时使用，再看下 Table 的 API 说明（全部请移步官方），这里如 columns 、dataSource等构成组件的快速应用。

和使用 Element UI 组件很类似，引用组件然后绑定数据源和相关属性，这里说点和之前系列 Vue 使用上的不同点，Antd 相关组件是按需在实现页面进行绑定，React 框架中数据处理也是按需调用，而不是响应式的。

// 引入组件依赖
import { Table, } from 'antd';

const Project = () => {
  return (
    <>
    {/*使用表格组件*/}
    <Table></Table>
    </>
  )
}

往下就是要掌握表，列描述数据对象Column的配置，有两种形式：

1.数据对象

简单来讲就是额外定义一个数组对象变量，内部 JSONObject 包含最基本的 dataIndex 列数据在数据项中对应的路径，即对应接口返回 JSON 列表对象的 key，当尤其数据时候就会自动匹配，还有 title 列头显示文字，以及render生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引。

以上篇的全量项目列表接口返回距离就可以有如下使用配置：

const projectColumns = [
  {dataIndex:"id",title:"编号",},
  {dataIndex:"name",title:"名称",},
  {dataIndex:"option",title:"操作",
    render: (text, record) => (
      <>
        <a>编辑</a>
        <a>删除</a>
      </>
    ),
  },
]

const Project = () => {
  
  return (
    <>
    {/*使用表格组件*/}
    <Table columns={projectColumns}></Table>
</>
)
}

2.使用 JSX 风格

JSX 风格的 API 需要 Antd 版本大于 2.5.0，是一个描述 columns 的语法糖，使用 Column 和 ColumnGroup 子组件展示，不过其中属性作用是和数据对象方式一样的。

const { Column } = Table;

const Project = () => {
  return (
    <>
      {/*JSX风格*/}
      <Table>
        <Column title="编号" dataIndex="id" key="id" />
        <Column title="名称" dataIndex="name" key="name" />
        <Column
          title="操作" dataIndex="option" key="option"
          render={(text, record) => [
            <a>编辑</a>,
            <a>删除</a>
            ]}/>/>
      </Table>
    </>
  )
}

以上两种都能实现表格列表的定义，至于使用怎么使用看个人习惯，如果以前写 HTML 或者 Vue 第二种比较习惯，但就个人而言是比较推荐第一种，因为后边在升级高级表组件，使用其他组件或是代码风格都更统一。

关于列 Column 这块还有多种设置属性，能够方便满足表格一些常见交互需求，比如 ellipsis 超长自动省略、width 列宽、sorter 排序等等，截图只列出了部分，实际按需使用。<br />

但无论哪种方式，都可以轻松地实现一个最基本的表格展示配置，这里先简单绑定一条 Mock 数据看下效果，接口请求和数据绑定方法将在下边具体展开。

数据请求和绑定

基本版本的 Table 数据绑定是通过dataSource直接绑定，格式就是数组 JSON，不过先要讲解下如何远程数据请求和数据存储，在之前 Antd pro 目录结构中演示过，对于后端的接口一般在其server.js定义异步的 JavaScript 方法，使用网络请求是request[2] 这里分别举 GET 和 POST 两个例子。

import { request } from 'umi';

/** Get方法请求-带参 */
export async function getApi(getParams) {
  return request('/api/get', {
    method: 'GET',
    params: getParams
  });
}

/** POST方法请求-带参 */
export async function postApi(reqBody) {
  return request('/api/post', {
    method: 'POST',
    data: reqBody
  });
}

在具体的页面实现通过方法调用自己处理整个返回，或使用官方推荐 useRequest[3]的 Hook 插件做规范化处理，两种方式的例子代码：

import React, { useState, useRef, useEffect } from "react";
import { useRequest } from 'umi';

// 导入sever接口请求方法
import { getProductList } from "@/pages/Project/service";


...省略...

const Project = () => {

  // 通过页面初始化调用getProductList接口方法，然后手动判断是否成功并赋于定义的变量
  const [projectList, setProjectList] = useState([]);
  useEffect(() => {
    getProductList().then(resp=>{
      if (resp.success) {
        console.log('接口数据响应成功');
        setProjectList(resp.data);
      }
    });

  },[])

  // 使用useRequest自动请求
  const {data:useProjectList, error, loading, run: reloadProjectList} = useRequest(getProductList);

  return (
    <>
      <Table
        rowKey="id"
        columns={projectColumns}
         {/*两种数据返回后的绑定*/}
        // dataSource={projectList}
        dataSource={useProjectList}
      >
      </Table>
    </>
  )
}

这里重点说下 useRequest，它默认页面加载的时候就触发的，所以个人开发过程中体验来讲对于一些上来就初始化数据，少量定义 State 变量的时候很是比较方便的，其他好处和特殊场景如想手动大家还是参考官方，后边其他页面实现也会逐步用到的。<br />

项目展示功能

基于 API、基础示例和总结 Antd 搭建经验，我们便可实现 Mock 平台的项目展示功能了，首先别忘了页面创建和路由配置

然后只需要做的是丰富列表字段，选择一种列编码风格，以及数据请求方案，完整如下参考代码如下：

import React, { useState, useRef, useEffect } from "react";
import { useRequest } from 'umi';

// 引入组件依赖
import { Space, Table } from "antd";
// 导入sever接口请求方法
import { getProductList } from "@/pages/Project/service";

const projectColumns = [
  {dataIndex:"id",title:"编号",},
  {dataIndex:"name",title:"名称",},
  {dataIndex:"desc",title:"描述",},
  {dataIndex:"type",title:"类型",},
  {dataIndex:"owner",title:"负责人",},
  {dataIndex:"updateDate",title:"更新时间",},
  {dataIndex:"option",title:"操作",
    render: (text, record) => (
      <Space>
        <a>编辑</a>
        <a>删除</a>
      </Space>
    ),
  },
]

const Project = () => {

  // 获取全部项目数据
  const {data:useProjectList, error, loading, run: reloadProjectList} = useRequest(getProductList);

  // 返回渲染的组件
  return (
    <>
      {/*使用表格组件*/}
      <Table
        loading={loading}
        rowKey="id"
        pagination={false}
        columns={projectColumns}
        // dataSource={projectList}
        dataSource={useProjectList}
      />
    </>
  )
}

export default Project;

最后上个动态图感受下一个页面从无到有变化过程，虽然很简单的页面，但它体现了一个页面诞生的较为完整的生命周期。

<br />以上是本篇分享的所有内容，万事开头难，接下来会继续实现项目管理这个需求，也会逐步讲解用到的技术和方法论，如果有任何想法和意见欢迎来探讨交流，如果你觉得分享有干货、有帮助到你，记得多多点赞或分享支持，下边按照惯例给出标注的参考链接，同时也给出我总结的一个想先扩展学习 React 的线路建议，希望对有浓厚学习欲望的同学有参考价值。

参考资料

[1] https://ant.design/components/table-cn/ [2] https://pro.ant.design/zh-CN/docs/request [3] https://ahooks.js.org/zh-CN/hooks/use-request/index

Antd 开发自我学习线路

自上而下递进：

• 官方 Antd pro 开始教程 - 实操
• Antd Desgin 组件库 - 概览
• React 官方扩展学习
• 概念 快速了解
• hook 重点学习
• umi 和 ahook 学习
• 从 0-1 搭建一个简单的增删改查功能页面
• procomponents 高级组件切换
• 尝试将复杂页面抽离成分离组件
• 按需回顾 Antd 生态项目和建议规范
• 扩展 5 内容实践更多组件及其多种用法
• 改造一个公司的项目，或者实战一个练手项目（比如此“Mock 平台”系列）

关于自我学习，最后还要多啰嗦一句，就是要有培养持续学习的动力，遇到问题优先自己解决的能力，多沟通多交流并要有谦虚的态度。