Hello ,最近首页更新了 小伙伴想要的 数据统计图之后,有好多小伙伴反馈说 太难了,基本看不懂。
的确,二次开发网上那种很秀的组件确实很难,照着看一遍都觉得难,更别说以后要自己操刀进行肆意的使用了。
所以,本节课决定接着前七节课的内容,把主页重新恢复到超链接展示,这样既简单 又实用,还能让我们研究下vue的数据绑定大法。
(本节课后会把最新代码打包上传到网盘,欢迎下载~)
给大家看下目前的主页home.html代码如下:
怎么样,现在恢复了简洁之后,是不是感觉很nice
然后看看views.py现在是什么样子?
我采用了 字典,来进行设置参数,这样不但看起来更美观简洁,二期每次就写一句即可修改编辑参数。
好了,回归主题。我们本节课要实现下菜单顶部的搜索功能。
首先考虑,这个是一个输入框,我们找到html内的源码可以看到:
menu.html:
原作者只放了个form在这,也就是form表单,既然是表单,那么就能提交,也就是我们的设计可以这样:
输入文字后,作为一个参数kwords,传送给后台,后台返回结果即可。表单会触发页面刷新,所以我们要考虑的是带kwords后,首页的展示情况。
不过我们先补充完整这个表单吧。
如上图,添加了action和name,这样我们在输入了一些内容之后直接按回车,即可触发action的路由,并且会带上你输入的内容。
然后我们去urls.py中进行设置。
然后去views.py中写好这个参数:
注意,我们现在已经拿到了这个kwrods,也就是搜索的关键字。
接下来我要做个史无前例的优秀设计,就是能根据当前页面,来搜索不同的东西!!!
因为这个顶部搜索框是属于menu.html的,它会在任何页面出现。比如现在就在home.html中出现,那么它搜索的结果就是首页的超链接,并且返回首页!
如果之后再具体工具列表页出现,那么搜索就会出现搜到的工具,返回的也是工具列表页。
所以我这里需要一个参数,就是需要当前的页面url,来判断是是什么页面。
所以这个表单的请求actio还需要加上这个变量。
所以加上如上图这句js,来控制这个url:
div class="cd-search is-hidden"> <form id="search_form_id" action=""> <input type="search" name="kwords" placeholder="Search..."> </form> <script> var s = window.location.href.toString().split('/') var u = s[s.length-2]; document.getElementById('search_form_id').action = '/search/'+u+'/'; </script> </div> <!-- cd-search -->
我们来试搜索下看看:
可以明显看到,在search之后多了个home参数,这个取的域名之后的第一级url,也完全可以看出是当前哪个页面了。
所以urls.py中我们也改一下吧:
注意我划红线的地方,都要修改。
然后是views.py:
打印结果如下:
可以看到,我们知道了当前处于的是home页面。
所以我们接下来要写一个if语句了:注意字段名__contains为包含意思。
def search(request,which): kwords = request.GET['kwords'] res = {} res['user'] = request.user if which == 'home': #说明在首页搜索 res['all_links'] = list(DB_links.objects.filter(link_name__contains=kwords).values()) return render(request,'home.html',res)
我们来测试下:
输入关键字2
输入关键字三
输入空回车
注意我们算是简单完成了这个搜索功能。
之后我们在不同页面都要好好写好这个if分支。才能保证这个顶部搜索功能的强大和亮眼!!!