备注功能是一个非常非常小的功能,所以我们先迅速处理掉这个备注功能
让我们制作一个简单的备注输入框和保持/取消按钮,然后用户点击备注按钮就会显示这个输入框+保持/取消按钮。 保持和取消都会让输入框消失,但是保存功能多了一个像后台发送请求的过程,把备注内容给后台保存起来。
所以打开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:
然后我们重启服务,刷新页面,进行最终测试!
成功后即可等待下一节的难点了。