前端对所有文件请求添加header_接口测试平台代码实现87: 全局请求头2

最新推荐文章于 2025-05-16 12:14:06 发布

Sy　73

最新推荐文章于 2025-05-16 12:14:06 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签：前端对所有文件请求添加header

本文链接：https://blog.youkuaiyun.com/weixin_42511255/article/details/112310579

该博客介绍了如何在前端实现对所有文件请求添加自定义header。首先在后端views.py中添加请求头数据，然后在P_apis.html中通过for循环展示请求头。接着，创建新增、保存功能，利用js动态新增input框，并遍历所有input，将非空name的input数据传递给后端。在后端接收并处理这些数据，完成请求头的保存。最后，展示了功能实现后的效果，包括修改、删除和新增请求头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

首先我们找到进入接口库的后端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        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中写好对应：