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

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

简介: 上节,我们搞定了 首页搜索的功能的mock版本,就是写死了返回值的假版本。本节课就来搞定真实的搜索吧。
+关注继续查看

所以我们基本只要编辑的就只有后台views.py了。

那么我们现在来搞清楚,我们要搜索哪些?

  1. 项目名称
  2. 接口名字

我们本节先来搞这么俩个简单的,之后同学可以自行添加其他搜索领域。

微信图片_20220704220135.png

# 首页搜索功能
def search(request):
   key = request.GET['key']

    # 项目名搜哦所
    projects = DB_project.objects.filter(name__contains=key) #获取name包含key的所有项目
    plist = [{"url":"//","text":i.name,"type":"project"} for i in projects]
    # 接口名搜索
    apis = DB_apis.objects.filter(name__contains=key) #获取name包含key的所有接口
    alist = [{"url":"//","text":i.name,"type":"api"} for i in apis]

    res = {"results":plist + alist}
    return HttpResponse(json.dumps(res),content_type='application/json')

我来解释下这段代码:

首先我们通过orm来模糊匹配到 结果,分为项目和接口

然后 分别了一个列表 来存放。

列表中的元素水 字典,遍历的是 结果中的每一个项目/接口

字典有3元素,url,text文本,type类型。

这里text就干脆用过名字代替来,类型 一个是project,一个是api。

现在剩下 url。我们需要从长计议:


url是干嘛用的?

它是用来给用户点击搜索结果时 直接跳转的。

url由什么组成?

有我们固定的url,和对象的id 组成 。如:

微信图片_20220704220145.png

我们目前,能跳转进入的就只有进入项目后的接口库,所以我们暂时填入的是这个连接:微信图片_20220704220153.png

为了方便测试。我们新建个接口,让其和项目的名字有重复的。

测试结果如下:

微信图片_20220704220159.png

现在我们点击下看看:

均可以正确进入对应项目内:

微信图片_20220704220206.png

我们再处理一个小问题:就是关闭这个搜索结果页的功能。只需要打开我们的Home.html,给它添加一个小关闭按钮即可:

按理说,我们的搜索按钮应该在这个结果页面上,也就是那个id=search_result 的div里。

但是我们在开始搜索的时候,会对其进行清空,所以按钮如果放这里面 那也会被清空,所以我们简单点 ,给按钮放外边。(还有其他办法,欢迎小伙伴自行猜测)

微信图片_20220704220212.png

注意

位置和css样式哦~


然后在下面的search中 写上它的显示隐藏控制代码:

微信图片_20220704220218.png

样式如下:

微信图片_20220704220312.png

现在我们在写个隐藏div的js函数就万事大吉了:

微信图片_20220704220319.png

现在测试了下效果,还算可以

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

相关文章
接口测试平台代码实现番外:主页改版-3
接口测试平台代码实现番外:主页改版-3
19 0
接口测试平台代码实现103:GraphQL-3
上节我们搞定了首页的GraphQL请求功能,但是似乎漏掉了一个功能:显示。也就是当我点击左侧请求记录的时候,右侧需要显示对应的请求数据,但是很显然我们遗漏了GraphQL这个请求体类型。
14 0
接口测试平台代码实现54:首页重构-2
好,虽然绝大多数同学还未追上最新进度进行投票,但是已投情况来看,大部分还是支持首页做成接口快速调试功能。 那么本节课就开始吧,首先我们打开我们的首页:home.html。观察一下目前结构:
68 0
接口测试平台代码实现59-首页重构7
本节基本就是最后一节,上节我们本来以为很简单的重构,结果遇到了恶心的第三方组件bug,所以我就用刷新套路来绕过了这个问题,还省去了clear清空函数,顺便给大家讲了下新增的第二万能参数ooid。在最后我们解决了url,host,header的显示问题。本节就剩处理一下 请求方式/请求体类型/请求体了。
21 0
接口测试平台代码实现55:首页重构-3
接着上节继续来做: 先来回顾一下,上节课我们基本就是清空来首页,并且划了一条竖线,把首页分为左右俩部分。
21 0
接口测试平台代码实现19.首页优化
接口测试平台代码实现19.首页优化
26 0
接口测试平台代码实现21:项目列表
在本节开始之前,让我们先修复一个bug, bug是,我们在做首页的超链接的时候,修改了child函数,使其增加了一个返回数据的控制器-child_json()函数
24 0
接口测试平台代码实现31:接口列表继续开发
接口测试平台代码实现31:接口列表继续开发
13 0
接口测试平台代码实现13:注册功能
上节我们实现了登陆功能,但是可惜用户表中没数据。所以这节我们讲如何注册用户。
15 0
接口测试平台代码实现8:首页的继续开发
接口测试平台代码实现8:首页的继续开发
28 0
+关注
游客pxprrm2iipsfu
我去热饭
435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载