接口测试平台-94: 全局域名 智能联想

如何在用户调试接口的时候，可以联想自动输入。这个小技巧其实很简单，但是非常实用。

 

1. 关闭常用历史记录

首先打开P_apis.hmtl，找到调试层的host输入框：

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

 

2. 显示联想域名

然后要让它显示域名库的内容。要在html页面中设计一个列表存放所有的host，并让host输入框绑定这个列表，是一个datalist的下拉列表。

<li style="width: -webkit-calc(100% - 63px)">
    <datalist id="datalist_host">
        {% for i in hosts %}
            <option id="host_{{ i.id }}" value="{{ i.host }}">{{ i.host }}</option>
        {% endfor %}
    </datalist>
    <input id="ts_host" list="datalist_host" autocomplete="off" style="color: black; padding-left: 10px; width: 100%; height: 40px" type="text" placeholder="host：如 http(s)://xxx.ccc.com" value ="" />
</li>

下拉列表用for循环遍历应该接收的hosts，hosts是后端应该给前端传递的所有host列表(不过现在还没有传)

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

 

3. 给页面传入数据

找到views.py，找到进入接口库的设置数据的函数child_json：

 

重启服务，刷新页面。看看效果：

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

 

4. 最后，把这段前端代码复制到 用例库、首页请求中输入host的位置。

    4.1 用例库

   打开P_cases.html,找到这个位置

    去后端增加数据： 

看看效果： 

    4.2 首页请求

   打开home.html,找到这个位置 

   

    去后端增加数据： 

    看看效果：

    

 

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

 

本节内容到此结束，下节要做全局变量-公共请求头了。