接口测试平台-86: 全局请求头之显示+新增+保存+删除

1. 显示header

views.py：child_json，给它添加上请求头的数据

然后打开P_apis.html，找到相应的请求头设置代码，在里面先写个for循环来显示出这俩个请求头：

<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>

看看效果：

2. 新增header

创建一个新增按钮

创建这个新增js函数：

{#  新增  #}
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"));
}

看看效果：

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

3. 保存header

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

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

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

之后在js方法中有一个按照name数量进行的大循环，每次循环一行3个input，判断如果第一个input也就是name不为空，那么就添加到最终要发送给后端的数据中。

{#  保存  #}
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);
        }
    }
    console.log(req_names)
    console.log(req_keys)
    console.log(req_values)
}

获取了所有的input，并且新建了准备发送用的空列表。然后进行大循环，其中判断如果name框非空，则给这三个空列表都添加上数据。最后打印一下这三个数组列表看看效果：

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

$.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();
})

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

添加映射：

urls.py

url(r'^save_project_header/$', save_project_header),  # 保存项目公共请求头

views.py

# 保存项目公共请求头
def save_project_header(request):
    project_id = request.GET['project_id']
    req_names = request.GET['req_names']
    req_keys = request.GET['req_keys']
    req_values = request.GET['req_values']

    print(req_names)

    return HttpResponse('')

因为传输时把列表转变成了字符串，所以这里打印一下，看看这个字符串是什么样的，以便再变回列表

重启服务，刷新页面，保存请求头：

显然js自动用英文逗号拼接了这个数组列表，所以给反编译回来就行。代码上用一个循环遍历即可：

# 保存项目公共请求头
def save_project_header(request):
    project_id = request.GET['project_id']
    req_names = request.GET['req_names']
    req_keys = request.GET['req_keys']
    req_values = request.GET['req_values']

    names = req_names.split(',')
    keys = req_keys.split(',')
    values = req_values.split(',')

    DB_project_header.objects.filter(project_id=project_id).delete()

    for i in range(len(names)):
        DB_project_header.objects.create(project_id=project_id, name=names[i], key=keys[i], value=values[i])

    return HttpResponse('')

上图中，修改了旧的俩个的key和value，然后新增的有个空白行和俩个正常的。然后点击保存。然后再次打开：