回顾
上一节我们编写好了添加用例的接口,并且采用了jsonschema进行参数校验,当然不是很好的方式,起码解决了字段校验的问题。
那这一节我们就来做2个事情,一个是完成新增用例的页面,另一个呢,是展示我们已经添加好的用例。
思考新增用例页面
上一节我们已经提供了这样一个用例树的页面,注意这里有个+
的按钮,但是之前呢,他是没有任何效果的。
我这里解释一下,为什么点击+
不直接弹出新增用例的表单呢,那是因为后续我们可能会把用例的目录给放开,而不是像现在这样只有目录/用例,所以后续可能是添加目录用。
好了,我们现在要编写的就是用例的表单。按照鄙人的设计,里面就是填入一些核心数据,也就是一个用例的必备字段。
这里我把用例的setup+teardown会抽出来,作为单独的模块,一个最基础的用例不包含setUp和tearDown。又由于我们暂时只支持了HTTP
请求,所以核心字段如下:
-
用例名称
-
用例目录
-
优先级
-
状态
-
请求类型
-
tag
-
请求方式
-
请求地址
其他的作为可选性,如果需要的话可以自行添加,比如headers等等。笔者考虑的是把这些信息放入Drawer组件里面,供用户填写并提交表单的形式。
一些想法
之前笔者是边做边想,可能有很多东西在做的时候并不合理,不会是一个很完善的版本。所以笔者现在改变了打法,是先做完一部分,然后针对这部分内容讲解。所以如下是笔者编写的初版页面:
大致的页面分为2个部分吧,分别是用例信息和请求信息。
改造之前的postman页面
之前的postman.jsx是没有包装表单组件的,啥意思呢?也就是说,没有如下这种效果:
Form组件是antd中比较重要的一种,专门用于表单的校验。
但是因为我们之前的Postman页面需要开放给用户调试,所以我们需要编写一个新的组件,叫PostmanForm.jsx。
由于后面我们需要获取到headers的值,所以我们把headers/body和setHeaders/setBody方法抽离出来。
其实这里我要补充说明一下,因为对于react的hooks笔者不是很熟悉,可能存在状态管理混乱的问题,但是考虑到之前熟悉的DVA和Reducers相关的知识较为晦涩,所以我这边就不通俗地讲了,毕竟我们也不是专业的前端,有些东西要先去解决,再去优化才行。当然,如果有大佬有更好的处理方式,笔者也愿意虚心学习。
注意,我在url和请求方式都套上了Form.Item这个组件,这个组件可以将之变为表单的一项,所以就出现了上面gif的效果。但是却不得不拆分这2个控件,不然显示会有问题。
headers由于是列表,不好支持form,body又是第三方组件,所以我们就此别过。其他的代码基本上差别不大,与postman.jsx类似。
编写添加用例表单
-
效果图
-
代码部分
-
onOk
提交表单触发的方法,这边新添加body和header2个参数。
-
translateHeaders
因为我们的headers是list,所以我们要转换它为字符串。