接口测试平台-35：接口请求的保存/取消

使用者在打开接口调试面板后，点击保存按钮，就会成功保存好，并且再次打开后，能显示出来呢？

可能大家会觉得本节课没什么难度，就是简单的保存而已，但是实际上，本节是非常复杂的。

因为接口的不同编码格式，保存起来的基本只有一个大字符串。

要如何存储和展示是需要进行特殊设计的，类似 加密和解密，压缩和解压缩。

 

1. 搞定取消

打开P_apis.html，先把取消功能写了：在script中写funciton，作用为取消调试弹层，直接隐藏。

然后给取消按钮的onclick的属性写成这个ts_close函数。

刷新页面测试一下

 

2. 搞定保存

分析下保存函数的结构：

• 要获取用户输入的所有数据
• 要调用一个请求，把这些数据发给后台，中间要带上接口id
• 等到保存成功，要关闭该调试弹层

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

• 获取请求方式
• 获取url
• 获取host
• 获取请求头
• 确认当前请求体的编码方式正在哪个页面
• 根据不同的编码方式页面，对其下面的请求体进行压缩
• 传递给后端的参数中，要有一个字段来记录请求体编码格式

 

先来啃第一个步骤，获取所有数据

• 所有数据（不含body）

 

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

 

输出看下结果：

alert(ts_method+ts_url+ts_host+ts_header+ts_body_method)

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

• 获取body

当点击不同编码方式的标签页面时，对应的li的class属性会变成active。

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

效果如下：

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

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

 

• none

if (ts_body_method === 'none') {
    const ts_api_body = '';
}

• form-data列表

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

效果如下：

看来是已经存储成功了。

 

下节课要处理掉剩余的编码格式。