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

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

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

回顾

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

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

布局

先思考我们需要的组件:

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

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

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

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

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

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

黄色框和蓝色框分别是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里面的内容:

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

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

• effects

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

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

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

调用新增接口后，重新获取最新的Gconfig（根据当前的page和搜索选项）

update接口也是如此。

完善交互部分

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

• 编写环境的表格columns

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

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

• fields是表单的字段

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

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

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

• 初始化操作

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

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

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

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

演示一下useEffect的强大:

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

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

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

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