1. 程式人生 > 其它 >vue+Django專案-商品詳情頁展示

vue+Django專案-商品詳情頁展示

商品的view

# 加上RetrieveModelMixin即可
class GoodsListViewSet(mixins.ListModelMixin,mixins.RetrieveModelMixin, viewsets.GenericViewSet):
    """
    商品列表頁,分頁,搜尋,過濾,排序
    """
    queryset = Goods.objects.all()
    serializer_class = GoodsSerializer
    filter_backends = (DjangoFilterBackend, filters.SearchFilter, filters.OrderingFilter)
    filterset_class = GoodsFilter
    search_fields = ['name', 'goods_brief', 'goods_desc']

  url裡檢查是否配置好了

# 使用router新增goods的url 第1步
from rest_framework.routers import DefaultRouter
router = DefaultRouter()
#配置goods的url
router.register(r'goods', GoodsListViewSet, basename="goods")

urlpatterns = [

    # 使用router新增url 第2步
    url(r'^', include(router.urls)),

]

 商品輪播圖

class GoodsImageSerializer(serializers.ModelSerializer):
    # 商品詳情的輪播圖
    class Meta:
        model = GoodsImage
        fields = ('image',)


class GoodsSerializer(serializers.ModelSerializer):
    category = CategorySerializer() #類別例項化
    images = GoodsImageSerializer(many=True) #商品詳情的輪播圖 例項化

    class Meta:
        model = Goods
        # fields = ['name', 'click_num', 'goods_front_image']
        #獲取所有的資料,外來鍵會被序列化成id。展示外來鍵資訊可以再用 serializer
        fields = "__all__"