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