HarmonyOS Next 端云一体化(3)

HarmonyOS Next 端云一体化(3)

上一章我们主要讲解了如何新建数据库、新建数据表已经部署数据库。这一章主要学习如何对数据库、数据表进行 CRUD 的操作。

操作数据库的方式

我们操作数据库的方式一共有 4 种。

  1. 可视化 - AGC 平台上直接编辑数据
  2. 可视化 - DevEco Studio 中直接编辑数据
  3. 编程 - 客户端通过代码的方式操作数据
  4. 编程 - 云函数通过代码的方式操作数据

方式 1、2 都是为了让开发人员简单、方便管理数据。但是实际的业务场景中,我们更多要关注的是 3、4 的方式。那么本章主要讲的是 方式 3-客户端通过代码的方式操作数据 。后续再讲到云函数的时候再来补充方式 4。

生成客户端-数据模型

先解释下这个功能是做什么的。因为我们的目标是要在 客户端来查询数据库的数据,那必不可少需要在客户端中定义数据表实体的类型。然后 DevEco Studio 提供了比较便捷的根据数据实体生成客户端-数据模型。

我这里红色的提示是因为我之前已经生成过了,所以提示是否覆盖。

成功后边得到如下内容:entry/src/main/ets/common/types/Book.ts

typescript 复制代码
/*
 * Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
 * Generated by the CloudDB ObjectType compiler. DO NOT EDIT!
 */
import { cloudDatabase } from "@kit.CloudFoundationKit";

class Book extends cloudDatabase.DatabaseObject {
  id: number;
  name: string;
  price: number;
  publish: Date;
  hot: boolean;
  cover: string;

  naturalbase_ClassName(): string {
    return "Book";
  }
}

export { Book };

简单使用

接下来我们就可以进入客户端查询数据库的步骤了。

  1. 首先我们需要创建一个数据库示例,每一个存储区就是一个数据库 cloudDatabase.DatabaseZone
  2. 然后指定查询条件,比如全部查询、查询 id 等于 1 等等 condition
  3. 进行查询,接收返回的数据
jsx 复制代码
import { cloudDatabase } from '@kit.CloudFoundationKit';
import { Book } from '../common/types/Book';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct PageDB {
  // 数据库实例,初始化时为 undefined
  agcDataBase: cloudDatabase.DatabaseZone | undefined = undefined;
  // 查询条件实例,初始化时为 undefined
  condition: cloudDatabase.DatabaseQuery<cloudDatabase.DatabaseObject> | undefined = undefined;
  // 初始化数据库连接的方法
  fn1 = () => {
    this.agcDataBase = cloudDatabase.zone('Study');
    promptAction.showToast({ message: `初始化成功` });
  }
  // 查询数据库的方法
  fn2 = async () => {
    try {
      // 创建查询条件实例
      this.condition = new cloudDatabase.DatabaseQuery(Book);
      // 设置查询结果的最大数量为 10
      this.condition.limit(10);
      // 执行查询并获取结果
      const resultArray = await this.agcDataBase?.query(this.condition);
      // 显示查询结果
      AlertDialog.show({ message: JSON.stringify(resultArray, null, 2) });
    } catch (e) {
      promptAction.showToast({ message: `${e.message} ${e.code}` });
      console.error(e.message, e.code);
    }
  }

  build() {
    Column({ space: 10 }) {
      Button("初始化1")
        .onClick(this.fn1)

      Button("查询2")
        .onClick(this.fn2)
    }
    .height('100%')
    .width('100%')
  }
}

对数据表的操作

端云一体提供了基本的对数据表的操作。主要分成以下几种

操作类型 说明
query 查询
upsert 新增或者编辑
delete 删除
calculateQuery 计算

query

就是查询,上面的示例中已经使用过了。

upsert - 新增

现在主要演示 使用 upsert 实现新增

upsert 方法可以接收一个或者多个数据实体。如果该数据之前不存在,这时的 upsert 表示新增,反之表示更新。

操作成功后,会返回成功影响了的数据的数量。

比如新增:

jsx 复制代码
fn3 = async () => {
  try {
    const book = new Book();
    book.id = parseInt(Date.now().toString().slice(0, 6)); // 正常应该是自增的,但是这个自增会出bug
    book.name = "book";
    book.price = 99;
    book.publish = new Date();
    book.hot = true;
    book.cover = "xxxx";
    const res = await this.agcDataBase?.upsert(book);
    AlertDialog.show({ message: `新增成了${res}条` });
  } catch (e) {
    promptAction.showToast({ message: `${e.message} ${e.code}` });
    console.error(e.message, e.code);
  }
};

Button("新增3").onClick(this.fn3);

需要注意的是:我们当前的角色是 World,此时是没有 新增、编辑、删除权限的。所以为了方便操作,可以修改调整权限

clouddb/objecttype/Book.json

json 复制代码
    {
      "role": "World",
      "rights": [
        "Read",
        "Upsert",
        "Delete"
      ]
    },

当数据表信息发生了修改时,需要在 AGC 平台上删除之前的数据区+数据表。然后重新部署。

upsert - 编辑

这里我们可以根据 id 来编辑一下数据。 数据库里面存放着id:10 的数据,我们就来修改它。

jsx 复制代码
fn4 = async () => {
  try {
    const book = new Book();
    //  固定修改id为10的数据
    book.id = 10;
    book.name = "更新book";
    book.price = 999;
    book.publish = new Date();
    book.hot = true;
    book.cover = "更新 xxxx";

    const res = await this.agcDataBase?.upsert(book); // 因为数据 id已经存在,所以此时是编辑
    AlertDialog.show({ message: `编辑成功${res}条` });
  } catch (e) {
    promptAction.showToast({ message: `${e.message} ${e.code}` });
    console.error(e.message, e.code);
  }
};

Button("更新4").onClick(this.fn4);

delete - 删除

执行删除 delete 方法时,也是需要传入一个或者多个删除的元素。

我们这里就可以根据 id:10 的元素执行删除。

jsx 复制代码
fn5 = async () => {
  try {
    const book = new Book();
    //  固定修改id为10的数据
    book.id = 10;
    const res = await this.agcDataBase?.delete(book); // 因为数据 id已经存在,所以此时是编辑
    AlertDialog.show({ message: `删除成功${res}条` });
  } catch (e) {
    promptAction.showToast({ message: `${e.message} ${e.code}` });
    console.error(e.message, e.code);
  }
};

Button("删除5").onClick(this.fn5);

calculateQuery - 计算

calculateQuery 从数据库中查询符合条件的数据,并对指定字段进行算术计算。主要提供了以下的计算功能。

名称 说明
AVERAGE 0 计算平均数。
SUM 1 计算总和。
MAXIMUM 2 计算最大值。
MINIMUM 3 计算最小值。
COUNT 4 计算记录总数。
jsx 复制代码
fn6 = async () => {
  try {
    // 创建查询条件实例
    this.condition = new cloudDatabase.DatabaseQuery(Book);
    // 设置查询结果的最大数量为 10
    this.condition.limit(10);
    // 执行查询并获取结果
    const resultArray = await this.agcDataBase?.calculateQuery(
      this.condition,
      "price",
      cloudDatabase.QueryCalculate.SUM
    );
    // 显示查询结果
    AlertDialog.show({ message: JSON.stringify(resultArray, null, 2) });
  } catch (e) {
    promptAction.showToast({ message: `${e.message} ${e.code}` });
    console.error(e.message, e.code);
  }
};

Button("计算6 总价格").onClick(this.fn6);

总结

本章主要介绍了在 HarmonyOS Next 中如何通过客户端代码操作云数据库,主要包含以下几个要点:

  1. 操作数据库的四种方式,重点介绍了客户端代码操作方式
  2. 使用 DevEco Studio 自动生成客户端数据模型,简化开发流程
  3. 详细讲解了数据库的基本操作:
    • 初始化数据库连接(DatabaseZone)
    • 查询数据(query)
    • 新增/更新数据(upsert)
    • 删除数据(delete)
    • 数据计算(calculateQuery)
  4. 介绍了各种操作的参数说明和返回值,并提供了完整的示例代码

以上是对客户端操作数据库的基本功能演示。下一章会重点来讲解查询语法。condition


如果你兴趣想要了解更多的鸿蒙应用开发细节和最新资讯,欢迎在评论区留言或者私信或者看我个人信息,可以加入技术交流群。

相关推荐
m0_672449602 小时前
基础vue3前端登陆注册界面以及主页面设计
前端·vue.js·elementui
匹马夕阳2 小时前
Vue3中使用组合式API通过路由传值详解
前端·javascript·vue.js
zpjing~.~2 小时前
VUE中css样式scope和deep
前端·css·vue.js
fxshy2 小时前
Vue3父子组件双向绑定值用例
前端·javascript·vue.js
风茫2 小时前
如何在vue中渲染markdown内容?
前端·javascript·vue.js
蓝黑20203 小时前
从Vant图标的CSS文件提取图标文件
前端·css·python·vant
勤劳的进取家3 小时前
XML、HTML 和 JSON 的区别与联系
前端·python·算法
IT培训中心-竺老师4 小时前
Apache Web服务器技术指南 - 基于Kylin麒麟操作系统
服务器·前端·apache
枫叶落雨2225 小时前
03JavaWeb——Ajax-Vue-Element(项目实战)
前端·vue.js·ajax
程思扬5 小时前
Android笔记: 实现点击事件透传到底部
android·前端·windows·经验分享·笔记·科技·ui