鸿蒙项目云捐助第二十八讲云捐助项目首页组件云数据库加载轮播图
鸿蒙项目云捐助第二十八讲云捐助项目首页组件云数据库加载轮播图
在前面的章节中实现了云捐赠项目的底部导航和分类导航,本讲继续使用云技术丰富首页组件中的功能。这里使用云数据库进行首页组件轮播图的加载。
一、云数据库进行首页组件轮播图的加载
在云捐助项目中,轮播图的数据使用云数据库进行存储,首先登录华为应用市场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条记录,如下图所示。
后续还会有鸿蒙项目云捐助中捐助模块及其他云功能的精彩,欢迎关注。
相关文章:
鸿蒙项目云捐助第二十八讲云捐助项目首页组件云数据库加载轮播图
鸿蒙项目云捐助第二十八讲云捐助项目首页组件云数据库加载轮播图 在前面的章节中实现了云捐赠项目的底部导航和分类导航,本讲继续使用云技术丰富首页组件中的功能。这里使用云数据库进行首页组件轮播图的加载。 一、云数据库进行首页组件轮播图的加载 在云捐助项…...
vue项目搭建规范
项目搭建规范 一. 代码规范1.1. 集成editorconfig配置1.2. 使用prettier工具1.3. 使用ESLint检测1.4. git Husky和eslint1.5. git commit规范1.5.1. 代码提交风格1.5.2. 代码提交验证 二. 第三方库集成2.1. vue.config.js配置2.2. vue-router集成2.3. vuex集成2.4. element-plu…...
Spring Boot的开发工具(DevTools)模块中的热更新特性导致的问题
问题: java.lang.ClassCastException: class cn.best.scholarflow.framework.system.domain.entity.SysUser cannot be cast to class cn.best.scholarflow.framework.system.domain.entity.SysUser (cn.best.scholarflow.framework.system.domain.…...
Unity Shader TexelSize的意义
TexelSize在制作玻璃折射效果时会用到。 // Get the normal in tangent space fixed3 bump UnpackNormal(tex2D(_BumpMap, i.uv.zw)); // Compute the offset in tangent space float2 offset bump.xy * _Distortion * _RefractionTex_TexelSize.xy; i.scrPos.xy offset * i…...
一个C#开发的APP
开发方式 C#Web、AndroidWebView 系统设计 系统主要分两个部分。一个是内容(文章)发布系统,另一个是预约和支付系统。 内容发布系统 和普通的文章发布系统不一样的地方在于,我们把每篇文章和大师关联起来。在文章的下方会显示…...
C++ 设计模式:原型模式(Prototype Pattern)
链接:C 设计模式 链接:C 设计模式 - 工厂方法 链接:C 设计模式 - 抽象工厂 链接:C 设计模式 - 建造者模式 原型模式(Prototype Pattern)是一种创建型设计模式,它允许一个对象通过复制现有对象来…...
window如何将powershell以管理员身份添加到右键菜单?(按住Shift键显示)
window如何将powershell以管理员身份添加到右键菜单? 在 Windows 中,将 PowerShell 以管理员身份添加到右键菜单,可以让你在需要提升权限的情况下快速打开 PowerShell 窗口。以下是详细的步骤,包括手动编辑注册表和使用注册表脚本…...
python爬虫——爬取全年天气数据并做可视化分析
一、主题页面的结构与特征分析 1.主题页面的结构与特征分析 目标内容界面: 2. Htmls 页面解析 3.节点查找方法与遍历方法 查找方法:find(): 查找第一个匹配到的节点。find_all(): 查找所有匹配到的节点,并返回一个…...
【Unity3D】ECS入门学习(十二)IJob、IJobFor、IJobParallelFor
IJob:开启单个线程进行计算,线程内不允许对同一个数据进行操作,也就是如果你想用多个IJob分别计算,将其结果存储到同一个NativeArray<int>数组是不允许的,所以不要这样做,如下例子就是反面教材&#…...
存储进阶笔记(二):Linux 存储栈:从 Device Mapper、LVM 到文件系统(2024)
记录一些平时接触到的存储知识。由于是笔记而非教程,因此内容不求连贯,有基础的同学可作查漏补缺之用。 存储进阶笔记(一):硬件基础:HDD/SDD、JBOD、RAID 等(2024) 存储进阶笔记&am…...
MySQL——操作
一.库的操作 1.基本操作 创建数据库 create database 数据库名称; 查看数据库 show databases; 删除数据库 drop database 数据库名称; 执行删除之后的结果: 数据库内部看不到对应的数据库对应的数据库文件夹被删除,级联删除,里面的数据表全部被删 所…...
c++表达范围勿用数学符号
目的 遇上了一个C基础问题,一下子陷到里面,不知怎么回事了,知道后,又感觉太可笑。 这也许就是成长的代价。 下面就是细说说所遇上的问题。 关于C逻辑的一些知识点: 定义: 用逻辑运算符将两个表达式链接起来的式子称为…...
SAP PP bom历史导出 ALV 及XLSX 带ECN号
bom总数 104W PS超过XLSX上限 ,那就分文件 *&---------------------------------------------------------------------* *& Report ZRPT_PP_BOM_HIS_ECN *&---------------------------------------------------------------------* *& tcode:zpp0…...
【AIGC-ChatGPT职业提示词指令】智能职业规划助手:基于SVG可视化的职业发展指南系统
引言 在当今快速变化的职场环境中,职业发展规划变得越来越复杂和充满挑战。无论是想要转行的技术人员,还是希望突破瓶颈的职场人士,都需要一个清晰的指导方向和可执行的行动计划。基于这种需求,我们设计了一个智能职业规划助手系统,它能够通过数据可视化的方式,为用户提…...
node.js之---单线程异步非阻塞 I/O
单线程模型 1、Node.js 使用 单线程 来处理客户端请求和执行任务 2、如果遇到异步任务,node.js使用事件循环和异步 I/O 模型,使得它能够高效地处理大量并发请求 异步操作有哪些 1、读取文件 2、网络请求 3、数据库操作等等 异步非阻塞 I/O Node.…...
DotnetSpider实现网络爬虫
1. 使用DotnetSpider框架 DotnetSpider是一个开源的、轻量、灵活、高性能、跨平台的分布式网络爬虫框架,适用于.NET平台。它可以帮助开发者快速实现网页数据的抓取功能。 1.1 安装DotnetSpider NuGet包 首先,你需要在你的.NET项目中安装DotnetSpider NuGet包。你可以通过…...
01 Oracle 基本操作
Oracle 基本操作 初使用步骤 1.创建表空间 2.创建用户、设置密码、指定表空间 3.给用户授权 4.切换用户登录 5.创建表 注意点:oracle中管理表的基本单位是用户 文章目录 了解Oracle体系结构 1.创建表空间**2.删除表空间**3.创建用户4.给用户授权5.切换用户登录6.表操…...
纯血鸿蒙ArkUI线性布局详解
线性布局说明 线性布局(LinearLayout)是开发中最常用的布局,通过线性容器Row和Column构建。线性布局是其他布局的基础,其子元素在线性方向上(水平方向和垂直方向)依次排列。线性布局的排列方向由所选容器组…...
MySQL root用户密码忘记怎么办(Reset root account password)
在使用MySQL数据库的的过程中,不可避免的会出现忘记密码的现象。普通用户的密码如果忘记,可以用更高权限的用户(例如root)进行重置。但是如果root用户的密码忘记了,由于root用户本身就是最高权限,那这个方法…...
18.springcloud_openfeign之扩展组件二
文章目录 一、前言二、子容器默认组件FeignClientsConfigurationDecoder的注入Contract约定对注解的支持对类上注解的支持对方法上注解的支持对参数上注解的支持@MatrixVariable@PathVariable@RequestParam@RequestHeader@SpringQueryMap@RequestPart@CookieValueFormattingCon…...
18、【OS】【Nuttx】用gdb调试nuttx os
背景 接之前wiki 14、【OS】【Nuttx】Nsh中运行第一个程序 15、【OS】【Nuttx】OS裁剪,运行指定程序,周期打印当前任务 程序跑起来了,OS也裁剪了,下一步就是调试了 目标 用gdb把nuttx程序跑起来 准备环境 vscode商店里C和C相…...
网络爬虫科普:原理、类型、策略与常用工具
网络爬虫科普:原理、类型、策略与常用工具 网络爬虫在当今互联网时代扮演着极为重要的角色,它能帮助我们从海量的网络信息中提取出有价值的数据。以下将从网络爬虫的基本概念、工作流程、类型、搜索策略以及常用工具等方面进行详细科普介绍。 一、网络…...
SQL 实战:动态表创建与多表更新的高级 SQL
在实际的数据库管理和开发中,经常需要临时存储中间计算结果或对多表数据进行批量更新。SQL 提供了动态表创建和多表更新的能力,使复杂业务逻辑能够通过一条 SQL 语句高效完成。本文将介绍如何动态创建临时表和实现多表联动更新,并通过具体示例…...
RabbitMQ基础篇之快速入门
文章目录 一、目标需求二、RabbitMQ 控制台操作步骤1.创建队列2.交换机概述3.向交换机发送消息4.结果分析5.消息丢失原因 三、绑定交换机与队列四、测试消息发送五、消息查看六、结论 一、目标需求 新建队列:创建 hello.queue1 和 hello.queue2 两个队列。消息发送…...
NLP论文速读(NeurIPS 2024)|BERT作为生成式上下文学习者BERTs are Generative In-Context Learners
论文速读|BERTs are Generative In-Context Learners 论文信息: 简介: 本文探讨了在自然语言处理(NLP)领域中,上下文学习(in-context learning)的能力,这通常与因果语言模型&#x…...
LeetCode - Google 校招100题 第7天 序列(数据结构贪心) (15题)
欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/144744418 相关文章: LeetCode 合计最常见的 112 题: 校招100题 第1天 链表(List) (19题)校招100题 第2天 树(Tree) (21…...
基于Docker基础与操作实战
6.1 Docker容器简介 Docker是一个开源的应用容器引擎,它基于Go语言并遵从Apache2.0 协议开源。 Docker是一个用于开发,交付和运行应用程序的开放平台。Docker能将应用程序与基础架构分开,从而可以快速交付软件。借助Docker,您可…...
高转化的Facebook广告文案的秘诀
Facebook 广告文案是制作有效 Facebook 广告的关键方面。它侧重于伴随广告视觉元素的文本内容。今天我们的博客将深入探讨成功的 Facebook 广告文案的秘密! 一、广告文案怎么写? 正文:这是帖子的正文,出现在您姓名的正下方。它可…...
支持向量机入门指南:从原理到实践
目录 1 支持向量机的基本概念 1.2 数学表达 2 间隔与支持向量 2.1 几何间隔 2.2 支持向量的概念 2.3 规范化超平面 2.4 支持向量的深入分析 2.4.1 支持向量的特征 2.4.2 支持向量的作用 2.4.3 支持向量的代数表示 2.5 KKT条件 3 最优化问题 3.1 问题的形成 3.2 规…...
汽车打气泵方案|智能充气泵工作原理
汽车打气泵方案最开始是机械式的开发,后来慢慢地演变成由一个气缸、压力传感器和ADC芯片以及主控芯片,就能够使得打气筒具备智能充气功能,摇身一变变成汽车打气泵方案。它具备精准压力检测以及过充过放等功能,利用ADC芯片和压力传…...
Jenkins入门使用
Jenkins入门使用 1先安装jdk才能运行jenkins yum install -y java-1.8.0-openjdk.x86_64 2 安装jenkins,运行,进行端口绑定,启动jenkins docker search jenkins docker pull jenkins/jenkins docker run -d -u root -p 8080:8080 -p 50000:50…...
iOS Masonry对包体积的影响
01 Masonry介绍 Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁。Masonry简化了NSLayoutConstraint的使用方式,让我们可以以链式的方式为我们的控件指定约束。 常用接口声明与实现: 使用方式…...
Hive分区再分桶表
在Hive中,数据通常是根据分区(partition)来组织的,但是对于大数据集,单层分区可能不够用,因此可以进一步细分为桶(bucket)。桶可以用于提供额外的并行处理和优化查询性能。在这种情况…...
三大行业案例:AI大模型+Agent实践全景
本文将从AI Agent和大模型的发展背景切入,结合51Talk、哈啰出行以及B站三个各具特色的行业案例,带你一窥事件驱动架构、RAG技术、人机协作流程,以及一整套行之有效的实操方法。具体包含内容有:51Talk如何让智能客服“主动进攻”&a…...
国产低代码框架zdppy开发笔记002 标准的接口响应
前言 通过前面的学习, 我们已经知道了zdppy_api和zdppy_req的基本用法, 接下来我们会在学习中多次用到这两个框架. 我们已经知道了该如何响应一个字符串,但是我们该如何响应json数据呢? 在zdppy_api中,我们定义了一组规范的API响应, 我们慢慢来看看. 规范的响应 首先来看…...
关于Nginx
1.Nginx的配置 proxy_pass http: 当你需要将请求分发到多个后端服务器时,需要实现负载均衡功能,可以使用upstream指令定义一组服务器,并在proxy_pass中引用这个服务组名称。。如果不需要负载均衡,只需要将请求转发到单一的后端…...
数据库实时会话管理,性能问题诊断后的临门一脚
目录 前言 实时会话管理 DBdoctor 实时会话功能 1.实时会话列表 2.结束会话 3.操作历史 4.SQL分析 结语 前言 在之前的文章中我们介绍了DBdoctor性能洞察功能,它能够快速量化数据库连接会话单条SQL的资源消耗,实现性能问题快速根因定位并给出优…...
以EM算法为例介绍坐标上升(Coordinate Ascent)算法:中英双语
中文版 什么是 Coordinate Ascent 算法? Coordinate Ascent(坐标上升)是一种优化算法,它通过在每次迭代时优化一个变量(或一个坐标),并保持其他变量不变,逐步逼近最优解。与坐标下…...
visual studio连接sql server数据库
目录 1、为什么要建立连接2、在sql server中建立数据库3、visual studio连接sql server数据库4、学生信息管理系统页面布局5、添加事件逻辑 5.1 页面跳转5.2 读取学生信息5.3 查询学生信息5.4 修改学生信息5.5 删除学生信息5.6 添加学生信息 bilibili演示视频 github源码 1、…...
磁盘的相关操作
1.让U盘连接到虚拟机中 两种方法:1>在弹出的窗口中设置 2>通过选项设置 菜单栏---->虚拟机----->可移动设备---->找到U盘名---->连接到虚拟机中 2.查看U盘是否已被成功识别 方法:ls /dev/sd* 显示包含除了sda外的文件说明U盘连接成功…...
数据结构与算法Python版 图的应用与广度优先搜索
文章目录 一、图的应用-词梯问题二、图的广度优先搜索 一、图的应用-词梯问题 词梯问题 Word Ladder 从一个单词演变到另一个单词,其中的过程可以经过多个中间单词。要求是相邻两个单词之间差异只能是1个字母如FOOL变SAGE:FOOL >> POOL >>…...
Unity——InputField组件自动换行和enter键换行
文章目录 输入框实现换行功能 输入框实现换行功能 在Unity中,如果你想要在输入框(如InputField)中实现换行功能 ,你需要确保以下几点: 1、文本组件支持多行: 确保你的InputField的文本组件(Te…...
solr9.7 单机安装教程
1.环境要求:jdk11以上 2.下载wget https://dlcdn.apache.org/solr/solr/9.7.0/solr-9.7.0.tgz 3.解压 4.修改solr.in.sh配置 5.启动命令 bin/solr start 6.创建core bin/solr create -c <core名称> 注意:用solr ui界面创建,会提示找不到solrconfig.xml和m…...
虚幻引擎UE5渲染不够快的解决办法
虚幻引擎是由Epic Games公司开发的一款功能强大、全球最开放且先进的实时 3D 创作工具,广泛应用于游戏、影视、建筑可视化、虚拟现实等多个领域!虚幻引擎UE5如何实现在网上极速渲染呢?本文提供云渲染和云电脑两套方案用于渲染提速ÿ…...
基于STM32的智能家居环境监控系统设计
目录 引言系统设计 硬件设计软件设计系统功能模块 环境监控模块控制模块显示模块系统实现 硬件实现软件实现系统调试与优化结论与展望 1. 引言 随着智能家居技术的发展,环境监控系统已经成为家居管理的重要组成部分。智能家居环境监控系统通过实时监测室内温度、湿…...
Android service framework笔记
1. 网络摘录如何添加一个Application Framework Service(一)(without native code) 如何添加一个Application Framework Service(二)(with native code) 2.书籍摘录...
【图像处理lec10】图像压缩
目录 一、图像压缩基础 1、图像压缩的基本概念 2、数据冗余与压缩比 3、三种主要的数据冗余类型 4、保真度评估标准(Fidelity Criteria) 5、应用与实践 二、图像压缩模型 1、图像压缩模型概述 (1)压缩系统的结构 &#…...
flask后端开发(2):URL与视图
目录 URL定义request获取请求参数 gitcode地址: https://gitcode.com/qq_43920838/flask_project.git URL定义 from flask import FlaskappFlask(__name__)app.route(/) def hello_world():return Hello World!app.route(/profile) def profile():return 我是个人…...
Linux Ubuntu24配置安装Java
目录 一. 通过apt安装java1.1 列出所有可用java版本1.2 安装指定java版本1.3 安装后确认1.4 /etc/alternatives/目录 二. 手动安装java 一. 通过apt安装java 1.1 列出所有可用java版本 apt list openjdk-*jdk apluserubuntu24-01:~$ apt list openjdk-*jdk Listing... Done …...
线段树例题题解
卫星覆盖(NOI1997) 题面: SERCOI(Space-Earth Resource Cover-Observe lnstitute) 是一个致力于利用卫星技术对空间和地球资源进行覆盖观测的组织。现在他们研制成功一种新型资源观测卫星 -SERCOI-308。这种卫星可以…...