Mock22-接口规则管理实现

本篇主要去实现接口下边的规则管理，可以采用两种方法：

1. 如果对于接口规则很多，选择项目跳转接口新页面的方式实现，也是比较简单的方式

2. 如果业务上规则不是很多，则可以采用table嵌套的方式，这是一种比较少层级的交互方式

对于Mock项目，出于演示项目规则会很好，另外出于新方法的学习运营则采用后者。这里最关键的就在于 ProTable 的 API expandable 扩展表格来实现表格嵌套。其实就是对应 antd table 中的展开功能的配置。

核心的代码在接口列表 ProTable 实现如下定义：

rowKey="id"
expandedRowKeys={expandedKey}
expandable={ {expandedRowRender} }

• rowkey 必须指定，如果不指定点击操作无法响应

• expandedRowKeys 实现菜单 “规则管理” 自定义操作

• expandable 声明返回另外一个内部带配置的 <ProTable/> 表格

这里特别注意的就是红色波浪线处，需要将接口行数据带到内嵌表中，用于相关操作。

规则的添加和修改操作实现，跟接口管理几乎一致，最终呈现的界面如下：

对于规则我们是允许删除的，而删除仍然是个危险操作，所以需要确认框，之前我们使用过confirm，此篇我们在用另外一种 Popconfirm 来实现，它同样来在于 antd

import {Popconfirm } from 'antd';

https://ant-design.antgroup.com/components/popconfirm-cn

另外一个要强调的是，在新增和编辑规则的时候，我们会有个根据规则类型显示更多的配置，使用到的 ProFormDependency 既只有在选择 高级配置 时候才会显示 规则返回码 和 返回延迟 高级选项，否则不显示默认配置。

https://procomponents.ant.design/components/dependency

前端的新的和需要注意的内容就是这些，而对于后端没有过多要说的，按照接口和过往spring boot的一套下来即可。

最后看下本篇实现成果：

1. 规则配置展示和隐藏

   

2. 规则添加和修改

   

3. 规则删除

   

本篇实现的代码已经在开源代码项目上创建chapter22分支，大家可以下载分支参考实现此篇内容。

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。