【本期目标】实现首页顶部搜索功能
预期效果：输入工具名称关键字，点击搜索按钮，下列即可刷新对应结果。
首先找到顶部输入框的dom层代码：
原理:
首先在el-input上 写一个v-model，用来关联一个vue变量，借助于双向绑定的设计，当输入框内容变更后，变量也会自动同步。此时给搜索按钮el-button增加一个点击事件，即把变量内容发送给后台，后台接收到后返回对应结果的列表，前端再把最新结果同步给vue变量tool_list，再次借助vue自动渲染效果，让首页的项目列表真的展示成最新搜索结果。
先声明变量:
然后给输入框增加v-model并绑定:
然后给按钮设置点击事件:
关联的函数名我取名叫 search_tools
函数：
大家注意到，我仍然使用了旧的获取项目列表的接口。但是额外传了个keys作为参数。
然后直接去后台views.py中修改函数
注意，其中额外增加了keys参数的获取，并且如果获取不到，那么就为None。然后进行判断，看看是返回全部还是返回筛选结果。
这里涉及到以下几个知识点：
- request.GET.get(参数名，取不到时候的默认值)
- if None 的值为假
- .filter(name__contains=keys) 表示name中包含关键字keys
结果测试：
用例一： 正常进入，刷新页面，搜索为空：
结果正常
用例二：搜索关键字3
结果正常
用例三：搜索关键字工具
正常
用例四：搜索不存在的关键字
正常
用例五：删除所有关键字搜索
结果正常。
好了，本节课到此结束。欢迎点赞分享 收藏哦~
