首先，点击热搜词跳转至列表页和点击导航贴转至列表页都需要展示列表信息，但他们的形式是不同的，如何区别呢？
因为这两个功能前端都在head组件中，我们到head.vue中寻找答案。通过前端的router - to发现，一个URL是/app/home/list/，一个是/app/home/search/。具体如何实现去src/router/index.js中查看。发现有关路由的配置是一个树状关系，且发现list和search的components相同，均为list，所以他们用的是同一个组件，只是url不同。
再去看list.vue这个组件，src/views/list/list.vue。script标签中有一个：
created () {
this.getAllData ();
},点进getAllData中看看，它是在list.vue中的methods中，第一句是：
console.log(this.$route.params)所以，虽然它们共用一个组件，但是它们传的参数params是不同的（一个为id，一个为keyword），由此就区分了究竟获取什么数据。是通过调用getMenu实现的，点进去，发现getMenu最终还是调用了getCategory。
我说这些的另外一个目的是什么呢？那就是对于商品详情页的左侧导航栏，我们不必再有什么改动了！因为他最终都是调用了getCategory，它们后端数据都是你的本地。
再看getAllData函数，除了通过调用getMenu调用getCategory获取左侧导航栏之外，还调用了：
this.getCurLoc(); // 获取当前位置
this.getListData(); //获取产品列表
this.getPriceRange(); // 获取价格区间我们先看getListData。它会先判断pageType是否等于'search'，之后直接就去调用api.js中的getGoods了（两种情况所执行的操作不同），将getGoods中的host改为：
local_host这样一来，商品列表页便会从本地获取数据了。
为了和前端的过滤器一致，我们需要将分页是设置的p改回page，在views.py中修改GoodsPagination：
page_query_param = "page"此外，前端还要有一个过滤字段top_category，获取某一级下的所有商品。到filters.py中进行相应修改，我们此时不能简单的作用于某一个字段了，要自己写方法：
top_category = django_filters.NumberFilter(method='top_category_filter') # 参数名与前端保持一致然后写top_category_filter的具体逻辑：
def top_category_filter(self, queryset, name, value): # 这些参数都是默认传进来的
# 注意 __ 的用法
return queryset.filter(Q(category_id=value)|Q(category__parent_category_id=value)|Q(category__parent_category__parent_category_id=value))还要引入Q：
from django.db.models import Q我们可以启动后端测试一下。可以用过滤器，可以改URL。
前端过滤中ordering，我们后端默认也是ordering。不用改了。但是发现最小值、最大值没有下划线，因此我们要改一下后端中的filters.py文件，参数改为：
pricemin
pricemax顺便把与name相关的filters语句注释、删除，因为前端不需要我们进行name的过滤。
此时看看项目（前后端都启动），又发现不对的地方了。商品列表一面能显示4*3个，所以在views.py的GoodsPagination中，要修改page_size为12：
page_size = 12前端还有排序功能，看我们的views,py中，已经配置了：
ordering_fields = ('sold_num', 'add_time')但我们不需要add_time，需要的是价格，故而修改为：
ordering_fields = ('sold_num', 'shop_price')你还可以在后台改一下销量，测试功能。
我们只需要改后端，提供前端所需的数据。这是因为前端已经完成了很多功能。
