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

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

简介: 接口测试平台代码实现番外:主页改版-8
+关注继续查看

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

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

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

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

微信图片_20220704215040.png

此时的js如下:

微信图片_20220704215047.png

<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:

微信图片_20220704215054.png

然后去后台views.py:

微信图片_20220704215108.png

我先做了一个demo的搜索结果,格式就设计成如图所示:

在results的列表中,每一个{}字典 都是一个搜索结果。

每一个结果都有三个属性:

url,text,type

然后返回给前端,看看测试效果:

微信图片_20220704215113.png

看来已经成功了。

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

相关文章
接口测试平台代码实现156:私有client证书设置
接口测试平台代码实现156:私有client证书设置
11 0
接口测试平台代码实现58-首页重构6
接口测试平台代码实现58-首页重构6
16 0
接口测试平台代码实现30:接口库-接口列表
接口测试平台代码实现30:接口库-接口列表
23 0
接口测试平台代码实现59-首页重构7
本节基本就是最后一节,上节我们本来以为很简单的重构,结果遇到了恶心的第三方组件bug,所以我就用刷新套路来绕过了这个问题,还省去了clear清空函数,顺便给大家讲了下新增的第二万能参数ooid。在最后我们解决了url,host,header的显示问题。本节就剩处理一下 请求方式/请求体类型/请求体了。
21 0
接口测试平台代码实现55:首页重构-3
接着上节继续来做: 先来回顾一下,上节课我们基本就是清空来首页,并且划了一条竖线,把首页分为左右俩部分。
21 0
接口测试平台代码实现57-首页重构5
本节我们接着开发首页, 主要内容是 让左侧的请求记录和右侧的请求模块 联动起来。 具体联动需求: 右侧请求一次之后,左侧生成记录 点击左侧记录,右侧则会显示这次记录的请求数据 我们本节课的内容是想办法实现1-生成记录。
21 0
接口测试平台代码实现56:首页重构-4
本节继续开发首页右侧的显示效果,可能有的同学觉得这里节奏太慢了,不怕,咱养肥再看。
39 0
接口测试平台代码实现31:接口列表继续开发
接口测试平台代码实现31:接口列表继续开发
13 0
接口测试平台代码实现19.首页优化
接口测试平台代码实现19.首页优化
24 0
接口测试平台代码实现13:注册功能
上节我们实现了登陆功能,但是可惜用户表中没数据。所以这节我们讲如何注册用户。
15 0
+关注
游客pxprrm2iipsfu
我去热饭
435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载