数据工厂13：首页重构

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分支。才能保证这个顶部搜索功能的强大和亮眼！！！