请求到后台百分号被删除原因_接口测试平台代码实现85: 全局请求头1

    本节开始要制作一些次要功能，但是也是非常实用的。比如项目内的全局请求头。

     首先看我们的前端页面，这个全局请求头的按钮：

我的设计是呢，点击后，出现一个弹层，这个弹层里除了保存/取消按钮 标题外。要有一个table表格。每一行就是一个该项目的全局变量-请求头。

像这样：

我们简化了删除功能，设计为每次点击保存按钮，js函数中只要为空的行会被自动删除。

而既然是变量，那么就需要有变量名和 变量值。变量名可自定义，变量值必须是key-value这种键值对。所以每行由三个输入框组成。

新增按钮会新建一个空白的行出来。这个过程是由js前端控制。

保存按钮的js功能，设计为，循环读取所有行内容，放到一个列表里，传递给后端，后端直接覆盖到数据库的该项目中。

设计基本上完事了，现在我们开始码前端代码：

首先是打开P_apis.html，找到一个风水宝地，新建一个大div作为这个弹层的底板。

大家先理解即可，最后我会提供可复制粘贴的完整div代码。

效果如下：

我们还是要先给它打开关闭的代码写好。

首先是它的style中 加入一个默认隐藏：

现在刷新页面 它应该已经不见了。

然后是在下面的按钮全局请求头的onclick中设置：

我们再去下面去新建这个js函数,它的作用就是打开这个div弹层。

然后是取消按钮的关联和对应js函数：

为什么取消就简简单单的刷新下页面就可以了呢？因为我设计是这个请求头数据是从进入这个接口库页面的时候 直接带进来，由{% for i in ... %} 来展示，每次我们修改后，无论是保存还是取消，都要刷新下页面也就会触发刷新下请求头数据。这个方法开发起来非常简单可靠。

        现在我们在把这个空空的save保存js函数也给它写上：

这个函数的设计是，拿到所有数据，加上项目id,发送给后端后，刷新页面。

{# 全局请求头 #}<div id="project_header_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_header_save()" type="button" class="btn btn-success">保存button>        <button onclick="project_header_close()" type="button" class="btn btn-default">取消button>    div>    <h4>请设置本项目的全局公共请求头：h4>div><script>    function project_header_div_show() {        document.getElementById('project_header_div').style.display = 'block';    }    function project_header_close() {        document.location.reload()    }    function project_header_save() {    }script>

之后我们去后台数据库层，建立一张专门存放这些公共请求头数据的表。

class DB_project_header(models.Model):    project_id = models.CharField(max_length=10,null=True) #所属项目id    name = models.CharField(max_length=20,null=True) #请求头变量名字    key =  models.CharField(max_length=20,null=True) #请求头header的 key    value = models.TextField(null=True) #请求头的value，因为有可能cookie较大，达到几千字符，所以采用大文本方式存储    def __str__(self):        return self.name

然后别忘了执行那俩句命令：

然后去admin.py中写上这个表：

然后我们重启服务，去后台，找到这个表，添加2个数据：

我的项目id是1，所以俩个header数据的project_id要写1，其他内容随便写。

然后，本节内容就到此为止了。欢迎持续关注和分享哦～

感兴趣的可以加群，加博主微信:qingwanjianhua 拉你入群

加社团：https://testerhome.com/wqrf

关注博主博客：https://wangzijia.blog.csdn.net/

点亮该项目:https://github.com/Woqurefan/ApiTest/

体验在线地址：http://47.97.77.125:8000/home/

本公众号：测试开发干货

最后帮群内小伙伴免费推广下公众号，欢迎山西的老乡们加入这个有爱互助的小圈子～ sxlfgx_club