当前位置：首页 > news >正文

uniapp-商城-57-后台新增商品（弹窗属性数据添加父级）

news 来源：原创 2025/5/17 8:32:13

后台增加商品，需要添加相关的数据信息，这里还要添加属性，前面已经对相关的界面布局继续了编写。这里还要对页面添加的数据，置入到云数据库，继续永久保存，便于后期的使用。这里主要是讲属性数据父级信息的添加，后面再继续子级数据添加。（父级就是颜色，子级就是红，绿等）

1、概述

本文介绍了在后台系统中添加商品属性（父级信息）并存储到云数据库的过程。首先，回顾了界面布局和属性显示的嵌套结构。接着，详细说明了如何通过云对象处理商品属性数据，包括建立数据库模式（db schema）和创建云对象以定义数据库操作。文章还描述了页面逻辑的实现，如通过云对象获取和添加数据，以及如何处理父级和子级属性的添加。最后，介绍了如何通过弹窗交互实现属性的动态添加，并将新数据即时更新到页面和数据库中，确保数据的永久保存和后续使用。

2、界面情况回顾

属性显示其实是个一嵌套的数据显示。

3、需要添加的商品属性（父级）

这里涉及一个sku，就一个库存量单位，商品的库存量。包含商品信息、规格、数量、价格等等。

从前面商家信息 52 章节看出，我们还是要使用云对象，云对象是一种通用的处理方式。

3.1 第一步，建立db schema文件（常用方式，最好这样处理）

这样后期移植代码就比较方便，直接上传 db schema 就可以创建数据库了

注：但是在云对象使用中，你不创建db schema 也可以，云对象会自己创建数据库

内容默认就好：不用修改

// 文档教程: https://uniapp.dcloud.net.cn/uniCloud/schema
{"bsonType": "object","required": [],"permission": {"read": false,"create": false,"update": false,"delete": false},"properties": {"_id": {"description": "ID，系统自动生成"}}
}

3.2 第二步，创建云对象

主要是定义 db 定义dbcmd等等

使用方法，还是预处理获取前台传来的值，this.getParams()[0]

然后定义 get add update等等，另外也要注意，我们前端页面传来的数据中，选中的标识是true。

这是为了在我们添加当前商品时是选中的

但是在后台数据应该是默认不选中，便于下一个商品添加时，看到的是干净的，可选的。不然一上来就都是选中的，也很搞笑。慢慢悟一下。

里面注意写法和格式：

const db = uniCloud.database();
const cmd = db.command
module.exports = {_before: function () { // 通用预处理器this.params = this.getParams()[0]},async get(){return await db.collection("green-mall-sku").get()},async add(){this.params.checked = false;return await db.collection("green-mall-sku").add(this.params)},async updateChild(id,obj){obj.checked=falsereturn await db.collection("green-mall-sku").doc(id).update({			children:cmd.push([obj])})}
}

3.3 页面的使用

3.3.1 页面使用需要先引入：

    const skuCloudObj = uniCloud.importObject("green-mall-sku", {
        "customUI": true
    });

这里写了一个 "customUI": true 表示不用提示加载，但一般保持为默认，不用添加这一项，保持有提示的情况更加人性化。

3.3.2 页面逻辑，前面定义了skuArr的数据，这里我们就不用固定死了，直接通过云对象添加，传到数库，以后使用就可以调用数据库的数据了。

所以就讲固定的删除，直接定义一个空 skuArr

				/*skuArr: [{_id:1,skuName:"颜色",checked:false,children:[{name:"红",checked:false},{name:"蓝",checked:false}]},{_id:2,skuName:"规格",checked:false,children:[{name:"M",checked:false},{name:"S",checked:false}]}],*/// 上面是一个数据结构例子，后台数据就应该着这样存// 实际是下面的[]skuArr: [],

3.3.3 点击选择属性，弹出选择属性的窗口

继续页面数据的获取，并使用云对象中的get 方法

			//点击选择属性clickSelect() {this.$refs.attrWrapPop.open(); //使用open方法弹出来if (this.skuArr.length) return;this.getSkuData();

			//获取sku列表async getSkuData() {let res = await skuCloudObj.get();this.skuArr = res.dataconsole.log(res);},

3.3.4 添加属性（父级）

两个函数，一个点击添加的方法，一个是点击后的弹窗处理。

如果有index 就是子级点击添加，且定义个子级child 属性；如果没有index 就是父级添加，第一个父级属性 parent 实现的是一个函数两个功能使用

针对弹窗，就是弹出一个添加值的对话窗口请输入新增内容使用的 addAttrPop 弹窗，该弹窗的动作就是 dialogConfirm 唯一的差异就是带的属性值不一样。

如果 dialogConfirm 中的没有获取到值 e，那么就不会再继续执行下面的操作。

是父级就添加到数据库中，调用add ，

然后还要将刚刚添加的值更新到本地的data 中定义的skuArr数组，用于页面立即回显。

是子级就更新对应id 的子级数据。然后将刚刚添加的数据，传入到 skuArr 对应id的数组中。用于页面立即回显。

另外这里的 id 我也回填到 skuArr中，便于这里添加父级下的子级，不然你添加子级你都不知道往哪里添加。

			//点击添加属性 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)}},