HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享04--首页活动配置（端云一体）

HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享04–首页活动配置（端云一体）

开发准备

上一篇文章中我们实现了项目端云一体化首页部分模块动态配置，实现了对模块模块的后端控制显示和隐藏，这能让我们的app更加的灵活，也能应对更多的情况。现在我们来对配置模块进行完善，除了已有的模块以外，我们还有一些banner ，活动入口等模块，这些模块的数据并不多，所以我们也归纳到配置中去实现。并且我们在配置表中添加了一些不同的id，我们只需要根据相对应的id 去查询对应的表就可以了。

代码实现

实现横幅海报，商品活动入口

创建海报横幅表

{
 "objectTypeName": "home_poster",
 "fields": [
 {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
 {"fieldName": "poster_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
 {"fieldName": "url", "fieldType": "String"},
 {"fieldName": "router", "fieldType": "String"}
 ],
 "indexes": [
 {"indexName": "posterIdIndex", "indexList": [{"fieldName":"poster_id","sortType":"ASC"}]}
 ],
 "permissions": [
 {"role": "World", "rights": ["Read"]},
 {"role": "Authenticated", "rights": ["Read", "Upsert"]},
 {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
 {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
 ]
}

创建商品活动入口表

{
 "objectTypeName": "home_good_center",
 "fields": [
 {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
 {"fieldName": "good_left_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
 {"fieldName": "title", "fieldType": "String"},
 {"fieldName": "url", "fieldType": "String"}
 ],
 "indexes": [
 {"indexName": "goodLeftIdIndex", "indexList": [{"fieldName":"good_left_id","sortType":"ASC"}]}
 ],
 "permissions": [
 {"role": "World", "rights": ["Read"]},
 {"role": "Authenticated", "rights": ["Read", "Upsert"]},
 {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
 {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
 ]
}

分别填充数据

海报

{
 "cloudDBZoneName": "default",
 "objectTypeName": "home_poster",
 "objects": [
 {
 "id": 10,
 "poster_id": 1,
 "url": "https://pic.ntimg.cn/file/20220228/32366449_202706980104_2.jpg",
 "router": "string1"
 }
 ]
}

商品活动入口

{
 "cloudDBZoneName": "default",
 "objectTypeName": "home_good_center",
 "objects": [
 {
 "id": 10,
 "good_left_id": 1,
 "title": "生鲜严选",
 "url": "https://img1.baidu.com/it/u=3974310347,2155470169&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=751"
 },
 {
 "id": 20,
 "good_left_id": 1,
 "title": "西购新品",
 "url": "https://t12.baidu.com/it/u=2598092657,259693829&fm=30&app=106&f=JPEG?w=640&h=427&s=E68163AB404A6CEE50914C5E03005032"
 },
 {
 "id": 30,
 "good_left_id": 1,
 "title": "今日推荐",
 "url": "https://qcloud.dpfile.com/pc/HK6cf3mWoI3MaYQ5GH138_P88QAwHirDK3zouKs_bLbdx-QC0dVvyjGAWRwmnrwX.jpg"
 }
 ]
}

都填充完成后，我们把数据提交到云端，然后进行配置类的同步

接下来我们进行数据查询，因为我们在配置表中添加了id ，所以我们要查询出对应id的活动入口。

@State homeActivity:HomeActivitySetting[]=[]
@State homeGoodCenter:HomeGoodCenter[]= []

let listData3 = await databaseZone.query(condition3);
let json3 = JSON.stringify(listData3)
let data3:HomeActivitySetting[]= JSON.parse(json3)
this.homeActivity=data3
hilog.error(0x0000, 'testTag',`Failed to query data, code: ${this.homeActivity}`);

let list5 = await databaseZone.query(home_good);
home_good.equalTo("good_left_id",data3[0].good_left_id);
let json5 = JSON.stringify(list5)
let data5:HomeGoodCenter[]= JSON.parse(json5)
this.homeGoodCenter=data5
hilog.error(0x0000, 'testTag',`Failed to query data, code: ${this.homeGoodCenter}`);

然后我们修改一下商品活动入口的内容

import { HomeGoodCenter } from ".../entity/HomeGoodCenter"

@Component
@Preview
export struct SpecialColumn {
 @Link goodInfo: HomeGoodCenter[]
 
 build() {
 Column(){
 List({space:10}){
 ForEach(this.goodInfo,(data:HomeGoodCenter)=>{
 ListItem(){
 Column(){
 Text(data.title)
 .fontSize(16)
 .fontWeight(FontWeight.Bold)
 .fontColor(Color.Black)
 Blank()
 Image(data.url)
 .width('28%')
 .height(90)
 .margin({ bottom: 8 })
 .objectFit(ImageFit.Cover)
 }
 .borderRadius(5)
 .backgroundColor("#ffeedeb8")
 .padding(5)
 })
 })
 }
 .listDirection(Axis.Horizontal)
 }
 .margin({top:10})
 }
}

在首页进行调用

SpecialColumn({goodInfo:this.homeGoodCenter})

接下来我们运行一下