Advertisement

商品页展示---商品列表

阅读量:

Vue前端加载一类的商品数据 ,前端接口代码,以手机例:

复制代码
 //获取手机类的商品

    
 this.getPromo("手机", "phoneList");//获取手机类的所有商品{},存入phoneList
    
  
    
 // 获取商品数据
    
 getPromo(categoryName, val, api) {
    
   // 有API传入时,例子
    
   // categoryName:["电视机", "空调", "洗衣机"],
    
   // val:"applianceList",
    
   // api:"/goods/getHotProduct/"
    
   // 判断是否有api传进来
    
   api = api != undefined ? api : "/goods/oneCategory/all/";
    
   this.$axios
    
     .post(api, {
    
       categoryName
    
     })
    
     .then(res => {
    
       console.log("@@获取"+categoryName+"的响应", res)
    
       //获取属性,并赋值,如'phoneList'
    
       this[val] = res.data;
    
     })
    
     .catch(err => {
    
       return Promise.reject(err);
    
     });
    
 }

==Django后端接口实现代码==

复制代码
 #加载一类的所有商品

    
 path("oneCategory/all/", GoodsList.as_view())
    
 #视图接口
    
 ## 通过某个类别 --> 查所有商品
    
 class GoodsList(APIView):
    
     def post(self,request):
    
     #类别名
    
     cate_name = request.data.get('categoryName')
    
     try:
    
         # 查询类别对象
    
         cate = Category.objects.get(cate_name=cate_name)
    
     except Exception as e:
    
         print(e)
    
         return Response({'msg':'此商品类别不存在','code': 204})
    
     goods_query_set = cate.goods_set.all()
    
     goods_ser = GoodsSer(goods_query_set,many=True)  #many=True,序列化多个对象集合
    
     return Response(goods_ser.data)

热门商品

Vue加载热门商品(销量越多越热门) ==前端接口代码==,以家电为例:

复制代码
 // 获取家电类的商品,有API传入

    
 this.getPromo(
    
   ["电视机", "空调", "洗衣机"],
    
   "applianceList",
    
   "/goods/getHotProduct/"
    
 );
    
 // 获取各类商品数据
    
 getPromo(categoryName, val, api) {
    
   // 有API传入时,例子
    
   // categoryName:["电视机", "空调", "洗衣机"],
    
   // val:"applianceList",
    
   // api:"/goods/getHotProduct/"
    
   // 判断是否有api传进来
    
   api = api != undefined ? api : "/goods/oneCategory/all/";
    
   this.$axios
    
     .post(api, {
    
       categoryName
    
     })
    
     .then(res => {
    
       console.log("@@获取"+categoryName+"的响应", res)
    
       //获取属性,并赋值,如'phoneList'
    
       this[val] = res.data;
    
     })
    
     .catch(err => {
    
       return Promise.reject(err);
    
     });
    
 }

==Django后端接口==

复制代码
 # 获取热门商品

    
 path('getHotProduct/', HotGoods.as_view()),
    
 #视图
    
 from functools import reduce
    
 ## 获取热门商品
    
 class HotGoods(APIView):
    
     def post(self,request):
    
     #获取前端数据
    
     category_name = request.data.get("categoryName")
    
     category_objs = [Category.objects.get(cate_name=i) for i in category_name]
    
  
    
     temp_list = [cate.goods_set.all() for cate in category_objs]
    
     #将三个类别的查询集 并 起来
    
     r = reduce(lambda x,y:x|y, temp_list).order_by("-count")  #销量越高,越热门
    
     print("合并的查询集:",r)
    
  
    
     goods_ser = GoodsSer(r,many=True)
    
  
    
     return Response(goods_ser.data)

全部评论 (0)

还没有任何评论哟~