(简易)测试数据构造平台: 21 首页搜索

【本期目标】实现首页顶部搜索功能

预期效果：输入工具名称关键字，点击搜索按钮，下列即可刷新对应结果。

首先找到顶部输入框的dom层代码：

原理:

首先在el-input上 写一个v-model，用来关联一个vue变量，借助于双向绑定的设计，当输入框内容变更后，变量也会自动同步。此时给搜索按钮el-button增加一个点击事件，即把变量内容发送给后台，后台接收到后返回对应结果的列表，前端再把最新结果同步给vue变量tool_list，再次借助vue自动渲染效果，让首页的项目列表真的展示成最新搜索结果。

先声明变量:

然后给输入框增加v-model并绑定:

然后给按钮设置点击事件:

关联的函数名我取名叫 search_tools

函数：

大家注意到，我仍然使用了旧的获取项目列表的接口。但是额外传了个keys作为参数。

然后直接去后台views.py中修改函数

注意，其中额外增加了keys参数的获取，并且如果获取不到，那么就为None。然后进行判断，看看是返回全部还是返回筛选结果。

这里涉及到以下几个知识点：

1. request.GET.get(参数名，取不到时候的默认值)
2. if None 的值为假
3. .filter(name__contains=keys) 表示name中包含关键字keys

结果测试：

用例一： 正常进入，刷新页面，搜索为空：

结果正常

用例二：搜索关键字3

结果正常

用例三：搜索关键字工具

正常

用例四：搜索不存在的关键字

正常

用例五：删除所有关键字搜索

结果正常。

好了，本节课到此结束。欢迎点赞分享+收藏哦~