uniapp-商城-58-后台 新增商品(属性子级的添加和更新)
前面对父级属性的添加进行了分析,这里再来继续做属性子级的数据添加,包含页面逻辑以及后台处理的逻辑。当然这里还是在前面的云对象的方式进行的。
本文介绍了在云对象green-mall-sku
中添加子级属性的实现过程。首先,通过updateChild
接口处理子级数据的添加,使用uniCloud.importObject
导入云对象。在页面逻辑中,通过clickAddAttr
函数判断是添加父级属性还是子级属性,并在dialogConfirm
函数中处理确认操作。对于子级属性,通过updateChild
接口将数据推送到数据库,并更新页面显示。云对象中的updateChild
函数直接接受参数,并使用db.command
执行push
操作,确保数据正确更新。整个过程展示了前后端逻辑的协同工作,实现了嵌套数据的动态添加。
1、子级数据 界面情况回顾
属性显示其实是个一嵌套的数据显示。
2、云对象
依然是使用前面创建的 云对象 green-mall-sku
创建的是updatechild 接口。
3、导入云对象,前面已经完成
const skuCloudObj = uniCloud.importObject("green-mall-sku", {
"customUI": true
});
4、数据的点击添加
前面也已经讲过这里的代码,但是这里需要注意的是
let obj = {
name: e,
checked: true
}
let id = this.skuArr[this.attrIndex]._id;
let res = await skuCloudObj.updateChild(id, obj)
this.skuArr[this.attrIndex].children.push(obj)
这一段代码中,this.attrIndex 是父级 index ,子级的页面中定义的是cidx 。
另外还有一个云对象中的函数 也是可以接受参数的。
一般是都是预处理来接受,但是参数多了也可以通过这函数接口自己来接受。
如这里的 let res = await skuCloudObj.updateChild(id, obj)
云对象中:
async updateChild(id,obj){
obj.checked=false
return await db.collection("green-mall-sku").doc(id).update({
children:cmd.push([obj])
})
}
也是直接接受的参数。
还需要注意:
云对象 中,对于数据库中数据的修改,可以使用db.command,执行push操作。
//点击添加属性 index 存在就是嵌套下 父类属性的子类选项 ,不存在就是添加父类属性clickAddAttr(index = null) {if (index == null) {this.addAttrType = "parent"this.attrIndex = null} else {this.addAttrType = "child"this.attrIndex = index}this.$refs.addAttrPop.open();},//添加属性弹窗的确认按钮async dialogConfirm(e) {if (!e) return;if (this.addAttrType == "parent") {let obj = {skuName: e,checked: true,children: []}let res = await skuCloudObj.add(obj)obj._id = res.id;this.skuArr.push(obj)//向数组中添加一个元素,就弹窗的确认按钮} else if (this.addAttrType == "child") {let obj = {name: e,checked: true}let id = this.skuArr[this.attrIndex]._id;let res = await skuCloudObj.updateChild(id, obj)this.skuArr[this.attrIndex].children.push(obj)}},