开发者社区> 游客pxprrm2iipsfu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

接口测试平台代码实现96:全局域名-3

简介: 全局域名这里我们目前已经搞定了 域名管理 部分。也就是当用户请求的时候我们偷偷存了份 host,并且去重。 本节我们就来研究下,如何在用户调试接口的时候,可以联想自动输入。这个小技巧其实很简单,但是非常实用。
+关注继续查看

    首先打开我们的P_apis.hmtl,找到调试层的host输入框:微信图片_20220628225710.png

页面上我们点击 会出现以下列表:

微信图片_20220628225719.png

注意,这是input输入框自动记住的几个你输入的常用历史记录,我们并不需要它,所以用一个小属性给屏蔽:微信图片_20220628225725.png

现在你在点击 这个输入框,它也不会显示历史输入记录了。


然后我们要让它显示我们的域名库的内容。怎么显示呢,这里我们要在html页面中设计一个列表存放所有的host,并让host输入框绑定这个列表。

其实说是列表,实际上是一个datalist的下拉列表。

微信图片_20220628225736.png

这个下拉列表中,使用了一个for循环,遍历我们应该接收的hosts,hosts是我们后端应该给前端传递的所有host列表(不过我们现在还没有传)


然后在host输入框中加入了这个list="" 属性,即可绑定成功。注意上面的datalist的id 和 input中这个list=""的内容 要一致,这里都写成了datalist_1


然后我们去后端,找到进入接口库的设置数据的函数child_json:

微信图片_20220628225743.png

如上图,添加了这个hosts


重启服务,刷新页面。看看效果:

微信图片_20220628225753.png

如上图,我们在为空的状态下点击,会出现所有域名表中的host,为了便于查看我们手动去后台添加几条:

微信图片_20220628225817.png

然后回来刷新页面 看看效果:

微信图片_20220628225826.png

当输入框为空的时候,也就是新建一个接口或者点击右侧clear按钮后,用户点击就会显示所有host,他可以任选其一,就自动填充了:

微信图片_20220628225835.png

也可以自己输入一些部分关键字,下面列表会自动进行筛选:

微信图片_20220628225843.png

微信图片_20220628225850.png

微信图片_20220628225904.png

总体来说,很nice使用体验。


最后,让我们把这段前端代码复制到 用例库中输入host的位置。

打开P_cases.html,找到这个位置。插入红色框代码和 增加input框的俩个属性。

微信图片_20220628225923.png

然后去后台增加host参数传递:

微信图片_20220628225937.png

重启服务,刷新页面:

微信图片_20220628225945.png

可以看到,已经成功了。

接下来是首页的快捷调试功能:

打开home.html:

微信图片_20220628225951.png

然后是views.py:

微信图片_20220628230004.png

重启服务,刷新页面:微信图片_20220628230013.png

成功设置好。


现在我们的智能联想功能就算做好了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
接口测试平台代码实现97:全局域名-4
上节课我们成功的搞定了host域名管理相关的部分。本节我们要开始弄公共请求头了。
18 0
接口测试平台代码实现130: 全局变量-9
本文开始,全局变量 要正式进入 复杂的后台实现了,当然如果能跟到这里,那么也应该没什么难度。 这里还是要重申一下,代码出现问题请先仔细比对教程源码,实在找不出来就先在群里问,没加群的请先加 vx: qingwanjianhua 博主每天的时间并不充裕,私聊的人也很多,如果群里解决不了后可以直接@我去热饭 即可。
10 0
接口测试平台代码实现131: 全局变量-10
本节开始要进入比较烧脑的阶段了,请系好安全带,中途跳车的请刷卡。
9 0
接口测试平台代码实现126: 全局变量-5
接口测试平台代码实现126: 全局变量-5
11 0
接口测试平台代码实现128: 全局变量-7
本节课我们处理一些 上节课遗留的 前端问题。 这也是养成开发自测的好习惯,毕竟我们是测试出身,所以自测水平一定要很高,不然会被开发同学笑话。而且我们的程序之后可没有正式的测试阶段了。直接上线,所以最好别有严重bug。
10 0
接口测试平台代码实现55:首页重构-3
接着上节继续来做: 先来回顾一下,上节课我们基本就是清空来首页,并且划了一条竖线,把首页分为左右俩部分。
21 0
接口测试平台代码实现84: 多接口用例-24
接口测试平台代码实现84: 多接口用例-24
14 0
接口测试平台代码实现56:首页重构-4
本节继续开发首页右侧的显示效果,可能有的同学觉得这里节奏太慢了,不怕,咱养肥再看。
35 0
接口测试平台代码实现34:请求体
接口测试平台代码实现34:请求体
18 0
接口测试平台代码实现3:从0开始打造吧
鉴于上次很多小伙伴的反馈,所以本次代码教程打算从0开始讲,每节内容不会多到让我们赶紧到累或无法消化。 在开始之前,请确保你的电脑本地环境已经成功下载了python3和django。
34 0
+关注
游客pxprrm2iipsfu
我去热饭
435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载