接口测试平台代码实现32:接口列表备注功能

106 阅读2分钟

    备注功能是一个非常非常小的功能,所以我们先迅速处理掉这个备注功能

    让我们制作一个简单的备注输入框和保持/取消按钮,然后用户点击备注按钮就会显示这个输入框+保持/取消按钮。 保持和取消都会让输入框消失,但是保存功能多了一个像后台发送请求的过程,把备注内容给后台保存起来。

所以打开P_apis.html:

新建了这个div备注弹层:

图片

注意其中有个隐藏的input,这个是用来存储我们打开的接口的id的,以便我们点击保存按钮的时候,系统知道是要保存哪个接口的备注。注意这个div本体也要隐藏,只是为了方便调试,我们在最后才加上隐藏属性。

效果如下:

图片

然后我们给div加上id和隐藏属性,并写好打开它的函数:open_bz()然后让备注按钮onclick=这个函数。

图片

图片

图片

完成之后测试一下,没问题后继续写 保存/取消函数:

取名为:save_bz,close_bz

图片

我们先把取消功能函数close_bz写好:

图片

测试一下么问题后,开始书写save_bz:

注意,这里我们要传入备注内容,也就需要给这个多行文本框加入一个id以便定位bz_value

图片

路由就设置为:/save_bz/

然后我们urls.py:

图片

views.py:

图片

然后我们要做到一个效果,就是每当用户打开任意接口的备注时,这个多行文本框都要显示保存好的,而不是一片空白。

所以我们回到P_apis.html中,找到open_bz()函数。

修改成如下:(前面.value不小心写成了.vallue,大家注意下)

图片

解释上图:先清空这个文本框,防止用户之前打开了其他接口的备注的内容显示在这个接口上。

然后请求后台,把接口id给过去,等后台返回这个接口的备注后,显示div,存放好id,把返回的备注加载到文本框。

所以我们继续写urls.py,增加一个获取备注映射

图片

views.py:

图片

然后我们重启服务,刷新页面,进行最终测试!

成功后即可等待下一节的难点了。