接口测试平台代码实现98:全局域名-5

我去热饭

发布于 2022-05-19 09:31:20

5330

发布于 2022-05-19 09:31:20

文章被收录于专栏：测试开发干货

之前一节我们迅速复制粘贴搞定了全局域名的：

models.py，urls.py，views.py。

所以本节我们要搞定的是P_apis.html中的部分了。

首先看看我们现在的html页面的结构，全部收缩，看的直观一些：

如上图，我们开辟一块空间，用来存放全局域名，整体内容，基本和全局请求头类似，所以我们依然是复制粘贴，然后改各个标签的id和内部其他字段数据。

当然不要忘了给这个按钮onclick属性连接上我们的打开host设置框的函数:

（经常有同学反馈找不到图里的行数，其实我们可以通过ctrl+f 来搜索其中关键字。）

需要注意的是，请求头是 name = key : value ，每行三个框。

而域名是 name = host ，每行俩个框。

复制完后，改动的时候注意要一行一行的改。千万不要漏掉，整个过程要保持大脑非常清晰，虽然几乎全都是把header改成host，但是也要注意其他地方。当然,style内的样式属性基本不用改。但是注意，有些是host，有些是hosts。而且要保持好心态，因为一次性改动这么大一堆代码，很难做到一遍成，一次通。

改完后代码如下：（注意host输入框的宽度调整为了70%）

{# 全局域名 #}

<div id="project_host_div" style="display: none;border-radius:5px;width: 70%;height: 70%;
position: absolute;left: 15%;top: 15%;box-shadow: 4px 4px 8px grey;
padding-left: 10px;background-color: white">
    <div class="btn-group" style="float: right">
        <button onclick="project_host_save()" type="button" class="btn btn-success">保存</button>
        <button onclick="project_host_close()" type="button" class="btn btn-default">取消</button>
    </div>
    <h4>请设置本项目的全局公共请求头：</h4>
    <div id="host_plan">
        {% for i in project_host %}
            <input type="text" name="host_id" value="{{ i.id }}" style="display: none;">
            <input type="text" name="host_name" value="{{ i.name }}" style="width: 20%;margin-top: 3px" placeholder="name"> = "
            <input type="text" name="host_host" value="{{ i.host }}" style="width: 70%" placeholder="host"> "
            <br>
        {% endfor %}
    </div>
    <br>
    <button onclick="add_project_host()">新增</button>

</div>
<script>
    function project_host_div_show() {
        document.getElementById('project_host_div').style.display = 'block';
    }
    function project_host_close() {
        document.location.reload()
    }
    function project_host_save() {
        var names = document.getElementsByName('host_name');
        var hosts = document.getElementsByName('host_host');
        var ids = document.getElementsByName('host_id');
        var req_names= [];
        var req_hosts=[];
        var req_ids=[];
        for(var i=0;i<names.length;i++){
            req_names.push(names[i].value);
            req_hosts.push(hosts[i].value);
            req_ids.push(ids[i].value)

        }
        $.get('/save_project_host/',{
            "project_id":"{{ project.id }}",
            "req_names":req_names.toString(),
            "req_hosts":req_hosts.toString(),
            "req_ids":req_ids.toString(),
        },function (ret) {
            document.location.reload();
        })
    }
    function add_project_host() {
        var host_plan = document.getElementById('host_plan');
        var i0 = document.createElement('input');
        i0.name = 'host_id';
        i0.value = 'new';
        i0.style.display ='none';
        var i1 = document.createElement('input');
        i1.style='width: 20%;margin-top: 3px';
        i1.placeholder='name';
        i1.name='host_name';
        var i2 = document.createElement('input');
        i2.style='width: 70%';
        i2.placeholder='host';
        i2.name='host_host';
        host_plan.appendChild(i0);
        host_plan.appendChild(i1);
        host_plan.appendChild(document.createTextNode(' = " '));
        host_plan.appendChild(i2);
        host_plan.appendChild(document.createTextNode(' "'));
        host_plan.appendChild(document.createElement("br"));
    }
</script>

然后我们刷新页面，进行各种测试。我这边发现测试全部正常：