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

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

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

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

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

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

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

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

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

然后运行同步命令:

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

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

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

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

看下效果:

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

针对此框,我们要做的是俩件事:

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

首先来完成第一件事:

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

该端代码中 判断一个字符串是否在一个数组列表中运用了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 然后去后台设置:

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

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

效果如下:

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

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

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

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

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

我们在下面写个叫change_check()的函数,当任意多选框被点击后,这个函数就会触发:接口测试平台代码实现129: 全局变量-8

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

代码如下:

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

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中:

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

最后是views.py:

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

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

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

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