接口测试平台代码实现87: 全局请求头-2-阿里云开发者社区

接口测试平台代码实现87: 全局请求头-2

2022-06-25 185

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 书接上回，我们已经在数据库中手动创建了俩个公共请求头。所以本节的主要任务是要让这俩个请求头显示在前端上。

首先我们找到进入接口库的后端views.py中的控制数据的函数：child_json。给它添加上请求头的数据。微信图片_20220625143736.png

然后打开P_apis.html,找到我们相应的请求头设置代码：微信图片_20220625143743.png

我们接下来要在里面先写个for循环来显示出这俩个请求头：微信图片_20220625143751.png

 <div id="header_plan">
      {% for i in project_header %}
          <input type="text" value="{{ i.name }}" style="width: 20%;margin-top: 3px" placeholder="请求头name"> = {"
          <input type="text" value="{{ i.key }}" style="width: 15%" placeholder="请求头key"> " : "
          <input type="text" value="{{ i.value }}" style="width: 50%" placeholder="请求头value"> "}
          <br>
      {% endfor %}
  </div>

看看效果：微信图片_20220625143757.png

显示功能我们已经搞定了。然后是新增。我们就创建一个新增按钮。微信图片_20220625143805.png

它的onclick直接写好。然后我们去创建这个新增js函数：微信图片_20220625143811.png

function add_project_header() {
    var header_plan = document.getElementById('header_plan');
    var i1 = document.createElement('input');
    i1.style='width: 20%;margin-top: 3px';
    i1.placeholder='请求头name';
    var i2 = document.createElement('input');
    i2.style='width: 15%';
    i2.placeholder='请求头key';
    var i3 = document.createElement('input');
    i3.style='width: 50%';
    i3.placeholder='请求头value';
    header_plan.appendChild(i1);
    header_plan.appendChild(document.createTextNode(' = {" '));
    header_plan.appendChild(i2);
    header_plan.appendChild(document.createTextNode(' " : " '));
    header_plan.appendChild(i3);
    header_plan.appendChild(document.createTextNode(' "}'));
    header_plan.appendChild(document.createElement("br"));
}

所用知识全是已经学过的。看看效果：微信图片_20220625143817.png

注意这里的新增功能，只是用js在前端增加了空input框，并没有真实的去修改数据库，一刷新就没了。

接下来我们做保存功能：

保存功能我们就遍历所有这个输入框，然后成为数组传递给后端。如果name是空的，那么直接抛弃掉后面的key-value，当做删除功能了。

但是我们要靠什么东西一下获取到所有的input框呢？很显然，是name，name属性可以重复，我们可以用getElementsByname方法直接获取到所有。

但是目前我们的这些input并没有name，所以我们要先加上name属性。

微信图片_20220625143825.png 微信图片_20220625143832.png

之后我们在js方法中会有一个按照name数量进行的大循环，每次循环一行3个input，判断如果第一个input也就是name不为空，那么就添加到我们最终要发送给后端的数据中。微信图片_20220625143840.png 我们获取了所有的input，并且新建了准备发送用的空列表。然后进行大循环，其中判断如果name框非空，则给这三个空列表都添加上数据。最后打印一下这三个数组列表看看效果：

微信图片_20220625143849.png 微信图片_20220625143858.png

然后我们写一个请求传递给后端后就算ok；

微信图片_20220625143951.png

这里我们也要加上project.id，不然后台不知道是给哪个项目更新公共请求头

完整可复制版本：

function project_header_save() {
    var names = document.getElementsByName('header_name');
    var keys = document.getElementsByName('header_key');
    var values = document.getElementsByName('header_value');
    var req_names= [];
    var req_keys=[];
    var req_values=[];
    for(var i=0;i<names.length;i++){
        if(names[i].value != ''){
            req_names.push(names[i].value);
            req_keys.push(keys[i].value);
            req_values.push(values[i].value);
        }
    }
    $.get('/save_project_header/',{
        "project_id":"{{ project.id }}",
        "req_names":req_names.toString(),
        "req_keys":req_keys.toString(),
        "req_values":req_values.toString()
    },function (ret) {
        document.location.reload();
    })
}