编写类postman页面(4)
回顾
在上一节我们终于搞定了Params这个难啃的骨头，接下来我们要编写headers，与之类似的组件，一起来试试吧~
思考
思考一下，headers和params都是键值对的形式，似乎不需要太大的改动，咱们有现成的可编辑表格，所以做起来会很方便。
编写Header模块
其实照理说这种模块比如params还有headers都可以抽出为单独的组件，不过这里我觉得似乎复用的地方比较少，所以这个看人，其实也是可以抽出来的，毕竟一个组件如果太大了肯定会出现很多耦合问题。
观察postman的headers构造
image
可以看到postman的功能非常多，headers可以隐藏，也给了默认的headers，这边我们就简单点，说话的方式简单点。只保留核心表格就行了！
- 新增变量存放headers信息以及正在编辑的key信息
image
-
字段方面我们可以复用一部分
但是需要稍稍改动，因为在删除的时候，params除了要更新表格以外，还需要修改url。
思路是把columns变成一个纯函数，参数为params的时候返回params的内容，为headers时返回headers的内容，其他的没有变化。
image
- 改动onDelete方法
image
上一步改动就是为了onDelete能够对不同的类型做出不同的删除操作，如果不是params则不修改url了。
- 最后是再引入一个可编辑表格
image
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，因为它支持黑色主题哦。
- 引入组件
image
判断bodyType是不是raw，如果是raw才显示此组件，否则显示null。三元表达式大家应该都清楚。
然后包装了一层卡片，因为原先的不带有边框，所以我这里用Card组件包装了一层，然后给边距设置为0。
看看效果
可以看到还有具体的错误提示
总体还是不错的吧？至此，我们一期的功能基本上就快要搞好了，还差一个相应信息栏。后面的业主别急，慢慢来。
来个动图感受下吧
image
联调接口
- 编写请求方法
和以前一样，直接接受参数并请求即可
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。
image
- 创建一些状态
image
loading用来在请求的时候显示一个loading的状态
method将请求方式的select组件改成了受控组件，因为我们需要拿到它的值。
response后续我们会需要显示出具体的结果。
- 编写组装请求数据的方法
onRequest
image
这个方法是点击到Send按钮后执行的方法，可以看到首先让Send按钮处于加载中，防止重复点击。然后判断参数是否合理，不合理直接弹出提示(待会会有动图演示)
最后就是改回原来的状态并设置返回结果了。
后端调整
由于在我试用的过程中发现，后端遇到了几个的问题。
- 如果response是文本或者非JSON，那么程序会直接报错
- 如果headers没有传入，那么程序也会报错
image
解决办法如图，如果能转为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,
}
简单输出一下返回结果
感觉篇幅已经很长了，文字的方式太慢了，🤔要不要出个视频呀？不然的话我感觉打字好累，效果还一般。
image
直接来看一个完整的例子，测自己的接口:
image
项目地址
后端代码地址: https://github.com/wuranxu/pity
网友评论