开发者社区> 游客pxprrm2iipsfu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 接口测试平台代码实现129: 全局变量-8
+关注继续查看

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


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

微信图片_20220705213807.png

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

    

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


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


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

微信图片_20220705213814.png

然后运行同步命令:

微信图片_20220705213820.png

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

微信图片_20220705213826.png

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

看下效果:

微信图片_20220705213832.png

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

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


首先来完成第一件事:

微信图片_20220705213838.png

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

微信图片_20220705213845.png

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

效果如下:

微信图片_20220705213851.png

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


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


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

微信图片_20220705213857.png

我们在下面写个叫change_check()的函数,当任意多选框被点击后,这个函数就会触发:微信图片_20220705213904.png

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

代码如下:

微信图片_20220705213910.png

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

微信图片_20220705213923.png

最后是views.py:

微信图片_20220705213933.png

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

微信图片_20220705214048.png

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
接口测试平台代码实现133: 全局变量-12
好,时隔半月的 实战系列继续更新。 让我们先回顾下现在的进度: 全局变量组的增删改查已经做完了。 然后我们想先插入到接口调试层功能里。 这其中涉及到 变量的占位 和替换。 我们做了一个大字符串的替换公共函数。 然后把url,header host等都塞进去换一遍出来,都成功了。
12 0
接口测试平台代码实现80: 多接口用例-20
接口测试平台代码实现80: 多接口用例-20
14 0
接口测试平台代码实现98:全局域名-5
接口测试平台代码实现98:全局域名-5
17 0
接口测试平台代码实现95:全局域名-2
接口测试平台代码实现95:全局域名-2
15 0
接口测试平台代码实现84: 多接口用例-24
接口测试平台代码实现84: 多接口用例-24
14 0
接口测试平台代码实现100:全局域名-7
本节作为全局域名的最后一节,也是代码实现的第100章。 我们本节就来实际去后台进行修改,让全局域名可以真实生效,目前我们接口库接口和用例库步骤,保存的host中,若是全局域名,前面四个字符一定是:“全局域名”
17 0
接口测试平台代码实现71: 多接口用例-11
好的因为群内大佬打赏的钱太多,所以履行承诺,加更一节: 本节主要处理掉,这个步骤保存的功能,其实对于跟到现在的同学来说,业务上的curd早就已经轻车熟路了。本节节奏稍快:
23 0
接口测试平台代码实现81: 多接口用例-21
接口测试平台代码实现81: 多接口用例-21
18 0
接口测试平台代码实现47:复制接口
接口测试平台代码实现47:复制接口
17 0
接口测试平台代码实现1:环境和所需技术
本节主要是要介绍下,做一个这样的测试平台,都需要提取掌握哪些技术呢?还没掌握的可以在看完本节之后,去好好学习一下相关技术。本公众号会用直白的土话给您讲讲,并不是百度百科那种晦涩难懂的定义哈。
23 0
+关注
游客pxprrm2iipsfu
我去热饭
435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载