接口测试-接口定义功能-前端-实现动态增删表单

爱被打了一巴掌 2023-10-08 14:21 44阅读 0赞

![在这里插入图片描述][5fb87c883155482198a70b4dca710d26.gif_pic_center]  
基于 springboot+vue 的测试平台开发继续更新。

目前已经进入到接口定义功能的开发阶段，首先我还是直接在前段画了个大概的页面，先预览下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16]

不过目前只是画了这个页面都主要功能，细节未尽事宜待具体开发的时候再进一步完善。

从上面动态图上已经显示了大概情况，主要是创建接口的功能，其中还支持发送调试。发送请求的功能就直接参考 postman，用起来习惯。

### 页面实现 ###

整个编辑页面是放在一个对话框里 dialog，然后往里填充其他部分，3大块：基础信息、请求参数、响应内容。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 1]

这 3 块分别有自己的重点地方：

*  基础信息：因为要绑定到模块，这里考虑增加一个模块树的选择（暂时没实现）。
 *  请求参数：这里要有个可以增删表单的功能。
 *  响应内容：用于展示接口返回的 json 数据格式化。

### 1. 基础信息部分 ###

为了美化页面，还新使用了分割线的组件。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 2]

这里选择分割线+文字的样式，直接使用：  
![在这里插入图片描述][407e72d64d834613b41ec8fa06cdd58b.png]

两行输入表单，我是写分开了，对应return里的字段要加加好。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 3]

### 2.请求参数部分 ###

请求参数部分首先是有几个 tab 页，然后在每个 tab 页里有自己对应的内容。分别是：

*  请求头
 *  query参数：用于url后问好?后的参数
 *  rest参数：用于restful风格的/后的参数
 *  请求体：用于带有请求body的接口

在 elementUI 找到组件，修改好对应的 tab 名称即可。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 4]

接下来就是动态表单的部分，在 elementUI 里找到组件，复制代码，放到其中的 tab 页里。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 5]

接着还是修改代码了，这里有3个字段：参数名、参数值、字段描述：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 6]

对应字段：  
![在这里插入图片描述][3250999562194b71aeabc66172d9082a.png]

另外还有 2 个方法，增加和删除：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 7]

这里暂时只把字段改改，其他先不动。

然后测试的时候发现一个优化点：当只剩下一行输入框的时候，不让继续删除。

### 3. 响应内容部分 ###

这里 elementUI 组件里就没提供了，大奇提醒我之前他写的项目代码里有，我可直接用。不过后来我又在 github 上找到一个可以支持展开的，感觉也不错。

地址在这：[github.com/chenfengjw1…][github.com_chenfengjw1]

安装：

npm install vue-json-viewer --save

在

:value="jsonData"绑定的数据直接写死了一个看看效果。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 8]

这个组件还是支持不少功能的，详见作者提供的说明：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 9]

可以根据自己实际需要使用这些属性。

页面暂时先画到这，接下来进行后端的开发。

学习不要孤军奋战，最好是能抱团取暖，相互成就一起成长，群众效应的效果是非常强大的，大家一起学习，一起打卡，会更有学习动力，也更能坚持下去。你可以加入我们的测试技术交流扣扣群：914172719（里面有各种软件测试资源和技术讨论）

**喜欢软件测试的小伙伴们，如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！**

--------------------

### 好文推荐 ###

[转行面试，跳槽面试，软件测试人员都必须知道的这几种面试技巧！][Link 1]

[面试经：一线城市搬砖！又面软件测试岗，5000就知足了…][5000]

[面试官：工作三年，还来面初级测试？恐怕你的软件测试工程师的头衔要加双引号…][Link 2]

[什么样的人适合从事软件测试工作？][Link 3]

[那个准点下班的人，比我先升职了…][Link 4]

[测试岗反复跳槽，跳着跳着就跳没了…][Link 5]

[5fb87c883155482198a70b4dca710d26.gif_pic_center]: https://img-blog.csdnimg.cn/5fb87c883155482198a70b4dca710d26.gif#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e3029381127648a8b07cfebc082676a6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/d3bfb4a243614027a97feb80fd37385e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/01fa1657a7444f029def34ad66aebd11.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb,size_20,color_FFFFFF,t_70,g_se,x_16
[407e72d64d834613b41ec8fa06cdd58b.png]: https://img-blog.csdnimg.cn/407e72d64d834613b41ec8fa06cdd58b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/652bc812f7a24175b538f392bbc8f17f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/a1a7173fb7544eaa88088159fad798ac.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/3bf8549eeea742249c580d207516887d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/67ca3617a4ec4d5cb9d5ec920b1718dd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb,size_20,color_FFFFFF,t_70,g_se,x_16
[3250999562194b71aeabc66172d9082a.png]: https://img-blog.csdnimg.cn/3250999562194b71aeabc66172d9082a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/2098f6597482474e80076cf993083134.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb,size_20,color_FFFFFF,t_70,g_se,x_16
[github.com_chenfengjw1]: https://github.com/chenfengjw163/vue-json-viewer/blob/master
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/144cc4ecfbfd424b832eee3e969dc7bc.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/0a68baadb19946f18db68a48ef35e7de.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6L2v5Lu25rWL6K-V5ZCb,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 1]: https://blog.csdn.net/m0_56736369/article/details/117909132
[5000]: https://blog.csdn.net/m0_56736369/article/details/117915399
[Link 2]: https://blog.csdn.net/weixin_50829653/article/details/117422433
[Link 3]: https://blog.csdn.net/weixin_50271247/article/details/108421434
[Link 4]: https://blog.csdn.net/weixin_50829653/article/details/117856900
[Link 5]: https://blog.csdn.net/m0_56736369/article/details/117923266