鸿蒙项目云捐助第二十八讲云捐助项目首页组件云数据库加载轮播图

鸿蒙项目云捐助第二十八讲云捐助项目首页组件云数据库加载轮播图

在前面的章节中实现了云捐赠项目的底部导航和分类导航,本讲继续使用云技术丰富首页组件中的功能。这里使用云数据库进行首页组件轮播图的加载。

一、云数据库进行首页组件轮播图的加载

在云捐助项目中,轮播图的数据使用云数据库进行存储,首先登录华为应用市场AppGallery Connect,点击已经创建的项目myjuanproject,进入项目后点击"云数据库"。如下图所示。

点击"云数据库"后在右侧点击"新增"按钮,如下图的界面。

点击"新增"按钮后在出现输入数据库名称的界面,如下图所示。

这里输入数据库名称carousel,然后下一步,再输入轮播图的相关字段,如下图所示。

这里的id为IntAutoIncream的自增长,图片icon字段为String类型,然后下一步选择id做为索引字段,最后的界面选择所有的权限。创建轮播图carousel数据库成功后界面如下图所示。

接下来需要在云数据库中导出js和json文件,详细的操作步骤可以参看前面的"云数据库操作"部分。下载成功的文件分别放在鸿蒙云捐助项目对应的文件夹。导出的carousel.js放在model文件夹中,导出的carousel.json放在rawfile文件夹中,如下图所示。

轮播图云数据库数据的加载逻辑也是需要在登录成功的逻辑中实现,在登录login的组件页引入carousel.json和carousel.js文件。如下图所示。

然后在登录成功的逻辑中之前进行了首页导航数据的云函数加载,这里再添加轮播图云数据库加载功能的实现代码,如下图所示。

代码中使用cloud模块的database数据库方法加载轮播图数据,初始化database时指定存储区为"two"和ObjectTypeInfo的轮播图对象类型。初始化数据库后通过collection()方法的query()方法进行查询,查询后使用orderByDesc("id")方法实现根据id的降序排列,排列后通过limit(3)只取3条记录,这里轮播图只有3个,最后把数据库查询结果get出来。在router路由到首页时也需要传入carousel_boxes的轮播图数据。

为路由添加carousel_boxes的参数把数据库上查询的轮播图数据传递到首页中时,首页可以在调用IndexComponent首页组件时直接使用这个轮播图的数据。如下图所示。

这里获取的路由参数navdata的json数据中有carousel_boxes的键,引用这个键对应的值,把这个值传送到IndexComponent首页组件中的carouse_pics的轮播图变量。最后在首页组件中通过@Prop单向传递接收此参数。代码如下图所示。

接收此参数后,在首页组件的Swiper滑动元素中进行ForEach遍历每一个数据,进行轮播图的展示,代码如下图所示。

需要注意的是,轮播图在华为应用市场AppGallery Connect的数据库中存储的是"two"区。如下图所示。

另外需要注意的是还需要在云数据库中插入3条记录,如下图所示。

后续还会有鸿蒙项目云捐助中捐助模块及其他云功能的精彩,欢迎关注。

相关推荐
-SGlow-2 小时前
MySQL相关概念和易错知识点(2)(表结构的操作、数据类型、约束)
linux·运维·服务器·数据库·mysql
明月5663 小时前
Oracle 误删数据恢复
数据库·oracle
zhanshuo4 小时前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo4 小时前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
♡喜欢做梦5 小时前
【MySQL】深入浅出事务:保证数据一致性的核心武器
数据库·mysql
遇见你的雩风5 小时前
MySQL的认识与基本操作
数据库·mysql
dblens 数据库管理和开发工具5 小时前
MySQL新增字段DDL:锁表全解析、避坑指南与实战案例
数据库·mysql·dblens·dblens mysql·数据库连接管理
weixin_419658315 小时前
MySQL的基础操作
数据库·mysql
不辉放弃6 小时前
ZooKeeper 是什么?
数据库·大数据开发
Goona_6 小时前
拒绝SQL恐惧:用Python+pyqt打造任意Excel数据库查询系统
数据库·python·sql·excel·pyqt