Django+Vue开发生鲜电商平台之6.使用Vue实现商品类别和商品数据前台显示

你的名字 2023-03-01 13:27 39阅读 0赞

### 文章目录 ###

*  一、商品类别数据接口
 *  二、Vue展示商品分类
 *  三、Vue展示商品列表页数据和搜索

> 什么是胸怀？胸怀是人生的志向和抱负，胸怀是人格的品位和质量，胸怀是人对待世界万物气量和风度的定位。胸怀，能使弱者走过别人不敢走的路，攀上别人难以达到的高峰；胸怀，可以使先天低矮的人在别人眼里变得挺拔高大；胸怀，能使一名柔弱的女子充满大丈夫的英雄气概；胸怀，也使一个弱质变得体格健壮。  
> ——马云

Github和Gitee代码**同步更新**：  
[https://github.com/PythonWebProject/Django\_Fresh\_Ecommerce][https_github.com_PythonWebProject_Django_Fresh_Ecommerce]；  
[https://gitee.com/Python\_Web\_Project/Django\_Fresh\_Ecommerce][https_gitee.com_Python_Web_Project_Django_Fresh_Ecommerce]。

现在将DRF数据接口与前端显示相结合。

# 一、商品类别数据接口 #

由之前的效果图和需求分析可知，首页全部商品分类需要展示一级、二级和三级分类，而在搜索结果页只展示一级和二级分类，分类有两个Vue组件，即Header中的全部商品分类和左侧的某以及类别对应的分类导航栏，也对应两个数据接口。

先在apps/goods/views.py中定义商品类别数据View如下：

from rest_framework import mixins, viewsets, filters
    from rest_framework.pagination import PageNumberPagination
    from django_filters.rest_framework import DjangoFilterBackend
    
    from .models import Goods, GoodsCategory
    from .serializers import GoodsSerializer, CategorySerializer
    from .filters import GoodsFilter
    
    
    # Create your views here.
    
    class GoodsPagination(PageNumberPagination):
        page_size = 10
        page_size_query_param = 'page_size'
        page_query_param = 'p'
        max_page_size = 100
    
    class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
        '''商品列表页，并实现分页、搜索、过滤、排序'''
    
        queryset = Goods.objects.all()
        serializer_class = GoodsSerializer
        pagination_class = GoodsPagination
        filter_backends = [DjangoFilterBackend, filters.SearchFilter, filters.OrderingFilter]
        filter_class = GoodsFilter
        search_fields = ['name', 'goods_brief', 'goods_desc']
        ordering_fields = ['sold_num', 'market_price']
    
    
    class CategoryViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
        '''商品分类列表数据'''
    
        queryset = GoodsCategory.objects.all()
        serializer_class = CategorySerializer

再在urls.py中配置路由如下：

from django.conf.urls import url, include
    from django.views.static import serve
    from rest_framework.documentation import include_docs_urls
    from rest_framework.routers import DefaultRouter
    
    import xadmin
    from .settings import MEDIA_ROOT
    from goods.views import GoodsListViewSet, CategoryViewSet
    
    # Create a router and register our viewsets with it.
    
    router = DefaultRouter()
    
    # 配置goods的路由
    router.register(r'goods', GoodsListViewSet, basename='goods')
    
    # 配置categories的路由
    router.register(r'categories', CategoryViewSet, basename='categories')

访问[http://127.0.0.1:8000/categories/][http_127.0.0.1_8000_categories]，显示：  
![django goodscategory serialize simple][]

显然，将所有的数据都发送到前端，但是根据前端的要求，不同级之间的类别具有附属和依赖的关系，而不是平级的关系，显然还没有达到效果，需要进行改进。

此时需要用到才定义模型GoodsCategory的字段parent\_category时指定的related\_name属性，即`related_name='sub_cat'`，此属性表示可以反向引用，即通过夫类别可以通过该属性查询子类别，利用该属性实现Serializer的三层嵌套引用，从而实现类别的嵌套显示，serializers.py 如下：

from rest_framework import serializers
    
    from .models import Goods, GoodsCategory
    
    
    class TerCategorySerializer(serializers.ModelSerializer):
        '''三级商品子类别序列化'''
    
        class Meta:
            model = GoodsCategory
            fields = '__all__'
    
    
    class SecCategorySerializer(serializers.ModelSerializer):
        '''二级商品子类别序列化'''
    
        sub_cat = TerCategorySerializer(many=True)
        class Meta:
            model = GoodsCategory
            fields = '__all__'
    
    
    class CategorySerializer(serializers.ModelSerializer):
        '''一级商品类别序列化'''
    
        sub_cat = SecCategorySerializer(many=True)
        class Meta:
            model = GoodsCategory
            fields = '__all__'
    
    
    class GoodsSerializer(serializers.ModelSerializer):
        '''商品序列化'''
        category = CategorySerializer()
        class Meta:
            model = Goods
            fields = '__all__'

此时再访问[http://127.0.0.1:8000/categories/][http_127.0.0.1_8000_categories]，显示：  
![django goodscategory serialize nesting][]

此时，以嵌套的形式在父类别中显示出子类别，并且属于三层嵌套。

现在需要实现获取某一个具体类别的详情（包括其基本信息和子类别），此时需要在路由中加入商品对应的id，只要使CategoryViewSet继承自**mixins.RetrieveModelMixin**，即可自动配置路由，**无需再额外配置**，即views.py如下：

class CategoryViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
        '''商品分类列表数据'''
    
        queryset = GoodsCategory.objects.all()
        serializer_class = CategorySerializer

显示：  
![django goodscategory serialize single][]

显然，此时地址中传入指定的id，只显示该id对应的类别的信息和其子类别的信息。

# 二、Vue展示商品分类 #

在测试前需要先在fresh\_online目录下执行命令`cnpm run dev`启动前端项目，启动后访问[http://127.0.0.1:8080][http_127.0.0.1_8080]，可以看到：  
![django goodscategory frontend preview][]

显然，商品分类展示完整。

为了只是单独测试某一类数据而不影响其他数据的显示，因此其他数据都通过线上接口显示、待测试的数据通过本地接口测试。

在前端项目fresh\_online中，在src/api/api.js中定义了数据API接口：

import axios from 'axios';
    
    
    let host = 'http://shop.projectsedu.com';
    let local_host = 'http://127.0.0.1:8000';
    
    //获取商品类别信息
    export const queryCategorygoods = params => {  return axios.get(`${ host}/indexgoods/`) }
    
    //获取首页中的新品
    export const newGoods = params => {  return axios.get(`${ host}/newgoods/`) }
    
    //获取轮播图
    export const bannerGoods = params => {  return axios.get(`${ host}/banners/`) }
    
    //获取商品类别信息
    export const getCategory = params => { 
      if('id' in params){ 
        return axios.get(`${ local_host}/categorys/`+params.id+'/');
      }
      else { 
        return axios.get(`${ local_host}/categorys/`, params);
      }
    };
    
    
    //获取热门搜索关键词
    export const getHotSearch = params => {  return axios.get(`${ host}/hotsearchs/`) }
    
    //获取商品列表
    export const getGoods = params => {  return axios.get(`${ host}/goods/`, {  params: params }) }
    
    //商品详情
    export const getGoodsDetail = goodId => {  return axios.get(`${ host}/goods/${ goodId}`+'/') }
    
    //获取购物车商品
    export const getShopCarts = params => {  return axios.get(`${ host}/shopcarts/`) }
    // 添加商品到购物车
    export const addShopCart = params => {  return axios.post(`${ host}/shopcarts/`, params) }
    //更新购物车商品信息
    export const updateShopCart = (goodsId, params) => {  return axios.patch(`${ host}/shopcarts/`+goodsId+'/', params) }
    //删除某个商品的购物记录
    export const deleteShopCart = goodsId => {  return axios.delete(`${ host}/shopcarts/`+goodsId+'/') }
    
    //收藏
    export const addFav = params => {  return axios.post(`${ host}/userfavs/`, params) }
    
    //取消收藏
    export const delFav = goodsId => {  return axios.delete(`${ host}/userfavs/`+goodsId+'/') }
    
    export const getAllFavs = () => {  return axios.get(`${ host}/userfavs/`) }
    
    //判断是否收藏
    export const getFav = goodsId => {  return axios.get(`${ host}/userfavs/`+goodsId+'/') }
    
    //登录
    export const login = params => { 
      return axios.post(`${ host}/login/`, params)
    }
    
    //注册
    
    export const register = parmas => {  return axios.post(`${ host}/users/`, parmas) }
    
    //短信
    export const getMessage = parmas => {  return axios.post(`${ host}/code/`, parmas) }
    
    
    //获取用户信息
    export const getUserDetail = () => {  return axios.get(`${ host}/users/1/`) }
    
    //修改用户信息
    export const updateUserInfo = params => {  return axios.patch(`${ host}/users/1/`, params) }
    
    
    //获取订单
    export const getOrders = () => {  return axios.get(`${ host}/orders/`) }
    //删除订单
    export const delOrder = orderId => {  return axios.delete(`${ host}/orders/`+orderId+'/') }
    //添加订单
    export const createOrder = params => { return axios.post(`${ host}/orders/`, params)}
    //获取订单详情
    export const getOrderDetail = orderId => { return axios.get(`${ host}/orders/`+orderId+'/')}
    
    
    //获取留言
    export const getMessages = () => { return axios.get(`${ host}/messages/`)}
    
    //添加留言
    export const addMessage = params => { return axios.post(`${ host}/messages/`, params, { headers:{  'Content-Type': 'multipart/form-data' }})}
    
    //删除留言
    export const delMessages = messageId => { return axios.delete(`${ host}/messages/`+messageId+'/')}
    
    //添加收货地址
    export const addAddress = params => { return axios.post(`${ host}/address/`, params)}
    
    //删除收货地址
    export const delAddress = addressId => { return axios.delete(`${ host}/address/`+addressId+'/')}
    
    //修改收货地址
    export const updateAddress = (addressId, params) => { return axios.patch(`${ host}/address/`+addressId+'/', params)}
    
    //获取收货地址
    export const getAddress = () => { return axios.get(`${ host}/address/`)}

其中，获取商品分类的接口为：

export const getCategory = params => { 
      if('id' in params){ 
        return axios.get(`${ host}/categorys/`+params.id+'/');
      }
      else { 
        return axios.get(`${ host}/categorys/`, params);
      }
    };

显然，可以看到，如果参数中传入了id，则返回单个类别，否则返回所有类别。

而负责将类别数据显示到前端的是head.vue组件，位于src/views/head目录下，其通过赋值和循环将类别遍历出来：

<div class="main_cata" id="J_mainCata" v-show="showAllmenu">
        <ul>
            <li class="first" v-for="(item,index) in allMenuLabel" @mouseover="overChildrenmenu(index)" @mouseout="outChildrenmenu(index)">
              <h3 style="background:url(../images/1449088788518670880.png) 20px center no-repeat;">
                <router-link :to="'/app/home/list/'+item.id">{
       {item.name}}</router-link> </h3>
                <div class="J_subCata" id="J_subCata" v-show="showChildrenMenu ===index" style=" left: 215px; top: 0px;">
                    <div class="J_subView" >
                      <div v-for="list in item.sub_cat">
                        <dl>
                          <dt>
                            <router-link :to="'/app/home/list/'+list.id">{
       {list.name}}</router-link>
                          </dt>
    
                          <dd>
                            <router-link v-for="childrenList in list.sub_cat" :key="childrenList.id" :to="'/app/home/list/'+childrenList.id">{
       {childrenList.name}}</router-link>
                          </dd>
                        </dl>
                        <div class="clear"></div>
                      </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    
    // ...
    
    getMenu(){//获取菜单
        getCategory({
          params:{}
        }).then((response)=> {
                  console.log(response)
                  this.allMenuLabel = response.data
              })
              .catch(function (error) {
                console.log(error);
              });
    },

为了让数据在前端正常显示，还需要过滤类别数据、只显示一级类别，修改views.py如下：

class CategoryViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
        ''' List: 显示商品所有分类列表数据 Retrieve: 获取单个商品分类详情 '''
    
        queryset = GoodsCategory.objects.filter(category_type=1)
        serializer_class = CategorySerializer

此时再访问[http://127.0.0.1:8080][http_127.0.0.1_8080]，显示：  
![django goodscategory frontend nocategory][]

此时再访问，却访问不到商品分类，查看控制台提示很明显，`同源策略禁止读取位于 http://127.0.0.1:8000/categorys/ 的远程资源。`，即禁止跨域访问，当前端口是 **8080**，而数据接口端口是**8000**，因此被浏览器自动拒绝，一种方式是对服务器进行设置，还有一种是通过前端代理解决，这里采用第一种方式：  
首先在虚拟环境中执行`pip install django-cors-headers`命令安装库，然后在后端settings.py中配置Cors：

INSTALLED_APPS = [
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'apps.users.apps.UsersConfig',
        'goods.apps.GoodsConfig',
        'trade.apps.TradeConfig',
        'user_operation.apps.UserOperationConfig',
        'DjangoUeditor',
        'xadmin',
        'crispy_forms',
        'django.contrib.admin',
        'rest_framework',
        'django_filters',
        'corsheaders',
    ]
    
    MIDDLEWARE = [
        'corsheaders.middleware.CorsMiddleware',
        'django.middleware.security.SecurityMiddleware',
        'django.contrib.sessions.middleware.SessionMiddleware',
        'django.middleware.common.CommonMiddleware',
        'django.middleware.csrf.CsrfViewMiddleware',
        'django.contrib.auth.middleware.AuthenticationMiddleware',
        'django.contrib.messages.middleware.MessageMiddleware',
        'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ]
    
    # 跨域访问设置
    CORS_ORIGIN_ALLOW_ALL = True

此时再访问，显示：  
![django goodscategory frontend corssolved][]

此时不再报错，商品的各级分类也显示出来，但是可以看出来，全部分类右侧并未显示商品分类，这是因为一级分类的is\_tab属性默认为False，改为True即可，可以在数据库中修改，也可以直接在后台管理系统修改。

head.vue中显示商品分类的逻辑也是通过循环实现，如下：

后台修改商品分类is\_tab属性并刷新页面如下：  
![django goodscategory frontend modify is\_tab][django goodscategory frontend modify is_tab]

此时已经显示出商品分类。

# 三、Vue展示商品列表页数据和搜索 #

现在进一步实现点击某一个商品分类下面显示出**商品详情**，具体包括分类显示、价格筛选、分页和排序等功能。  
通过项目可以看到，通过搜索和点击Tab页左侧显示的导航栏是不同的，其数据接口也不一样，head.vue如下：

<div class="head_search_hot">
      <span>热搜榜：</span>
      <router-link v-for="item in hotSearch" :to="'/app/home/search/'+item.keywords" :key="item.keywords">
        {
       {item.keywords}}
      </router-link>
    </div>
    
    // ...
    
    <div class="main_nav_link" @mouseover="overAllmenu" @mouseout="outAllmenu">
        <a class="meunAll">全部商品分类
            <i class="iconfont"></i>
        </a>
        <div class="main_cata" id="J_mainCata" v-show="showAllmenu">
            <ul>
                <li class="first" v-for="(item,index) in allMenuLabel" @mouseover="overChildrenmenu(index)" @mouseout="outChildrenmenu(index)">
                  <h3 style="background:url(../images/1449088788518670880.png) 20px center no-repeat;">
                    <router-link :to="'/app/home/list/'+item.id">{
       {item.name}}</router-link> </h3>
                    <div class="J_subCata" id="J_subCata" v-show="showChildrenMenu ===index" style=" left: 215px; top: 0px;">
                        <div class="J_subView" >
                          <div v-for="list in item.sub_cat">
                            <dl>
                              <dt>
                                <router-link :to="'/app/home/list/'+list.id">{
       {list.name}}</router-link>
                              </dt>
    
                              <dd>
                                <router-link v-for="childrenList in list.sub_cat" :key="childrenList.id" :to="'/app/home/list/'+childrenList.id">{
       {childrenList.name}}</router-link>
                              </dd>
                            </dl>
                            <div class="clear"></div>
                          </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

可以看到，跳转路由不同，搜索跳转到`/app/home/search/`，而点击导航栏跳转到`/app/home/list/`。

再查看src/router/index.js如下：

{ 
      path: 'list/:id',
      name: 'list',
      component: list,
      meta: { 
        title: '列表',
        need_log: false
      }
    },
    { 
      path: 'search/:keyword',
      name: 'search',
      component: list,
      meta: { 
        title: '搜索',
        need_log: false
      }
    },

可以看到，两个路由绑定的组件是相同的，都是list，而在src/views/list/list.vue中：

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(); // 获取价格区间
    },
    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);
          });
        }
    
    },
    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);
          });
        }
    
    },

可以看到，针对不同的参数有不同的请求方法和参数。

请求商品列表数据使用的是`getListData()`方法，调用了`getGoods()`方法，为了测试获取商品，将`getGoods`API进行修改如下：

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

同时，向后端请求的参数有一个为top\_category，即表示一级类别，请求该参数则返回这一类别下的所有类别，需要在后端定义一个过滤器，需要找到该一级分类下的所有二级分及其对应的商品，后端apps/goods/filters.py如下：

import django_filters
    from django.db.models import Q
    
    from .models import Goods
    
    class GoodsFilter(django_filters.rest_framework.FilterSet):
        '''商品过滤类'''
        name = django_filters.CharFilter(field_name="name", lookup_expr='contains')
        pricemin = django_filters.NumberFilter(field_name="market_price", lookup_expr='gte')
        pricemax = django_filters.NumberFilter(field_name="market_price", lookup_expr='lte')
        top_category = django_filters.NumberFilter(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))
    
        class Meta:
            model = Goods
            fields = ['name', 'pricemin', 'pricemax']

显示：  
![django goodscategory  topcategory][django goodscategory topcategory]

此时，可以根据top\_category进行筛选，再查看前端：  
![django goodscategory  frontend goodslist][django goodscategory frontend goodslist]

可以看到，已经实现了价格**筛选、排序、分页**等功能。

从之前的代码还可以看到搜索功能的实现：

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);
      });
    }

再测试搜索功能如下：  
![django goodscategory  frontend search][django goodscategory frontend search]  
显然，已经实现了搜索功能。

[https_github.com_PythonWebProject_Django_Fresh_Ecommerce]: https://github.com/PythonWebProject/Django_Fresh_Ecommerce
[https_gitee.com_Python_Web_Project_Django_Fresh_Ecommerce]: https://gitee.com/Python_Web_Project/Django_Fresh_Ecommerce
[http_127.0.0.1_8000_categories]: http://127.0.0.1:8000/categories/
[django goodscategory serialize simple]: /images/20230208/3cffeac03bcd4268a5ed5468fbb121cc.png
[django goodscategory serialize nesting]: /images/20230208/ad76d4ba257f441a830e632727302640.png
[django goodscategory serialize single]: /images/20230208/58f24586d2b5433c8bf29ceebacab06d.png
[http_127.0.0.1_8080]: http://127.0.0.1:8080
[django goodscategory frontend preview]: /images/20230208/0d25e1c0037c4315adf2bc9e8474d38b.png
[django goodscategory frontend nocategory]: /images/20230208/66b469fd57fc49509f3e4dc41f4228b4.png
[django goodscategory frontend corssolved]: https://img-blog.csdnimg.cn/20200726182057867.gif
[django goodscategory frontend modify is_tab]: https://img-blog.csdnimg.cn/20200726183017705.gif
[django goodscategory topcategory]: https://img-blog.csdnimg.cn/20200726183054332.gif
[django goodscategory frontend goodslist]: https://img-blog.csdnimg.cn/20200726183120249.gif
[django goodscategory frontend search]: https://img-blog.csdnimg.cn/20200726183149232.gif