8- vue django restful framework 打造生鲜超市 -商品类别数据展示(下)

Vue+Django REST framework实战

搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品类别页

vue展示商品列表页数据

  1. 点击某一个导航的一级类,将数据显示出来。或点击搜索,搜索出结果

这两个功能要一起完成: 格局是一样的,左侧导航,右侧商品列表。

  • 点击某一个导航分类会显示它底下的二级三级分类,一级它有多少商品。
  • 搜索只会显示一级与二级分类。
  • 商品列表页有他的分页和排序。

当我们点击生鲜食品和搜索都用的是同一个左侧nav组件。但是它又有所区别

点击搜索,它请求的是所有的category显示到二级目录,而点击生鲜食品。它只请求当前类别下的二级和三级目录。

如何才能在一个组件中区别出世导航栏过来的,还是搜索页面过来的。

在head里面就能找到这两者vue router的区别。

mark

可以看到不管是通过点击弹出的还是导航都是跳转到上图所示的vue router

mark

点击热搜榜则跳转的是search router

  • 查看vue router里面的跳转逻辑

src/router/index.js

mark

list为商品分类,而search为搜索

mark

可以看出component指向同一个组件。只是url不一样。当然url附带的参数也不一样;

一个是id 一个是keyword

src/views/list/list.vue 中

在页面生命周期的create方法中进行了getalldata的调用:

created () {
            this.getAllData ();
        },

getAllData中我们可以获取到this.$route.params虽然共用的是一个组件,但是路径里传的参数不同。

  getAllData () {
                console.log(this.$route.params)
                if(this.$route.params.id){
                    this.top_category = this.$route.params.id;
                    this.getMenu(this.top_category); // 获取左侧菜单列表
                }else{
                    this.getMenu(null); // 获取左侧菜单列表
                    this.pageType = 'search'
                    this.searchWord = this.$route.params.keyword;
                }

                this.getCurLoc(); // 获取当前位置
                this.getListData(); //获取产品列表
                this.getPriceRange(); // 获取价格区间
            },

如果传过来的是id,那么会是上面代码中的getMenu,传入当前的category的id作为参数。

获取到某一个category的二级三级分类。

getMenu(id) {
                if(id != null){
                  getCategory({
                    id:this.$route.params.id
                  }).then((response)=> {
                    this.cateMenu = response.data.sub_cat;
                    this.currentCategoryName = response.data.name
                  }).catch(function (error) {
                    console.log(error);
                  });
                }else {
                  getCategory({}).then((response)=> {
                    this.cateMenu = response.data;
                    this.isObject = false
                  }).catch(function (error) {
                    console.log(error);
                  });
                }

            },

如果id不为空,也就是分类查询二级三级,那么则调用getCategory,将当前的cateMenu和currentCategoryName 使用response.data中的进行填充。

src/views/list/list-nav/listNav.vue:

mark

可以看到传递进来的参数,我们是在list中获取到的数据想要传递到listnav中来,就要用

<list-nav :currentCategoryName="currentCategoryName" :cateMenu="cateMenu" :proNum="proNum" :isObject="isObject" @on-change="changeMenu"></list-nav>

通过冒号后面加变量及参数名。将当前页内值传递到list_nav.因为不止要获得类别,还要获取商品一共多少件。

左侧的列表调用的都是getCategory函数,之前我们已经将其配置为本地化数据。

商品的列表页

获取产品的列表会判断我们是只几天的search。还是要获取商品getGoods

getListData() {
                if(this.pageType=='search'){
                  getGoods({
                    search: this.searchWord, //搜索关键词
                  }).then((response)=> {
                    this.listData = response.data.results;
                    this.proNum = response.data.count;
                  }).catch(function (error) {
                    console.log(error);
                  });
                }else {
                  getGoods({
                    page: this.curPage, //当前页码
                    top_category: this.top_category, //商品类型
                    ordering: this.ordering, //排序类型
                    pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间
                    pricemax: this.pricemax // 价格最高 默认为‘’
                  }).then((response)=> {

                    this.listData = response.data.results;
                    this.proNum = response.data.count;
                  }).catch(function (error) {
                    console.log(error);
                  });
                }

            },

搜索的时候不需要知道当前的页码,排序规则。而如果page_type不是搜索(page_type的设定是位于getalldata中根据请求参数判断设定的),那么我们可以调用getGoods

getGoods位于api.js中

//获取商品列表
export const getGoods = params => { return axios.get(`${local_host}/goods/`, { params: params }) }

getListData中的getgoods可以看到前端使用的参数名称。

我们可以前往view中将分页的参数修改为page与前端保持一致。

    page_query_param = "page"

参数top_category就是我们的第一级别。它是将我们参数中的id值传入。

因此在后台我们也需要配套的做一个category的过滤器。

如何获取一级分类下的所有商品。

goods/filters.py:class GoodsFilter

    top_category = filters.NumberFilter(name="category",method='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))

然后将queryset return回去。

pricemin以及pricemax与我们的前端代码中的不一致。

所以修改goods/filters.py中的与前端保持一致。

分页数据中会自带一个count值。

mark

往上翻一点; getListdata中的getGoods里面我们获取到了response.data.count; 然后存入了proNum中。proNum是我们当前页面data中的变量,通过list nav:传递到了list nav页面

                <list-sort @on-sort="changeSort" :proNum="proNum"></list-sort>

list sort也是同样传递了这个变量过去。

  • 设置分页size与前端保持一致
class GoodsPagination(PageNumberPagination):
    page_size = 12
  • GoodsListViewSet中的order字段与前端保持一致
    ordering_fields = ('sold_num', 'shop_price')

vue的商品搜索功能

search_fields = ('name', 'goods_brief', 'goods_desc')

没有需要配置的接口,因为search仍然调用的是后端的goods接口。

价格区间

<price-range :priceRange="priceRange" @on-change="changePrice"></price-range>

为price-range组件传递了priceRange参数

 getPriceRange () {
                this.$http.post('/priceRange', {
                    params: {
                        proType: this.type, //商品类型
                    }
                }).then((response)=> {

                    this.priceRange = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },

getPriceRange会在getAllData也就是crate生命周期被调用。

$http.post是发起向mock中的数据接口的请求。

Mock.mock('/priceRange',

推荐将这些数据设置到后台中。价格区间根据不同的商品类别等计算。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

设计Go API的管道使用原则

管道是并发安全的队列,用于在Go的轻量级线程(Go协程)之间安全地传递消息。总的来讲,这些原语是Go语言中最为称道的特色功能之一。这种消息传递范式使得开发者可以...

3696
来自专栏Kirito的技术分享

浅析项目中的并发(二)

分布式遭遇并发 在前面的章节,并发操作要么发生在单个应用内,一般使用基于JVM的lock解决并发问题,要么发生在数据库,可以考虑使用数据库层面的锁,而在分布式...

39813
来自专栏Kirito的技术分享

深入理解 RPC 之集群篇

上一篇文章分析了服务的注册与发现,这一篇文章着重分析下 RPC 框架都会用到的集群的相关知识。 集群(Cluster)本身并不具备太多知识点,在分布式系统中,...

3709
来自专栏文渊之博

部署和使用kibana

背景 本文将主要介绍ELK的可视化工具Kibana的部署和使用。主要分为三个步骤来实现最终呈现:   1.导入数据到ES;   2.部署kiban...

25510
来自专栏Django中文社区

评论

创建评论应用 相对来说,评论其实是另外一个比较独立的功能。Django 提倡,如果功能相对比较独立的话,最好是创建一个应用,把相应的功能代码写到这个应用里。我们...

5486
来自专栏应用案例

Web前端面试题小集

来自:前端打小怪升级笔记,作者:spademan segmentfault.com/a/1190000008322096 一、一个页面上两个div左右铺满整个浏...

3299
来自专栏屈定‘s Blog

Angular2学习记录-给后端程序员的经验分享

前几天刚下定决心把毕业设计改造下,因为毕业设计算是我学习的基石,学习到的东西都尽可能的在这个平台上施展,锻炼自己.改造为前后端分离,前端使用angular2,后...

1162
来自专栏娱乐心理测试

微信小程序中如何打开另一个小程序

1.5K5
来自专栏社区的朋友们

企鹅社区移动版Vue2.0升级手记

引入Vue框架比较早,随着2.0的升级,受到业界的高度关注,应用也越来越广泛,所以我们也得跟上步伐。企鹅社区移动版前端采用VUE 1.0开发。随着官方2.0的推...

2.8K0
来自专栏腾讯云实验室

腾讯云实验室的正确投稿姿势

腾讯云实验室上线了在线投稿能力,现在除了官方推出的实验室之外,允许有能力的开发者把自己的技术和经验通过在实验室投稿的方式来进行分享和传播。

5132

扫码关注云+社区

领取腾讯云代金券