Vue+Django REST Framework生鲜电商项目学习笔记——商品类别数据和Vue展示

分为以下几个环节:

  1. 商品类别数据接口
  2. Vue展示商品分类数据
  3. Vue展示商品列表页数据
  4. Vue的商品搜索功能

商品类别数据接口

views.py中进行修改:

1
2
3
4
5
6
7
class CategoryViewset(mixins.ListModelMixin, viewsets.GenericViewSet):
"""
list:
商品分类列表数据
"""
queryset = GoodsCategory.objects.all()
serializer_class = CategorySerializer

urls.py中进行修改:

1
2
# 配置category的url
router.register(r'categorys', CategoryViewset, base_name="categorys")

效果:

此时所有的category按照id进行展示,并没有按照category级别有一个分级的层次结构,下面进行处理(利用serializer嵌套):

views.py中进行修改:

1
2
3
4
5
6
7
class CategoryViewset(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
"""
list:
商品分类列表数据
"""
queryset = GoodsCategory.objects.filter(category_type=1)
serializer_class = CategorySerializer

serializers.py中进行修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class CategorySerializer3(serializers.ModelSerializer):
class Meta:
model = GoodsCategory
fields = '__all__'


class CategorySerializer2(serializers.ModelSerializer):
sub_cat = CategorySerializer3(many=True)

class Meta:
model = GoodsCategory
fields = '__all__'


class CategorySerializer(serializers.ModelSerializer):
sub_cat = CategorySerializer2(many=True)

class Meta:
model = GoodsCategory
fields = '__all__'

效果:

同时,在CategoryViewset中继承mixins.RetrieveModelMixin,可以让我们不用通过复杂的url配置即可获取指定的商品类别数据,例如获取id为24的商品类别数据只需要访问http://localhost:8000/categorys/24/即可:

Vue展示商品分类数据

在Vue项目源码online-store/src/api/api.js文件中修改:

1
2
3
4
5
6
7
8
9
10
11
12
let localhost = 'http://127.0.0.1:8000'

...
//获取商品类别信息
export const getCategory = params => {
if ('id' in params) {
return axios.get(`${local_host}/categorys/` + params.id + '/');
} else {
return axios.get(`${local_host}/categorys/`, params);
}
};
...

运行项目,进行商品类别信息接口调试,访问127.0.0.1:3000,发现无法展示商品分类中的数据信息:

出现了跨域的错误,所以需要设置一下解决drf的跨域问题。大体上,有两种解决跨域的方法:

  1. 前端代理
  2. 服务器设置

这里我们选择服务器设置的办法,利用django-cors-headers来完成,按照文档进行安装配置,关键在于在settings.py文件中加上CORS_ORIGIN_ALLOW_ALL = True,重新运行之后,就发现数据出来了。

可以看到Tab中并没有类目,我们在后台管理系统里稍作修改即可,比如修改生鲜食品,是否导航勾选为是,修改类别描述为生鲜食品:

刷新页面:

看到设置生效了,再多设置几个:

Vue展示商品列表页数据

首先需要展示出商品类别所对应的商品列表数据(懒得写了,艹):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# goods/filters.py

import django_filters
from django.db.models import Q

from .models import Goods


class GoodsFilter(django_filters.rest_framework.FilterSet):
"""
商品的过滤类
"""
pricemin = django_filters.NumberFilter(name="shop_price", lookup_expr="gte")
pricemax = django_filters.NumberFilter(name="shop_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 = ['pricemin', 'pricemax', ]

Vue的商品搜索功能

只需要配置search_fields就行了:

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

🐶 ~怕是要给老板下跪了哦~ 🐶