【Mock平台】为系列测试开发教程，从0到1编码带你一步步使用Spring Boot 和 Antd React
框架完成搭建一个测试工具平台，希望作为一个实战项目能为你的测试开发学习有帮助。

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

Antd页面搭建经验步骤

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

步骤1: 确定交互界面后，先命名创建规范目录和空白页，并配置路由确保页面展示正常。
按照官方的建议规范创建必要的文件，并在页面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" /><Columntitle="操作" dataIndex="option" key="option"render={(text, record) => [<a>编辑</a>,<a>删除</a>]}/>/></Table></>)
}

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

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

但无论哪种方式，都可以轻松地实现一个最基本的表格展示配置，这里先简单绑定一条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 (<><TablerowKey="id"columns={projectColumns}{/*两种数据返回后的绑定*/}// dataSource={projectList}dataSource={useProjectList}></Table></>)
}

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

项目展示功能

基于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 (<>{/*使用表格组件*/}<Tableloading={loading}rowKey="id"pagination={false}columns={projectColumns}// dataSource={projectList}dataSource={useProjectList}/></>)
}export default Project;

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

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

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

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

测试开发【Mock平台】06开发：项目管理功能（二）Atnd页面搭建经验实战与学习线路梳理相关推荐

Mock平台-07开发：项目管理（三）组件Modal和Form讲解，并利用其实现添加功能
[Mock平台]为系列测试开发教程,从0到1编码带你一步步使用Spring Boot 和 Antd React框架完成搭建一个测试工具平台,希望作为一个实战项目对各位的测试开发学习之路有帮助,大奇一个 ...
wex5 php开发,WeX5平台PHP开发使用说明文档
目录 WeX5平台PHP开发使用说明文档 1.搭建开发环境 1.1下载开发工具从官网下载WeX5的工具压缩包解压开发工具压缩包,解压后会占用约3GB的硬盘空间,请选择较大的解压目的目录(解压后不要 ...
WPF帝友借贷系统MV模式开发日志2021/04/02_前台登入注册页面搭建
WPF帝友借贷系统MV模式开发日志_前台页面搭建下面是我搭建好的前台登入界面可以看出,登入界面主要分为两个部分一个部分是登入程序信息显示(左边) 一部分是登入数据验证部分(右边)因为是桌面软件, ...
自主开发悟空crm增加公文管理功能二次开发代码披露
1.招聘需求 2.审核刚刚创建的招聘需求内容 3.编辑内容 4.简历管理 5.面试记录时间轴 6.offer管理 <?php namespace app\hrm\model; use app\a ...
lyrebird（MOCK平台）美团琴鸟，windows系统环境搭建以及使用手册
lyrebird工程地址:https://github.com/meituan/lyrebird lyrebird帮助文档:https://pypi.org/project/lyrebird/ 环境要 ...
直播平台软件开发中选择点播播放器哪家强？
直播平台软件开发中选择点播播放器哪家强? 太长不看版这里选择了开源播放器IjkPlayer和直播云厂商播放器PLDroidPlayer作为测试样本. 数据统计软硬编码 IjkPlayer PLDr ...
全面剖析支付宝服务窗功能二次开发
支付宝服务窗功能二次开发是类似于微信公众号功能二次开发一样的平台,但是支付宝跟微信之间只有区别的,微信可提供给客户发布些个人相关的信息.言论.文章等,也可以提供给单位使用:而且都支持二次开发的.而支付 ...
提高生产力：Web开发基础平台WebCommon的设计和实现
Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...
H5页面开发怎么做？分析H5页面开发令人期待的 5 项功能。
来源品略网:http://www.pinlue.com/article/2020/03/0518/019985707535.html H5页面开发怎么做-H5页面开发令人期待的 5 项功能 HTML ...

测试开发【Mock平台】06开发：项目管理功能（二）Atnd页面搭建经验实战与学习线路梳理