python-基于diango和vue实现简单的增删改查以及类别树的实现

python-基于diango和vue实现简单的增删改查以及类别树的实现

最近学习django框架，展示一下学习成果
图一为商品的增删改查

》图二为类别树

---

以下为代码显示

#views层代码展示
def goGoodsInfo(request):
    return render(request, 'goodsinfo/goodsinfo.html')
    pass

def getGoodsInfo(request):
    goodsData = request.body.decode('utf-8')
    goodsDict = json.loads(goodsData)

    tGoods = TGoods()
    tGoods.goods_id = int(goodsDict.get('goodsId'))
    tGoods.goods_name = goodsDict.get('goodsName')
    opr =  goodsDict.get('opr')

    pageSize = int(goodsDict.get('pageSize'))
    currentPage = int(goodsDict.get('currentPage'))

    startRow = (currentPage - 1)*pageSize
    endRow   = pageSize*currentPage

    querySet = TGoods.objects
    updateResult = 0
    if opr == "delete":
        updateResult = tGoods.delete()
        pass
    elif opr == "update":
        result = TGoods.objects.filter(goods_id=tGoods.goods_id).values('goods_id','type_id','type_id__type_name','goods_name','goods_price',
                                                                        'goods_num', 'goods_sellnum','goods_discount' , 'goods_status',
                                                                        'goods_pic1','goods_pic2','goods_pic3')
        reResult = {
   'code': 1, 'data': result[0], 'pageSize': pageSize, 'currentPage': currentPage,
                    'totalPage': 0, 'counts': 0, 'updateResult': updateResult, 'opr':opr}
        return HttpResponse(json.dumps(reResult), content_type='application/json')
        pass
    elif opr == 'submitUpdate':
        updateResult = TGoods.objects.filter(goods_id=tGoods.goods_id).update(
            goods_name= tGoods.goods_name,
            goods_price=goodsDict.get('goodsPrice'),
            type_id=goodsDict.get('typeId'),
            goods_num=goodsDict.get('goodsNum'),
            goods_discount=goodsDict.get('goodsDiscount'),
            goods_status=goodsDict.get('goodsStatus'),
            goods_pic1=goodsDict.get('goodsPic1'),
            goods_pic2=goodsDict.get('goodsPic2'),
            goods_pic3=goodsDict.get('goodsPic3')
        )
        pass
    elif opr == "add":
        updateResult = TGoods.objects.create(goods_name = goodsDict.get('goodsName'),
                                             goods_price = goodsDict.get('goodsPrice'),
                                             type_id= goodsDict.get('typeId'),
                                             goods_num= goodsDict.get('goodsNum'),
                                             goods_discount= goodsDict.get('goodsDiscount'),
                                             goods_status= goodsDict.get('goodsStatus'),
                                             goods_pic1= goodsDict.get('goodsPic1'),
                                             goods_pic2= goodsDict.get('goodsPic2'),
                                             goods_pic3 = goodsDict.get('goodsPic3')
                                             )
        if updateResult:
            updateResult = 1
        else:
            updateResult = 0
        pass
    if tGoods.goods_name:
        querySet = querySet.filter(goods_name__contains = tGoods.goods_name)
        pass

    result = querySet.values('goods_id','type_id__type_name','goods_name','goods_price','goods_num', 'goods_sellnum','goods_discount' , 'goods_status','goods_pic1')[startRow:endRow]
    counts = querySet.count()

    totalPage = counts//pageSize if counts%pageSize == 0 else counts//pageSize+1

    reResult = {
   'code':1, 'data': list(result), 'pageSize':pageSize, 'currentPage':currentPage, 'totalPage':totalPage, 'counts':counts, 'updateResult':updateResult,'opr':opr}
    return HttpResponse(json.dumps(reResult), content_type='application/json')
    pass


def getGoodsType(request):
    dictData = json.loads(request.body.decode('utf-8'))

    parentId = dictData.get('parentId')
    goodsTypeId = dictData.get('goodsTypeId')
    goodsType   = dictData.get('goodsType')
    opr = dictData.get('opr')

    updateResult = 0
    if opr == 'delete':
        updateResult = TGoodsType.objects.filter(type_id=goodsTypeId).delete()
        pass
    if opr == 'submitUpdate':
        updateResult = TGoodsType.objects.filter(type_id=goodsTypeId).update(type_name=goodsType, type_parentid=parentId)
        pass
    if opr == "add":
        parentId = int(parentId)
        if parentId == 0:
            updateResult = TGoodsType.objects.create(type_name=goodsType)
        else:
            tGoodsType = TGoodsType()
            tGoodsType.type_id = parentId
            updateResult = TGoodsType.objects.create(type_name=goodsType, type_parentid=tGoodsType)
            # updateResult = tGoodsType.save()
            pass
        if updateResult:
            updateResult = 1
        else:
            updateResult = 0
        pass
    if opr == 'update':
        goodsType = list(TGoodsType.objects.filter(type_id=goodsTypeId).values('type_id', 'type_name', 'type_parentid', 'type_parentid__type_name'))
        reResult = {
   'code': 1, 'data': goodsType, 'updateResult': updateResult, 'opr': opr}

        return HttpResponse(json.dumps(reResult), content_type='application/json')
        pass

    dictTree = getGoodTypeTree(0, {
   })
    reResult = {
   'code': 1, 'data': dictTree, 'updateResult': updateResult, 'opr': opr}

    return HttpResponse(json.dumps(reResult), content_type='application/json')
    pass
# 递归获得所有的商品类别构造树形结构
def getGoodTypeTree(parentId, dictTree):
    if parentId == 0:
        dictTree = list(TGoodsType.objects.filter(type_parentid__isnull=True).values('type_id', 'type_name', 'type_parentid'))
        pass
    for node in dictTree:
        childNode = list(TGoodsType.objects.filter(type_parentid=node.get('type_id')).values('type_id', 'type_name', 'type_parentid'))
        if childNode:
            node['childNode'] = childNode
            getGoodTypeTree(node.get('type_id'), childNode)
            pass
        else:
            node['childNode']=[]
            pass
        pass
    return dictTree
    pass

// register the grid component
Vue.component('demo-grid', {
   
  template: '#goodsinfo-template',
  replace: true,
  props: {
   
    data: Array,
    columns: Array,
    columnsTitle: Object,
    filterKey: String,
    currentPage: Number,
    pageSize: Number,
    totalPage: Number,
    counts: Number,
  },
  data: function () {
   
    var sortOrders = {
   }
    console.log(this.columnsTitle.name)
    this.columns.forEach(function (key) {
   
      sortOrders[key] = 1
    })
    return {
   
      sortKey: '',
      sortOrders: sortOrders
    }
  },
  computed: {
   
    filteredData: function () {
   
      var sortKey = this.sortKey
      var filterKey = this.filterKey && this.filterKey.toLowerCase()
      var order = this.sortOrders[sortKey] || 1
      var data = this.data
      if (filterKey) {
   
        data = data.filter(function (row) {
   
          return Object.keys(row).some(function (key) {
   
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
   
        data = data.slice().sort(function (a, b) {
   
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  },
  filters: {
   
    capitalize: function (str) {
   
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  },
  methods: {
   
    sortBy: function (key) {
   
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    },
   deleteGoods:  getGoodsInfo,
   updateGoods: function(currentPage, pageSize, opr, goodsId) {
   
        getGoodsInfo(currentPage, pageSize, opr, goodsId)
    },
    changPage: getGoodsInfo
  }
})
var demo = new Vue({
   
  el: '#demo',
  data: {
   
    searchQuery: '',
    gridColumns: ['goods_id', 'goods_name','goods_price','type_id__type_name','goods_num','goods_sellnum','goods_discount','goods_status', 'goods_pic1', 'goods_pic2', 'goods_pic3'],
    gridColumnsTitle: {
   
        'goods_id': '商品Id',
        'goods_name': '商品名称',
        'goods_price': '商品价格',
        'type_id__type_name': '商品类别',
        'goods_num': '商品库存',
        'goods_sellnum': '商品已售',
        'goods_discount': '商品折扣',
        'goods_status': '商品状态',
        'goods_pic1': '商品图片',
    },
    gridData: [],
    currentPage: 1,
    pageSize: 10,
    totalPage:0,
    counts:0,
  },
  methods:{
   

  }
})

function getGoodsInfo(currentPage, pageSize, opr