首先我们找到进入接口库的后端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>
看看效果：
显示功能我们已经搞定了。然后是 新增。我们就创建一个新增按钮。
它的onclick直接写好。然后我们去创建这个新增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框，并没有真实的去修改数据库，一刷新就没了。
接下来我们做保存功能：
保存功能我们就遍历所有这个输入框，然后成为数组传递给后端。如果name是空的，那么直接抛弃掉后面的key-value，当做删除功能了。
但是我们要靠什么东西一下获取到所有的input框呢？很显然，是name，name属性可以重复，我们可以用getElementsByname方法直接获取到所有。
但是目前我们的这些input并没有name，所以我们要先加上name属性。
之后我们在js方法中会有一个按照name数量进行的大循环，每次循环一行3个input，判断如果第一个input也就是name不为空，那么就添加到我们最终要发送给后端的数据中。
我们获取了 所有的input，并且新建了准备发送用的空列表。然后进行大循环，其中判断如果name框非空，则给这三个空列表都添加上数据。最后打印一下这三个数组列表看看效果：
然后我们写一个请求传递给后端后就算ok；
这里我们也要加上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(); }) }
然后我们去urls.py中写好对应
然后去后台views.py中写好对应函数
这里我们因为传输的时候 把列表转变成了字符串。所以这里我们打印一下，看看这个字符串是什么样的，以便我们再变回列表：
重启服务，刷新页面，保存请求头：
很显然，js自动用英文逗号拼接了这个数组列表，所以我们一会给反编译回来就行，很简单。
代码上我们用一个循环遍历即可：
重启服务，运行试试：
上图中，修改了旧的俩个的key和value，然后新增的有个空白行和俩个正常的。然后我们点击保存。
然后再次打开：
看到这个效果，就代表实现成功了！
增加/删除/修改 功能于一身的设计看来比较不错。
好了本节就到这结束，下节课我们要让这些公共请求头实际可以添加到接口库和用例库中使用了。
