测试平台系列(13) 编写类postman页面(2)

简介: 编写类postman页面(2)

编写类postman页面(2)


回顾

上篇文章说到,我们编写了postman的url栏,细心的观众可能发现了: 我们的url栏并没有请求方式的选择,那我们现在就来调整一下吧。

更改请求方式

1.jpg

image

其实很简单,将selectBefore改成如下代码即可,把可选项变成我们常用的4种HTTP请求方式。

2.jpg

image

在展开以后发现DELETE太长了以至于显示不全,所以我们需要给Select标签增加宽度:


const selectBefore = (
  <Select defaultValue='GET' style={{width: 120, fontSize: 16, textAlign: 'left'}}>
    <Option value='GET'>GET</Option>
    <Option value='POST'>POST</Option>
    <Option value='PUT'>PUT</Option>
    <Option value='DELETE'>DELETE</Option>
  </Select>
);

这里我们还稍微变更了一下样式,加大了字体为16号,并且文字左对齐。

3.jpg

image

编写中部标签部分


首先可以确定的是中间是标签页,这块比较复杂。因为各个标签页里面的内容不一样,所以我们其实是需要编写诸如ParamsHeadersBody等具体页面的。

至于为什么不完全仿照postman呢?因为咱们是借鉴它,不是实现它!所以我们对于有些功能是需要进行取舍的。


我们还是去ant design找tab(标签页),这里就不重复过程了。

4.jpg

image

5.jpg

效果图

编写Body部分


咱们先来尝试编写Body部分,先看看postman的页面:

6.jpg

image

老规矩,我们还是先进行拆解:

分上下2层,上层由3个组件组成,分别是Radio即单选框,下拉选择和文本按钮。这个结论呢,是我比较熟悉ant design组件的情况下总结出来的,你们不熟悉的话,需要多加练习,这是一个循序渐进的过程。


下层呢,就是一个JSON编辑文本框了,稍微简单一些。

我们还是先来编写上层,首先我们编写Radio部分:

7.jpg

image

在Body tab下面另起一行,这里Row可以视为div

然后Radio.Group是antd里面的固定用法,用于按钮分组,Radio就是单选按钮了,我仿照postman,把里面的所有选项都代入进来,看看效果:

8.jpg

image

接着我们去编写raw里面的JSON下拉菜单。

有小伙伴可能注意到了,只有当这个类型为raw的时候才会出现JSON的选择框,也就是说这个按钮出不出现是跟我们的选项有关系的。

所以我们需要用到React的状态管理:

  • 先引入useState


import React, {useState} from 'react';
  • 然后设置一个变量,用于存放body的类型:

9.jpg

image

其中bodyType是变量名,setBodyType是改变bodyType的方法,none是bodyType的默认值。

  • 修改Radio相关组件
    由于之前我们的组件是非受控组件,现在我们让它受控起来。什么叫非受控组件呢,非受控组件指的是,如果你没有给组件指定相关的值和改变方法,则他自己在内部维护了一套,所以我们刚才切换radio的时候没有什么障碍。
    受控组件的意思是这个组件你完全可控,它怎么动,能不能动,都该你掌控。
    更多相关信息可以自己去百度查阅。


<Radio.Group defaultValue='none' value={bodyType} onChange={e => setBodyType(e.target.value)}>
  <Radio value='none'>none</Radio>
  <Radio value='form-data'>form-data</Radio>
  <Radio value='x-www-form-urlencoded'>x-www-form-urlencoded</Radio>
  <Radio value='raw'>raw</Radio>
  <Radio value='binary'>binary</Radio>
  <Radio value='GraphQL'>GraphQL</Radio>
</Radio.Group>


这时候去页面上看,不会有什么变化,但是此时组件已经变得可控,你能清楚地知道它当前选中了什么值

  • 编写JSON下拉框

10.jpg

image

先来讲解一下,这句话的意思。

其中最外面的{}代表一个代码块,里面可以编写代码。bodyType === 'raw' ? xx: null 这个很简单,大家都知道这是个三元表达式。

那么这句话的意思是什么呢?意思就是如果bodyType等于raw,那么就渲染下拉框,否则显示为null,意思是什么都不展示。

我们来补充一下下拉菜单:

11.jpg

可以看到有许多种

12.jpg

image

看看显示效果:

14.jpg13.jpg

image

但是这里有个问题就是,这边的选项改变以后上面还是显示JSON,所以意思是这里也需要受控,我们要根据他选择的数据来显示具体的内容。

同理我们需要设置一个rawType变量,默认值为JSON:


image

接着我们要给菜单添加点击事件,当click对应的类型时,把rawType改成对应的值。

15.jpg

image

核心方法如图,首先我们创建了一个方法叫onClickMenu,这个方法用来修改rawType,当点击Text的时候传入Text参数,其他的同理。

看看效果:

16.jpg

image


本来想一次性写完代码算了,但是又想展示整个编写过程,感觉这样效率比较低,这一节说完才写了这么点东西,尴尬。不管怎么说,今天先到这里吧。




目录
打赏
0
0
0
0
6
分享
相关文章
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
电竞陪玩系统架构涵盖前端(React/Vue)、后端(Spring Boot/php)、数据库(MySQL/MongoDB)、实时通信(WebSocket)及其他组件(Redis、RabbitMQ、Nginx)。通过模块化设计、微服务架构和云计算技术优化,提升系统性能与可靠性。同时,加强全面测试、实时监控及故障管理,确保系统稳定运行。
postman接口测试工具详解
Postman是一个功能强大且易于使用的API测试工具。通过详细的介绍和实际示例,本文展示了Postman在API测试中的各种应用。无论是简单的请求发送,还是复杂的自动化测试和持续集成,Postman都提供了丰富的功能来满足用户的需求。希望本文能帮助您更好地理解和使用Postman,提高API测试的效率和质量。
108 11
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
Postman 如何进行性能测试?
Postman 如何进行性能测试?
203 1
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
187 1
vertx的学习总结6之动态代理类和测试
本文是Vert.x学习系列的第六部分,介绍了如何使用动态代理在事件总线上公开服务,以及如何进行Vert.x组件的异步测试,包括动态代理的创建和使用,以及JUnit 5和Vert.x测试工具的结合使用。
39 3
vertx的学习总结6之动态代理类和测试
Java|让 JUnit4 测试类自动注入 logger 和被测 Service
本文介绍如何通过自定义 IDEA 的 JUnit4 Test Class 模板,实现生成测试类时自动注入 logger 和被测 Service。
50 5
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
89 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等