之前一节我们迅速 复制粘贴搞定了 全局域名的：
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>
然后我们刷新页面，进行各种测试。我这边发现测试全部正常：
好，本节内容到此结束，欢迎大家持续关注和分享。
下节我们去把这个全局变量-域名插入到接口库/用例库 的使用中的前后端开发。
