鸿蒙项目云捐助第二十九讲云捐助项目云数据库商品的批量增加功能实现

关于鸿蒙云捐助项目，前面的内容已使用云函数，云数据库分别实现云捐助项目首页中的项分类导航，底部导航，轮播图功能，这里继续实现云数据库加载捐赠商品的模块。

一、云捐助商品模块中的云数据获取

首先云捐助助的商品模块也需要云数据库的使用，这里需要参考离线项目中模拟数据的字段内容，如下所示。

courseId:1,
name:"爱满彭城慈善助医",
total_price:"260万",
used_price:"130万",
start_time:"2024-07-01",
end_time:"2024-08-30",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.cisan1")

以上是模拟显示商品时必备的数据字段。

虽然对于数据库来说，数据库关键的查询是多表查询，华为云数据库还做不到多表查询中的一对多等情况，这样在上面的商品数据中还有结合分类数据的内容，如下图所示。

由图所示，不能建立关联表，在创建数据库时只能为每个商品添加classifyId属性，才可以知道分类程序中调用的className的名称分类，由于分类的数据在云捐助首页中使用云函数加载，这里的云数据库就不显示分类的名称。 由于在捐赠成功后会显示当前项目的爱心捐赠颗数，这里使用love_numbers字段表示爱心捐赠的颗数。因此华为云数据库创建的商品表字段描述如下。

courseId:1,
name:"爱满彭城慈善助医",
total_price:"260万",
used_price:"130万",
start_time:"2024-07-01",
end_time:"2024-08-30",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.cisan1")
love_numbers：30

这里有了数据库的定义方法,就可以进入华为应用市场AppGallery Connect界面中,建立对应的云数据库,但是,在创建云数据库时需要注意,上面分析的字段中,确定一条记录需要两个关键字,华为云端数据库使用双关键字在调用时有很大的问题。因此这里创建华为云端数据库时使用单关键字,把categoryId分类id和courseId商品id需要合并在一起形成主键,这里使用cate_couse_id。这样输入的数据库字段和类型的对应关系,如下图所示。

点击“下一步”时进入索引页面,这里的索引可以选择cate_course_id,再点击“下一步”进入到权限选择的页面,这里的权限是所有的权限。如下图所示。

完成数据库捐赠商品表的建立后,这里在云数据库的“存储区”标签中新建一个存储区“three”。如下图所示。

接下来需要对云数据库中添加数据,这里实现批量增加功能。首先使用云数据库的导出功能,分别导出js格式的文件和json格式的文件。然后把js格式的文件放在项目的model文件夹中,把json格式的文件放在项目的rawfile文件夹中。具体做法如下图所示。

实现批量添加这里引入一个新的组件,为商品的批量添加设置入口地址,对于批量添加的文字显示可以通过模拟后台的商品表相关操作来完成。这里在mockjs目录下建立backend.js的模拟数据,如下图所示。

建立后台商品添加模拟数据的具体内容如下图所示。

有了模拟数据后,就可以把之前分类页的左右联动导航组件MyNewSiderBar复制成BackendSideBar.ets 组件，加载这个模拟数据进行后台界面BackendSideBar组件的左右列表显示，其代码如下图所示。

这里实现的是云捐助后端界面中商品，订单，用户增删改查的导航页面。布局上面在build方法中分为左右两个Scroll的滚动，也可以用左右两个List列表，左边的Scroll滚动元素里面使用ForEach遍历之前模拟的后端商品，订单，用户增删改查的模拟数据分类选项，右边的Scroll滚动元素里面ForEach遍历之前模拟的后端商品，订单，用户增删改查的模拟数据的各个子类选项。左侧的Scroll元素内部ForEach循环体中使用组件SideBar，其只是显示左侧的导航数据，“商品管理”,“用户管理”,“订单管理”等条目，当每个条目被点击时，在SideBar组件中将其的背景颜色进行修改。右侧的Scroll元素内部ForEach循环体中使用组件BackendSideBar，在BackendSideBar组件中是对“商品管理”,“用户管理”,“订单管理”等具体条目的显示。这里的SideBar组件中需要显示一个增删改查的图片及一个文字性的描述。布局代码如下图所示。

在这个组件中，首先通过@Prop单向传递接收myitem的子项数据，然后在build()方法中使用Row()将元素放在一行，在元素中有Image图片和Text文字，Image图片显示传入myitem子项数据中的图片内容，Text文本显示传入myitem子项数据中的文字内容，Image图片设置width宽度属性和height高度属性，Text组件设置fontSize的文字大小，fontWeight的粗体显示及textAlign的文字对齐方式等。

在点击这个SideBar其中的组件时，如果发现Text组件中的this.myitem.name的文字是“商品添加”,就会实现批量增加的逻辑。具体代码逻辑如下图所示。

代码中在onClick方法中首先判断this.myitem.name的名字中是否含有“商品添加”，当含有“商品添加”时首先使用cloud.database定义数据库，定义数据库时使用的存储区是“three”，使用的objectTypeInfo对象类型是GoodsInfo的商品信息,接下来定义了一个上传的捐赠商品空列表goods_arr,其类型是mydonation[],第一重遍历模拟数据goods,第二重遍历模拟数据goods中每一个商品的courseList,这里使用双重遍都是为了提取goods模拟数据中的不同字段,在二重循环的循环体中,实例化一个mydunation()的导出数据类型,对这个云数据库的每个数据类型进行set方法的赋值操作,赋值结束后通过push方法加入到goods_arr的mydonation云数据类型的数组中。

当所有的模拟商品加入到goods_arr的mydonation云数据类型的数组中时，通过定义的database获取collection集合，再执行collection集合的upsert方法进行数据的插入。其返回结果通过异步await获取。获取后的结果result如果其值大于0,则通过AlertDialog.show方法弹出警示框“所有全部数据插入数据库,可以登录前台查看”,如果获取结果后其值不大于0,就证明在插入数据中发生错误,则通过AlertDialog.show方法弹出警示框“数据插入失败,请查看原因”。

后台程序写好后,可以修改模拟器程序的启动页,这样运行模拟器,再运行程序,点击“商品添加”就可以执行商品的批量添加了。修改程序启动页的文件在entryAbility文件夹下的EntryAbility.ets文件中,如下图所示。

执行时,也需要注意在resources资源目录下的base文件夹下profile目录中的main_pages文件中的设置,项目pages文件夹下的BackendSideBar.ets组件也需要在这个文件中引用一下。代码如下所示。

模拟器运行后,再运行程序,在出现的页面中点击“商品添加”后,在日志中可以查到插入数据的具体条数信息。如下图所示。

这里显示已经插入了80条数据,这样就使用鸿蒙前端实现了华为云数据库中数据的批量插入。后续还会带来鸿蒙云捐助项目云功能上面的不同的精彩,欢迎关注。