接口测试平台番外-正交工具3

    我们之前的进入小工具的页面已经成功了。

本节课就来实际做一下：

 

所谓正交，其实就是对 多个输入条件 的多个子状态，生成用例的方法。

 

我们先要做的就是前端的交互。其实很简单，就是个表格，类似于我们接口请求体的form-data那种可以自行增加行数的表格，每行分为key和value，key就是输入条件的名称，value，就是具体的多个子状态（用/隔开）

 

但是我并不打算去复制那套第三方打的表格，而是准备自己重写一个简易版本。

 

首先我们在正中央新建一个div，作为容器：

 

然后我们在里面添加内容，再写个div作为，多行输入框的容器。

如上图，利用的是bootstrap3的输入框组。我这里写的就是个展示用的demo，之后用js进行动态生成的时候，好照着这个输入框组进行生成。

效果如下：

 

然后我们去做俩个按钮，一个添加，一个运行

为什么不做删除？因为麻烦～ 不想要的 把输入条件空着就行，系统不会对其进行计算的。

然后我们先搞定这个添加功能：

这个add函数要用来给div 增加子标签，也就是那个输入框组：

现在的效果如下：

点击进添加按钮

这里我们学到了一个新技巧，复制，我们之前的这种功能做法，是用creatElement的方式创建一个新的，然后添加到容器中，不过现在我们学习了新的方法，直接复制，简单快捷。

 

接下来就是运行功能。我们去写个运行函数：

这个运行功能，应该做什么事呢？

 

1. 获取上述表格的所有输入，并过滤掉名字为空的行。

2. 然后调用接口，把数据发给后台，并等待后台的结果。

3. 把结果展示出来。

 

标签：表格,番外,接口,正交,输入框,添加,div,我们,就是
来源： https://blog.51cto.com/u_15282986/2970952