接口测试平台代码实现番外：主页改版-8

我去热饭

发布于 2022-05-19 09:53:12

3640

发布于 2022-05-19 09:53:12

文章被收录于专栏：测试开发干货

本节我们依然要进行首页的改版，上次我们做出了搜索功能的页面展示，接下来是相关js。

如上图，我们新建了这个script用来存放search()函数。它要做的事就是把我们搜索输入框的内容发送给后台。得到返回值后将其展示在搜索结果的div里。

当然，它还有另外一个事，就是控制这个结果div的显示和隐藏。还有初始化清空等功能。

首先是给div添加 id和默认隐藏：

此时的js如下：

<script>
    function search() {
        //获取输入内容
        key = document.getElementById('search_input').value;
        // 清空搜索结果
        document.getElementById('search_result').innerHTML = '';
        // 判断是否继续进行
        if(key == '' || key == ' '){
            return
        }
        // 发送请求给后台
        $.get('/search/',{
            'key':key
        },function (ret) {
            // 把结果显示
            var d = document.getElementById('search_result');
            d.style.display = 'block';
            results = ret.results; //ret.results是返回结果为列表
            for(var i=0;i<results.length;i++){
                var a =document.createElement('a');
                a.href = results[i].url;
                a.target = '__blank';
                a.innerText =  '【'+results[i].type+'】：'+results[i].text;

                d.appendChild(a);
                d.appendChild(document.createElement('br'))
            }
        })
    }
</script>

这段代码获取后台的返回值后，应该是一个字典，我取出其中的results，也就是实际结果列表，然后循环遍历，生成a 超链接标签。标签的href从结果中获取，而标签的文案，则是结果中的文案 + 类型，因为我们搜索到的可能多个类型才对，比如项目名字，接口名字，接口url，用户名，等等。

目前前端我们就这样吧。接下来去ulrs.py：