测试平台系列(33) 编写环境配置页面(下).md

2022/6/13 测试平台接口测试FastApiPythonReact

阅读本文可能需要一些时间,建议通勤/蹲坑的时候观看。

# 回顾

上篇编写了一部分结构,还剩下表格没有编写。以及和后端接口的联调,也会在本文补充。

# 补充Table内容

在此之前,我们给新增环境这个按钮加一个icon,这样会更直观。

icon地址: https://ant.design/components/icon-cn/ (opens new window)

点击复制

其实icon也是一个组件,我们把它嵌入到Button

# 补充Table组件

需要注意的是,这里和html有大不一样的地方了。因为我们需要用到antd的Table组件,所以我们按照规矩行事,根据它需要的参数传入对应的数据就行。

先理解一下官网的最基本的表格例子

  • dataSource

    一个json数组,里面呢,存放的是数据信息,这个数据我们从哪儿来呢?从后端接口/config/environment/list获取。

  • columns

    这个是表格的列配置信息,也是个json数组,key代表列的key,title代表表头的名字,dataIndex代表从dataSource的数据里面取什么字段,比如上图的address,代表这一列的内容是从address里面取的。

我们先copy官网的代码,看看效果

可以看到,我们实现了想要的效果

但是这样还不够,数据和内容都不是我们想要的,所以我们还需要改造。

  • 改写columns

    我们有自己需要展示的列和字段:

其实我们需要展示id,环境名,备注,创建人和更新时间就可以了。所以列就这几项,但是因为我们还需要编辑某一行和删除某一行的功能,所以我们需要再定义一列。

定义一列操作列

操作列提供了2个链接a,分别是编辑和删除,用Divider隔开,这个是分割线。

  • 暂时改变dataSource的值

    因为这里的数据都是写好了的,并不是真正的接口返回,可以说是假数据。我们为了测试列名显示的情况,我们自己给他进行一些调整。

对应上columns里面的remarks,name,create_user等等

显示效果如下

大体上我们已经完成了html结构的编写,接着我们需要补全功能。其实路还很长,我们需要改动的地方还很多,建议大家耐心看。

# 拿到真实数据

上述我们是造了一个假数据,那我们怎么拿到真实数据呢?首先,我们需要维护一个变量,举个例子叫: data,它默认是空数组,也就是没数据。当我们请求了/config/environment/list接口以后,更新data变量,由于react会自动判断变量的更新并update页面内容,所以我们需要做的事情就变得很简单了。

  • 维护data变量

state大家注意,这个是一个固定的写法,别换成别的,react会自动监听Environment组件的state变量里的数据内容。这么理解,state等于是一个动态变量池,你在里面放入一个data,当state里面的data发生变化,react会自动检测data是否在dom上有显示,有的话就自动更新

同时,我们还要把原来的dataSource去掉,换成data。

  • 编写获取后端的接口

这边我们一次性把增删改查的接口都编写好,以便之后去使用。其实就是request请求,然后传入对应的请求方式和url地址+参数等。注意以下图中post和get的区别。

有同学可能注意到了,第一个listEnvironment接口method下面一行的params,怎么不是key-value的形式?有同学知道的吗?

其实这里是一个省略的写法,当key的名字和value变量名一样的时候,可以省掉key。也就是说:

{key: key}可以简写为{key},注意:前面的key是字符串,后面的key是变量。这个大家要搞明白才能玩得转!

  • 需要维护的变量

    由于我们的环境列表获取页支持分页,所以在获取列表的时候,需要加上当前page和size2个参数。这边我们还得维护一个变量: pagination,这样当我们用户切换页码的时候,我们可以去请求对应page的环境列表。

默认current为第1页,pageSize为8,数据总数为0

由于我们的list接口还需要一个name参数,而这个name也会进行更换,所以我们也要维护一个name的变量。

  • 编写获取环境列表的方法

这个方法接受page, size和name3个参数,如果不传入的话,默认为state里面的值。为啥要设定参数,这个说来话长,因为react的修改状态不是立马生效的,是异步的。

举个例子,你在翻页的时候,想的是更新了页码的当前页从1->2,然后重新调用fetchEnvironmentList方法,可能还是取的第一页数据。所以我们需要支持参数化,这样更可控

如果请求成功,我们就更新data的数据为response.data, pagination的total字段为res.total。

这里有个细节要值得注意:

我们更新状态,必须用this.setState,不能直接去修改它的值。比如: this.state.data = xxx,这样是不对的。

  • 思考什么时候会发生获取环境列表的调用

    其实有2个地方,第一个是我刚进来,你要给我展示第一页的数据。第二个是我搜索的时候,你也要给我展示新的数据。

我们加上一个这样的方法,componentDidMount是react的一个固定的写法,也是继承自Component的方法,代表这个组件加载后执行的方法,这个方法仅仅会被执行一次,满足了我们的需求(一进来就获取环境信息)。

看看效果

那个创建人为1的地方,大家先忽略掉,因为我存的是用户id。

# 编写查找的方法

首先我们需要改写搜索框,当搜索框的文本有变化的时候,我们需要去更新name,其次是用户点击搜索按钮或回车的时候,我们要去根据输入的内容搜索对应的环境。

  • 改写搜索框

注意一下,这个输入框的内容的value是this.state.name,然后onChange是antd为Input输入框提供的方法,e.target.value可以拿到用户输入的新值,接着我们根据新的值改写name即可。

onSearch方法,实际上调用了fetchEnvironmentList方法,第三个参数传入了当前用户输入的name。

# 编写新增/修改功能

其实新增和修改很简单,我们想象有一个对话框,里面可以填写环境名和备注,那不就o了吗?雀氏如此!

复杂的表单,antd都给我们封装好了,博主这里又进一步封装了一层,有兴趣的可以去看具体的源码。

我们想做的就是,点击新增环境按钮,给咱家弹出一个对话框,那对话框啥时候显示,是不是很明了了呢?你点的时候就显示,X掉就不显示了。

所以我们需要一个visible的变量(默认为false),去管理我们对话框是否出现。还需要一条记录record,用于初始化表单的数据。

Modal(也就是对话框)我们已经编写好了,onFinish代表的是表单的提交动作,在这里有2种:

  • 新增环境

  • 编辑环境

    怎么区分它们呢?我们根据record里面的id是不是0来区分,如果不是0说明是编辑动作,否则则是新增动作。所以我们在点击新增环境按钮的时候,需要把record也进行下修改。

可以看到我们可以正确获取到表单的数据

接着我们来编写onFinish方法:

如果成功提交,我们需要关闭对话框!最终我们重新获取一遍数据,嘿嘿。

最后,我们需要为编辑按钮添加一个点击事件: 显示出对话框并把表单初始化为这行数据。

# 编写删除方法

删除很简单,只需要传入record.id给onDelete方法,并调用到后端接口即可。

你以为,这就结束了?其实还有2个地方!有没有想过,我们没有处理table翻页的情况,还有个就是上面的创建人是数字的情况。

# 编写翻页功能

只需要在table的onChange事件里面调用获取环境列表的方法即可。注意,pagination参数是当前你要翻的页面,比如你从第一页到第二页,那么pagination的数据是{current: 2, pageSize: 8},这个大家可以自己console.log输出试试。还得指定pagination参数为this.state.pagination。

# 简单地替大家尝试一下

其实拆分不太合理,下篇花了太多时间。但是也不想花费太多篇章了。辛苦大家耐心看完了!不太完整的前端教程就到这里了~

前端代码仓库: https://github.com/wuranxu/pityWeb (opens new window)

后端代码仓库: https://github.com/wuranxu/pity (opens new window)