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

正文开始：

上节，我们搞定了 首页搜索的功能的mock版本，就是写死了返回值的假版本。本节课就来搞定真实的搜索吧。

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

那么我们现在来搞清楚，我们要搜索哪些？

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

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

# 首页搜索功能
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 组成 。如：

我们目前，能跳转进入的就只有进入项目后的接口库，所以我们暂时填入的是这个连接：

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

测试结果如下：

现在我们点击下看看：

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

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

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

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

注意位置和css样式哦～

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

样式如下：

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

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

本搜索框内容到此完成了～

---------完结撒花------------