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

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

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

所以打开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：

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

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

最后附上本节最新源码，同学经常报错的，可以对比下源码，排查错误的能力才是职业生涯中最宝贵的！

链接: https://pan.baidu.com/s/1o8e6Eo-Rm8Og73px2PIKuQ 密码: wf2k