编写类 postman 页面 (3)
回顾
记得上一节我们编写了 postman 的中间部分，其实还有 header 部分的一些表单数据没有编写完成，今天我们就尽量完成它并且尝试跑一个小小的 demo。
寻找可编辑表格组件
可以看到这里比较简单，基本上就是 2 块: 文字部分和可编辑表格
可编辑表格的话，我们可以自己写，也可以直接用现成的。我们为了傻瓜一点，就采用 ant design pro 封装好的高阶组件 (意思是功能齐全，简单好用)
具体地址: ProComponents
那么这个就是我们需要的，由于我们用的JavaScript而非TypeScript，所以呢我们需要复杂一点找到对应的源码:
在弹出的网站就可以找到对应的 JS 代码了！
我们这个项目本来就带有了 pro 的组件，所以不需要额外安装了哈。(亲测新版本还有点问题)
编写可编辑表格雏形
首先呢，我们这个组件是 postman 组件，但是其实这个可编辑组件是可以和后面的headers标签进行复用的，所以我们单独把这个组件抽出来封装。
新建src/components/Table/EditableTable.jsx
代码基本上是复制过来的，但是我们抽取了几个重要的参数:
- columns
由于我们的每个表格的字段可能不一样，所以说我们不能写死
- dataSource
实际数据，本来不是这样的，但是发现这个组件有点 bug，让我有点小尴尬
- setDataSource
改变 dataSource 的方法
- title
比如这里我们需要的 title 是Query Params
注意这里，这里我是从 columns 中拿到真实字段，因为咱们还有其他字段比如后面的删除，拿到之后在用户点击新增一行数据的时候默认给字段加上值。
引入表格组件并编写 columns
- columns
我设置了 3 个字段分别是KEY,VALUE, DESCRIPTION。与 postman 是保持一致的，然后最后一列我设置了一个图标 (删除)，删除方法自己手动编写了（还是因为他有 bug，无法删除）。因为我在官网没改源码的情况下也发现无法删除。
看看效果:
其实 postman 做的更精致，下面的数据会改变 url 的内容。接下来我们也把这块实现了吧。
改造 URL
现在我们有了 params 参数，那么我们的 url 就由 2 部分构成了:
- url
- params
所以我们原先的 url 改变的时候如果有参数变动则需要修改参数项目，如果参数项目有变动也需要修改 url。
由于这个 ProTable 有一点点 bug，笔者也搞了好久今晚，不过最后顺利完成了，大家 pull 最新的代码就可以看到效果了。可惜的是今天浪费太多时间了，就只简单对代码稍作描述了。
这个表格组件有些变化:
- 把正在编辑的 key 和修改可编辑 key 的方法抽离出来了
- extra 函数用来在表格数据变动的时候做一些额外的变动，因为表格变化我们得去更新 url
拼接 url 的方法
url 的规则是 http://www.xxx.com + ?参数 1=值&参数 2=值 2
所以第一个参数用?隔开，后面都是用&，代码写的很清楚了。
拆解 url 的方法
这里写的比较复杂，首先判断 url 里面有无参数，没有的话就把表单数据清空。接着就是取 url 的数据组成新的表单。但是表单的每一行是用时间区别的，这里 js 执行太快，所以我以数组索引 + 时间 +10 的方式，就算 now 全都一样，也没关系，因为索引肯定不一样，避免了一下子添加多行的问题（当然你们是看不到这个问题的）。
删除参数
删除参数的时候也重新拼接 url 给 url 输入框
输入框 url 变化也改变参数表格
新增了一些变量和 set 变量的方法
文件总体代码可以去 github 看，这里篇幅有限就不贴了。
最终效果
找了个截图软件，让大家看看效果吧，晚安。
相关地址
在线体验地址: http://test.pity.fun/
后端代码地址: https://github.com/wuranxu/pity
前端代码地址: https://github.com/wuranxu/pityWeb
欢迎加群一起讨论相关问题呀！
wdglp