编写类postman页面(4)
回顾
在上一节我们终于搞定了Params这个难啃的骨头,接下来我们要编写headers,与之类似的组件,一起来试试吧~
思考
思考一下,headers和params都是键值对的形式,似乎不需要太大的改动,咱们有现成的可编辑表格,所以做起来会很方便。
编写Header模块
其实照理说这种模块比如params还有headers都可以抽出为单独的组件,不过这里我觉得似乎复用的地方比较少,所以这个看人,其实也是可以抽出来的,毕竟一个组件如果太大了肯定会出现很多耦合问题。
观察postman的headers构造
可以看到postman的功能非常多,headers可以隐藏,也给了默认的headers,这边我们就简单点,说话的方式简单点。只保留核心表格就行了!
- 新增变量存放headers信息以及正在编辑的key信息
-
字段方面我们可以复用一部分
但是需要稍稍改动,因为在删除的时候,params除了要更新表格以外,还需要修改url。
思路是把columns变成一个纯函数,参数为params的时候返回params的内容,为headers时返回headers的内容,其他的没有变化。
- 改动onDelete方法
上一步改动就是为了onDelete能够对不同的类型做出不同的删除操作,如果不是params则不修改url了。
- 最后是再引入一个可编辑表格
title是headers,没有extra,数据是headers和setHeaders等。
- 调整一下EditableTable组件
看看效果
编写Body(重头戏来了)
首先需要了解一下,咱们的body里面其实是代码编辑器,我们可以采用开源的monaco react版本,需要了解详情的话可以去它的官网看。
注意: 我们暂时只支持JSON类型的请求体,后面会增加form和file等等,因为我已经实在要看到成果了。。。
- 安装@monaco-editor/react
npm install @monaco-editor/react --save
- 编写编辑器组件
src/components/Postman/CodeEditor.jsx
对于那种可传可不传的变量,就给一个默认值,比如height
和theme
,因为它支持黑色主题哦。
- 引入组件
判断bodyType是不是raw,如果是raw才显示此组件,否则显示null。三元表达式大家应该都清楚。
然后包装了一层卡片,因为原先的不带有边框,所以我这里用Card组件包装了一层,然后给边距设置为0。
看看效果
总体还是不错的吧?至此,我们一期的功能基本上就快要搞好了,还差一个相应信息栏。后面的业主别急,慢慢来。
来个动图感受下吧
联调接口
- 编写请求方法
import request from '@/utils/request';
import { CONFIG } from '@/consts/config';
export async function request(params) {
return request(`${CONFIG.URL}/request/http`, {
method: 'POST',
data: params,
});
}
-
编写组装headers的方法
因为headers是一个map,所以咱们需要把它从数组变为map。
- 创建一些状态
loading
用来在请求的时候显示一个loading的状态
method
将请求方式的select组件改成了受控组件,因为我们需要拿到它的值。
response
后续我们会需要显示出具体的结果。
- 编写组装请求数据的方法
onRequest
这个方法是点击到Send按钮后执行的方法,可以看到首先让Send按钮处于加载中,防止重复点击。然后判断参数是否合理,不合理直接弹出提示(待会会有动图演示)
最后就是改回原来的状态并设置返回结果了。
后端调整
由于在我试用的过程中发现,后端遇到了几个的问题。
- 如果response是文本或者非JSON,那么程序会直接报错
- 如果headers没有传入,那么程序也会报错
解决办法如图,如果能转为JSON,就直接转为JSON,否则返回text。
如果没有headers则直接返回{}而不去遍历headers了。
ps: response_header也需要判断,见完整代码。
完整代码:
import datetime
import requests
class Request(object):
def __init__(self, url, session=False, **kwargs):
self.url = url
self.session = session
self.kwargs = kwargs
if self.session:
self.client = requests.session()
return
self.client = requests
def get(self):
return self.request("GET")
@staticmethod
def get_elapsed(timer: datetime.timedelta):
if timer.seconds > 0:
return f"{timer.seconds}.{timer.microseconds // 1000}s"
return f"{timer.microseconds // 100}ms"
def request(self, method: str):
status_code = 0
elapsed = "-1ms"
try:
if method.upper() == "GET":
response = self.client.get(self.url, **self.kwargs)
elif method.upper() == 'POST':
response = self.client.post(self.url, **self.kwargs)
else:
response = self.client.request(method, self.url, **self.kwargs)
status_code = response.status_code
if status_code != 200:
return Request.response(False, status_code)
elapsed = Request.get_elapsed(response.elapsed)
data = self.get_response(response)
return Request.response(True, 200, data, response.headers, response.request.headers, elapsed=elapsed)
except Exception as e:
return Request.response(False, status_code, msg=str(e), elapsed=elapsed)
def post(self):
return self.request("POST")
def get_response(self, response):
try:
return response.json()
except:
return response.text
@staticmethod
def response(status, status_code=200, response=None, response_header=None,
request_header=None, elapsed=None, msg="success"):
request_header = {k: v for k, v in request_header.items()} if request_header is not None else {}
response_header = {k: v for k, v in response_header.items()} if response_header is not None else {}
return {
"status": status, "response": response, "status_code": status_code,
"response_header": response_header, "request_header": request_header,
"msg": msg, "elapsed": elapsed,
}
简单输出一下返回结果
感觉篇幅已经很长了,文字的方式太慢了,🤔要不要出个视频呀?不然的话我感觉打字好累,效果还一般。
直接来看一个完整的例子,测自己的接口:
广告时间
后端代码地址: https://github.com/wuranxu/pity
前端代码地址: https://github.com/wuranxu/pityWeb
欢迎关注公众号测试开发坑货,还有加群一起讨论相关问题呀!如果群二维码过期了,可以加我个人微信: wuranxu
我拉你进群~