前后端分离

​
后端
模型层

from django.db import models

class Categor(models.Model):
cat_name = models.CharField(‘类别名字’, max_length=20)
class Meta:
db_table = ‘categor’
def str(self):
return self.cat_name

class Goods(models.Model):
sku_name = models.CharField(‘商品名字’, max_length=100)
price = models.DecimalField(verbose_name=‘商品价格’, max_digits=10, decimal_places=2)
selling_price = models.DecimalField(verbose_name=‘商品销售’, max_digits=10, decimal_places=2)
img = models.CharField(‘商品默认图片’, max_length=200)
title = models.CharField(‘商品标题’, max_length=20, null=True)
instruction = models.TextField(verbose_name=‘商品描述’)
count = models.IntegerField(‘商品销售数量’, default=0)
stock = models.IntegerField(‘商品存库数量’, default=0)
cate = models.ForeignKey(to=Categor, on_delete=models.CASCADE, verbose_name=‘商品类型’)
online = models.BooleanField(‘是否在售’, default=True)

class Meta:
    db_table = 'goods'
def __str__(self):
    return self.sku_name

class GoodImg(models.Model):
img = models.CharField(‘图片’, max_length=100)
title = models.CharField(‘图片描述’, max_length=20, null=True)
good = models.ForeignKey(to=Goods, on_delete=models.CASCADE, verbose_name=‘商品默认图片’)

class Meta:
    db_table = 'goodimg'
def __str__(self):
    return self.title

视图层

from django.shortcuts import render
from rest_framework.views import APIView
from goods.models import Categor, Goods
from rest_framework.response import Response
from goods.serializers import GoodsSer

class IndexView(APIView):
def get(self, request):
cate_name = request.query_params.get(‘cate_name’)
# 获取数据
goods_all = Categor.objects.filter(cat_name=cate_name).first()
# 判断是否存在
if not goods_all:
return Response({
‘code’: 400,
‘msg’: ‘信息不存在’
})
# 获取商品数据
goods_data = goods_all.goods_set.all()[:7]
# 序列化
ser = GoodsSer(goods_data, many=True)

    return Response({
        'code': 200,
        'msg': '获取成功',
        'goods': ser.data
    })

class GoodsView(APIView):
def post(self, request):
cate_name = request.data.get(‘cate_name’)
# 获取数据
goods_all = Goods.objects.filter(cate__cat_name__in=cate_name).order_by(‘-count’).all()[:7]
# 序列化
ser = GoodsSer(goods_all, many=True)
return Response({
‘code’: 200,
‘msg’: ‘获取成功’,
‘goods’: ser.data
})
前端vuex

  

    
    
      
        手机
      
      
        
          
          
            
          
        
        
        
          
          
        
      
    
    

    
    
      
        家电
        
          
          
            热门
            电视影音
          
        
      
      
        
          

            
            

              
            
            

              
            
          
        
        
        
          
        
      
    
    

    
    
      
        配件
        
          
            热门
            保护套
            充电器
          
        
      
      
        
          

            

              
            
            

              
            
          
        
        
          
        
      
    
    
  

},
methods: {
// 获取家电模块 MyMenu子组件传过来的数据, 即激活项的切换
getChildMsg(val) { //MyMenu菜单项的激活状态
console.log(val) //slot 1/2
this.applianceActive = val;
},
// 获取配件模块子组件传过来的数据
getChildMsg2(val) {
this.accessoryActive = val;
},

getPromo(categoryName, val) {
  // 有API传入时，例子
  // categoryName:["电视机", "空调", "洗衣机"],
  // val:"applianceList",
  // api:"/goods/getHotProduct/"
  // 判断是否有api传进来
  console.log(categoryName)  // 分类名称
  console.log(val)  // 数据变量名
  // TODO 获取分类下商品和热门商品

  this.$axios.get('goods/index/',{
    params:{
      // 'cate_id': 1
      'cate_name': categoryName
    } 
  }).then(res =>{
    if (res.data.code == 200){
      this[val] = res.data.goods
    }
  }).catch(err =>{
    alert('页面出错了')
    console.log(err)
  })
},
getPromoh(categoryName, val){
  this.$axios.post('/goods/how/',{'cate_name': categoryName})
  .then(res =>{
    if (res.data.code == 200){
      this[val] = res.data.goods
    }
  }).catch(err =>{
    alert('页面错误')
    console.log(err)
  })
}

}
};

​