编写类postman页面(3)

回顾

记得上一节我们编写了postman的中间部分,其实还有header部分的一些表单数据没有编写完成,今天我们就尽量完成它并且尝试跑一个小小的demo。

寻找可编辑表格组件

测试平台系列(14) 编写类postman页面(3) - 图1

可以看到这里比较简单,基本上就是2块: 文字部分可编辑表格

可编辑表格的话,我们可以自己写,也可以直接用现成的。我们为了傻瓜一点,就采用ant design pro封装好的高阶组件(意思是功能齐全,简单好用)

具体地址: ProComponents

测试平台系列(14) 编写类postman页面(3) - 图2

那么这个就是我们需要的,由于我们用的JavaScript而非TypeScript,所以呢我们需要复杂一点找到对应的源码:

测试平台系列(14) 编写类postman页面(3) - 图3

测试平台系列(14) 编写类postman页面(3) - 图4

在弹出的网站就可以找到对应的JS代码了!

我们这个项目本来就带有了pro的组件,所以不需要额外安装了哈。(亲测新版本还有点问题)

编写可编辑表格雏形

首先呢,我们这个组件是postman组件,但是其实这个可编辑组件是可以和后面的headers标签进行复用的,所以我们单独把这个组件抽出来封装。

新建src/components/Table/EditableTable.jsx

测试平台系列(14) 编写类postman页面(3) - 图5

代码基本上是复制过来的,但是我们抽取了几个重要的参数:

  • columns
    由于我们的每个表格的字段可能不一样,所以说我们不能写死

  • dataSource
    实际数据,本来不是这样的,但是发现这个组件有点bug,让我有点小尴尬

  • setDataSource
    改变dataSource的方法

  • title
    比如这里我们需要的title是Query Params

测试平台系列(14) 编写类postman页面(3) - 图6

注意这里,这里我是从columns中拿到真实字段,因为咱们还有其他字段比如后面的删除,拿到之后在用户点击新增一行数据的时候默认给字段加上值。

引入表格组件并编写columns

测试平台系列(14) 编写类postman页面(3) - 图7

  • columns

测试平台系列(14) 编写类postman页面(3) - 图8

我设置了3个字段分别是KEY,VALUE, DESCRIPTION。与postman是保持一致的,然后最后一列我设置了一个图标(删除),删除方法自己手动编写了(还是因为他有bug,无法删除)。因为我在官网没改源码的情况下也发现无法删除

看看效果:

测试平台系列(14) 编写类postman页面(3) - 图9

其实postman做的更精致,下面的数据会改变url的内容。接下来我们也把这块实现了吧。

改造URL

现在我们有了params参数,那么我们的url就由2部分构成了:

  • url
  • params

所以我们原先的url改变的时候如果有参数变动则需要修改参数项目,如果参数项目有变动也需要修改url

由于这个ProTable有一点点bug,笔者也搞了好久今晚,不过最后顺利完成了,大家pull最新的代码就可以看到效果了。可惜的是今天浪费太多时间了,就只简单对代码稍作描述了。

测试平台系列(14) 编写类postman页面(3) - 图10

这个表格组件有些变化:

  • 把正在编辑的key和修改可编辑key的方法抽离出来了
  • extra函数用来在表格数据变动的时候做一些额外的变动,因为表格变化我们得去更新url

拼接url的方法

测试平台系列(14) 编写类postman页面(3) - 图11

url的规则是 http://www.xxx.com + ?参数1=值&参数2=值2

所以第一个参数用?隔开,后面都是用&,代码写的很清楚了。

拆解url的方法

测试平台系列(14) 编写类postman页面(3) - 图12

这里写的比较复杂,首先判断url里面有无参数,没有的话就把表单数据清空。接着就是取url的数据组成新的表单。但是表单的每一行是用时间区别的,这里js执行太快,所以我以数组索引+时间+10的方式,就算now全都一样,也没关系,因为索引肯定不一样,避免了一下子添加多行的问题(当然你们是看不到这个问题的)。

删除参数

测试平台系列(14) 编写类postman页面(3) - 图13

删除参数的时候也重新拼接url给url输入框

输入框url变化也改变参数表格

测试平台系列(14) 编写类postman页面(3) - 图14

新增了一些变量和set变量的方法

测试平台系列(14) 编写类postman页面(3) - 图15

文件总体代码可以去github看,这里篇幅有限就不贴了。

最终效果

找了个截图软件,让大家看看效果吧,晚安。

测试平台系列(14) 编写类postman页面(3) - 图16

广告时间

预览地址: http://47.112.32.195/

后端代码地址: https://github.com/wuranxu/pity

前端代码地址: https://github.com/wuranxu/pityWeb

欢迎关注公众号测试开发入坑,还有加群一起讨论相关问题呀!如果群二维码过期了,可以加我个人微信: wuranxu 我拉你进群~

测试平台系列(14) 编写类postman页面(3) - 图17

测试平台系列(14) 编写类postman页面(3) - 图18