【测开中台教程-14】首页大搜功能-基于类视图和独立业务层来实现

上节课我们基本搞定了前段展示。

那前端要想真正实现搜索功能，势必要有一个http请求发送给后台，后台再去做具体的业务，把最终结果通过这个http请求返回给前端，前端再动态展示，这就是基本流程。

所以，这里面的主要部分，就是这个接口，本节课我们就开始搞这个接口吧~

打开HomeView.vue，先把这个搜索事件函数search的位置定好：

然后在里面填好请求：

上图中，发送了一个简单的参数：searchKey，路由为：home_search。返回体包含三个参数，并且分别赋值给我们的三个变量。当然，这里一会需要有优化，毕竟结果应该是三个列表。而列表是需要循环展示的。

然后再在上面代码中，关联一下搜索按钮的点击事件：

测试一下，输入内容点击搜索按钮后，打开浏览器的network面板查看：

可以看到，已经成功发送出去了，404是正常的。我们后台还没有真的去开发好。

鉴于这个大搜功能比较复杂。所以我们可以采用类视图来处理。并且新建一个Home_views.py文件，用来专门首页的业务：

上图中，我把原本在views.py中的Home_get_count函数剪切到了这里，毕竟这也算是首页的业务函数。原本的views.py中也就不要再放这个函数了哦~

然后去urls.py中来做好改动：

上图的这个CLS_home_search就是我们要处理首页搜索业务的类。关于这个类具体的开发，请关注下一节哦~

本节课到此结束，下节课继续实现吧~