接口测试平台代码实现37:接口请求的保存和取消

本节主要来讲一下，使用者在打开接口调试面板后，点击保存按钮，就会成功保存好，并且再次打开后，能显示出来呢？可能大家会觉得本节课没什么难度，就是简单的保存而已，但是实际上，本节是非常复杂的。因为接口的不同编码格式，我们保存起来的基本只有一个大字符串。要如何存储和展示是需要进行特殊设计的，类似 加密和解密，压缩和解压缩。

打开P_apis.html，先把取消功能写了：

如图在底部位置新增一个script，用来存放之后数个调试弹层的函数，请大家认真选好位置，因为本页面的后续div和script会非常非常多，如果不按照顺序和位置紧贴着写，很容易之后混乱，排查错误都费劲了

好，在这个script中写一个简单的funciton，作用为取消调试弹层，也就是不保存任何数据，直接隐藏该弹层。然后给取消按钮的onclick的属性写成这个ts_close函数。

启动服务，刷新页面试一下：

发现已经可以成功关闭这个弹层了。

接下来我们写一个funciton,用来保存接口设置。

注意，从现在开始，整个接口测试平台的开发难度会突然上一个台阶，这个保存函数也会非常巨大，请大家做好心里准备。毕竟之后还要上好几个难度台阶。

我们先来分析下这个保存函数的结构再开始落实：

首先

1.它要获取用户输入的所有数据

2.它要调用一个请求，把这些数据发给后台，中间要带上接口id

3.等到保存成功，它要关闭该调试弹层

好，我们刚刚做完了概要分析，现在需要进行详细设计：

三步中，后面俩步没什么可说的，主要是第一步，其中包含有以下小步骤：

1.获取请求方式

2.获取url

3.获取host

4.获取请求头

5.确认当前请求体的编码方式正在哪个页面

6.根据不同的编码方式页面，对其下面的请求体进行压缩

7.传递给后端的参数中，要有一个字段来记录请求体编码格式

好，已经基本分析完毕，具体如何进行请求体编码格式的压缩，我们会用一种很好理解并且接地气的方式进行。当然等到全平台系列结束后，同学可以自行升级/修改其中的压缩方式，但是建议不要现在就这样做，因为后续教程会依据本节的简单方式来进行开发。

好我们先来啃第一个步骤，获取所有数据：

首先是获取请求方式：,那就要给这个select加上id了。id=ts_method

然后在js函数中直接获取select的value即可：

然后是url：

然后是host：

然后是请求体header：

好了，我们已经把简单的都写完了，我们加一个输出，来显示一下，用来检测我们之前写的这一大堆代码有没有问题：

这里我们用alert 和 console.log都可以。大家看自己习惯吧。如果是console.log，则需要打开调试器-console，适合比较大型的数据排查

我们前面章节忽略了一个问题，就是我们input输入框的显示颜色都是白色，这样靠色了，所以我们要把三个输入框的color属性设置黑色：

最好我们要把保存按钮的onclick属性设置成ts_save函数：

好，让我们刷新页面，随便输入点东西，然后点击保存按钮看下显示：

看来是成功了，

接下来让我们删掉这个alert,来继续获取 用户当前的请求体设置方式：

这里我们要如何获取呢？通过观察，发现当我们点击不同的编码方式的标签页面时，对应的li的class属性会变成active 意思是活动状态。

那么我们可以通过jquery的简单代码来获取到 ul=mytab 下面所有li标签中class属性为active的那个li内的静态夹杂文案：

顺便alert弹窗显示测试一下：可以发现没问题：

然后我们写一个判断，来判断不同的编码方式下，我们获取不同的小div中的数据，然后进行不同的压缩成一个列表或字符串。

先判断为none时的请求体吧,直接为空就可以，算是偷懒的一种行为。

在其他的判断下面因为都比较复杂，所以我们一个一个来分析。

为form-data的时候，用户写的明显是一张表格，我们要如何把其中的二维数据拿到呢？变成一个字符串好还是一个列表呢？

当然是列表。

按照如下代码即可：

if(ts_body_method == 'form-data'){
      var ts_api_body = []; //新建这个空列表用来存放后续的数据
      var tbody_ = $("table#mytable tbody")[0]; //获取该表格的内容部分
      var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
      for(var i=0;i<trlist.length;i++) {
          var tdarr = trlist[i].children; // 获取tr下的俩个td
          var key = tdarr[0].innerText; // 获取key
          var value = tdarr[1].innerText; // 获取value
          ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
      }
      console.log(ts_api_body)
  }

测试结果如下：

看来是已经存储成功了。

本节内容到这里就暂时停下，大家好好消化一下。下节课要处理掉剩余的编码格式。

最后附上最新代码下载地址：

链接: https://pan.baidu.com/s/1aCn-z_4CA8IN3ySUtymt6Q 密码: 9468