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

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

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

在云捐助项目中，轮播图的数据使用云数据库进行存储，首先登录华为应用市场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条记录,如下图所示。

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