接口测试平台代码实现129: 全局变量-8

我们在上一节中，搞定了全局变量的增删改查功能。

现在我们来梳理和回忆一下，这个功能整个的设计。

如图，我准备先设置俩组变量。这里要明确一个概念，每个按钮代表的是一个变量组，而不是一个变量，一个用户可以拥有多套变量组，每组内可包含多个变量。用户在之后的使用时，可以对具体的项目，设置生效的变量组。生效后，该项目的接口中引入的变量，才会去该变量组中找到对应的值。这点设计和postman类似。

所以，针对每个项目，我们都需要增加一个字段，该字段包含了该项目可以生效的变量组的id。

这个设计，同样也需要前后端共同配合实现。其中前端我们就设计成，用户通过具体项目进入全局变量设置页面的时候，带着项目所生效的变量组id，然后在所有变量组上通过可选框等体现出来。

首先我们去models.py中 对项目表增加字段：

然后运行同步命令：

在我们之前的设计中，项目的所有数据在进入全局变量页面时都已经带着了，所以我们现在直接去global_data.html 中进行实现即可：

如上图，我在每个变量组按钮后都加上了个多选框，以此来显示和设置 是否在此项目中生效。注意，其中的id和value都是变的，借助i.id让每个变量组都不同。而其中的name是固定的，所有都用的一个。所以我们后续的js代码中可以用getElementsByName 方法来一次性拿到所有框。

看下效果：

针对此框，我们要做的是俩件事：

1. 根据带进来的项目数据，来判断是否选中
2. 用户点击选中或取消时，请求后台真实的进行变更数据库。

首先来完成第一件事：

该端代码中 判断一个字符串是否在一个数组列表中运用了jq的 $.inArray方法，这种简单的判断如果在js中还是很麻烦的。

可复制：

<script>
      if("{{ project.global_datas }}" != "None" && "{{ project.global_datas }}" != ""){
          if( $.inArray(  "{{ i.id }}", "{{ project.global_datas }}".split(',') ) != -1 ){
              document.getElementById('check_{{ i.id }}').checked = 'checked'
          }
      }
</script>

如上图，我在循环内 都插入了一个小型的js代码，让其判断当前项目的公共变量是否是空或None,如果不是，则判断当前循环内的这个变量组的id是否在 列表格式的 项目生效变量组id的列表中。如果存在，则拼接成这个变量组多选框的id并把其变为选中状态。

我们来测试下：

用例1:当前项目属于旧项目，更改的表结构产生的新字段 是否会报错：

结果没有报错，通过。

用例2:新创建的项目，进入该页面是否报错：

结果也没报错，通过。

用例3:当前项目中是正常的选中了第一个变量组：

我们得首先去后台给该项目手动写一个global_datas来方便测试。所以记下现在的变量组1的id 然后去后台设置：

如果是多个则用英文逗号存储，不过后续的存储全是我们自动js负责，所以也不会出现错误也不用人去手动。

效果如下：

可以看到，显示效果已经成功了。

接下来我们要做的是，点击选中/不选中 的自动保存。

首先我们先来给所有的这个check_input增加一个 点击更改内容就触发js函数的 属性：onchange,顾名思义，和onclick都差不多哦。

我们在下面写个叫change_check()的函数，当任意多选框被点击后，这个函数就会触发：

写好后我们就要实现它了， 逻辑很简单，当被触发后，它就去统计最新的选择情况，然后连同项目id，一起发给后台，让后台更新数据库后，它在刷新本页面 即可实现效果。

代码如下：

function change_check() {
        // 获取所有选中的checkbox的值 组成列表 chk_value
        var chk_value =[];
        $('input[name="check_names"]:checked').each(function(){
        chk_value.push($(this).val());
        }); //依然是jq的方法

        // 把结果发送给后台
        $.get("/global_data_change_check/",{
            "project_id":"{{ project.id }}",
            "global_datas": chk_value.toString()
        },function (ret) {
            document.location.reload()
        })
    }

代码中依然使用了 $开头的 jquery的写法，大家可以学习下。

然后我们去urls.py中：

最后是views.py：

然后我们重启服务，刷新页面开始测试：

可以看到已经可以正常的 选中 取消 等操作了。

本节内容到此结束，下节课我们将进入 让全局变量生效阶段。首先就是在接口调试层的 嵌入使用。