测试平台系列(35) 编写全局变量管理页面

大家好,这里是米洛,一个想和大家一起分享测试开发相关的技术,面试经验和成长经历的博主!

欢迎大家关注我的公众号: 测试开发坑货

回顾

之前咱们编写了相关的后端接口,现在继续来写前端的页面。我换了个4k显示器,截图可能过于高清,流量党不建议立即观看。

这句话是写完了再写的,本篇内容学习指数0颗星,代码比较晦涩,讲解也不够充分,适合回看。

布局

先思考我们需要的组件:

  • 需要一个环境选择框,给用户选择当前所在的环境

  • 需要一个搜索框,通过key去搜索对应的变量

  • 需要一个添加变量的按钮

  • 需要一个表格,展示当前的数据内容
    对比前面的类似页面,我们新增的只有环境选择框,所以基本页面的样式还是不变,先来一张效果图。

测试平台系列(35) 编写全局变量管理页面 - 图1

可以看到还是分2栏,在添加变量按钮之前多了个环境选择框和label。

开始编写基本的React样式组件(类HTML)

测试平台系列(35) 编写全局变量管理页面 - 图2

黄色框和蓝色框分别是2个Row,将页面分割为上下2个部分。上面部分包含3个模块,对应3列:

  • 占二分之一屏幕宽度label + select 呈现环境选项框

  • 占四分之一屏幕宽度的空列

  • 占四分之一屏幕宽度的列,带一个Input输入框

其实大家阅读代码的话,可以把Row看做<select>

至于下面的Table就更简单了,他一个表格占据了24的宽度,也就是100%的宽度,第二个div要和第一个div有一定高度差距,所以需要margin-top: 8px

最后那个多出来的没有提及的FormForModal组件,是一个表单组件,用来填写变量信息,默认是隐藏的。

编写交互部分

这次我采取了dva管理全局状态,这块内容相对来说比较深奥,对大家来说有点难度。但是如果照着写,就大概能学着写了。

dva分2个模块去管理数据:

  • models
  • service

service目录存放所有和服务端打交道的方法,models以命名空间区分组件的变量,最终实现把组件所有变量搜集到一个大池子里面进行精细化管理。说的可能大家云里雾里,没关系,大概意思就是说,以前我们组件的状态都是在组件里面去定义的变量,但现在我们把它托管给dva,我们调用dva提供的方法去修改/获取这些值,这样不管我的组件嵌套多深,都没关系,我可以随时拿到这个命名空间下面的值。

所以我们需要先编写models里面的内容:

测试平台系列(35) 编写全局变量管理页面 - 图3

首先导出一个字典,里面namespace定义为gconfig,接着定义state变量,把变量都维护在里面。key_type指的是数值和变量类型的关系。

  • reducers
    这个是固定写法,基本上这里面写的方法都是用来更新状态的,也就是更新state里面的内容。

  • effects

测试平台系列(35) 编写全局变量管理页面 - 图4

这个是用来编写和后端交互的方法,也是很固定的写法。select可以从当前的状态里面拿到gconfig里面的state,call调用了后端方法,最后我们用put去调用reducers里面写的save方法,将状态更新,也就是更新data,pagination等数据。

这些大家暂时不明白没关系,dva是一种可选择的写法,也是一种状态管理的解决方案。看不明白是很正常的,我当时也是学着写,写了很久我才能不抄代码写出一个demo。

同样类似地,我们写出其他的几个方法:

测试平台系列(35) 编写全局变量管理页面 - 图5

调用新增接口后,重新获取最新的Gconfig(根据当前的page和搜索选项)

update接口也是如此。

完善交互部分

  • 为代码编辑器准备语言,不同的语言如JSON和String有不同的效果

测试平台系列(35) 编写全局变量管理页面 - 图6

  • 编写环境的表格columns

测试平台系列(35) 编写全局变量管理页面 - 图7

环境列如果是0代表全部环境,否则envMap里面没有的话,代表环境可能被删除了,给个红色未知的Tag展示。

测试平台系列(35) 编写全局变量管理页面 - 图8

操作栏还是一如既往,删除和编辑2个按钮。

  • fields是表单的字段

测试平台系列(35) 编写全局变量管理页面 - 图9

测试平台系列(35) 编写全局变量管理页面 - 图10

  • 获取环境列表方法和获取变量方法

测试平台系列(35) 编写全局变量管理页面 - 图11

dispatch代表调用models里面的方法,我现在调用namespace: gconfig下的fetchEnvList方法,拉取所有的环境。

getConfig通过page,size,env,key这4个参数,实现查询变量的功能。

  • 初始化操作

测试平台系列(35) 编写全局变量管理页面 - 图12

一开始,我们需要获取所有环境和获取当前变量,下面的useEffect,我们接受了第二个参数,一个数组:

意思是当分页里面的current,name,当前环境发生变化时,重新获取全局变量,这个功能很好用。

测试平台系列(35) 编写全局变量管理页面 - 图13

onFinish是表单提交的方法,老客户了。

save是修改state的方法,因为用的比较多,我把它抽成一个独立的方法。

演示一下useEffect的强大:

测试平台系列(35) 编写全局变量管理页面 - 图14

可以看到我们的选择框在变化的时候,只调用了修改currentEnv的方法,并没有重新去获取全局变量。但因为我们设置了useEffect,所以当环境发生变化的时候,我们依然会调用getConfig的方法。

测试平台系列(35) 编写全局变量管理页面 - 图15

最后的最后,我们把编写的Gconfig组件给connect起来,这步很难理解,不理解也没关系,反正会抄就行,抄下来改改就可以用其实loading也经过dva做了一层处理,不知道大家发现了没有呢?

测试平台系列(35) 编写全局变量管理页面 - 图16

前端代码仓库: https://github.com/wuranxu/pityWeb

后端代码仓库: https://github.com/wuranxu/pity