鸿蒙Next开发-通讯录app，数据库实现编辑联系人信息（七）

移动开发 2024-11-01 16:33:28 阅读次数: 0

文章目录

1. 前言导读

在上集文章中，已经实现了联系人UI渲染，这集我们来学习通过点击联系人，跳转到编辑联系人也页面，进行修改操作

2.官方文档指南

路由（router）跳转：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-routing-V5
列表选择弹窗（ActionSheet）：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-action-sheet-V5
数据库更新（update）操作：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-data-relationalstore-V5#update

3. 页面路由的使用

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。本文将从页面跳转、页面返回、页面返回前增加一个询问框和命名路由几个方面介绍Router模块提供的功能。

页面跳转

在这里插入图片描述

Router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页面是否会替换当前页。

router.pushUrl()：目标页面不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。

router.replaceUrl()：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

场景一：不带参数跳转

 router.pushUrl({
    
    
     url: 'pages/EditContactsPage'  // 目标url
})

场景二：带参数跳转

 router.pushUrl({
    
    
     url: 'pages/EditContactsPage',  // 目标url
     params: item  //传递对象，item为联系人对象，具体看上集代码的实现过程
})

在aboutToAppear接收传递的参数

  aboutToAppear(): void {
    
    
    this.item = router.getParams() as ContactInfo
    console.error('------------', JSON.stringify(this.item));
  }

4. 代码实现过程

在Index.ets中，点击编辑，绑定跳转点击事件，具体代码请看上集Index.ets实现过程
编写EditContactsPage.ets页面

import {
    
     promptAction, router } from '@kit.ArkUI';
import {
    
     storeDb } from '../entryability/EntryAbility';
import {
    
     relationalStore } from '@kit.ArkData';
import {
    
     ContactInfo } from '../viewmodel/ContactInfo';
import {
    
     BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct EditContactsPage {
    
    
  @State ct_username: string = ''
  @State ct_mobile: string = ''
  @State item: ContactInfo | null = null

  //接收跳转传值
  aboutToAppear(): void {
    
    
    this.item = router.getParams() as ContactInfo
    console.error('------------', JSON.stringify(this.item));
  }

  build() {
    
    
    Column() {
    
    
      Row() {
    
    
        Image($r('app.media.img_back')).width(24)
        Text('编辑联系人')
          .padding({
    
     left: 16 })
          .fontSize(18)
          .fontWeight(500)
      }
      .width('100%')
      .padding({
    
     left: 16 })
      .onClick(() => {
    
    
        router.back()
      })


      Column() {
    
    
        TextInput({
    
     placeholder: '请输入联系人姓名', text: this.item?.ct_username })
          .onChange((value) => {
    
    
            this.ct_username = value
          })

        TextInput({
    
     placeholder: '请输入手机号', text: this.item?.ct_mobile })
          .type(InputType.PhoneNumber)
          .margin({
    
     top: 10 })
          .onChange((value) => {
    
    
            this.ct_mobile = value
          })

        Button('编辑联系人')
          .width('100%')
          .margin({
    
     top: 30 })
          .onClick(() => {
    
    
            if (this.ct_username == '' || this.ct_mobile == '') {
    
    
              promptAction.showToast({
    
    
                message: '联系人姓名或手机号不能为空'
              })

              return
            }

            if (storeDb !== undefined) {
    
    
              //修改条件
              let predicates = new relationalStore.RdbPredicates('Contacts_Table');
              predicates.equalTo('contacts_id', this.item?.contacts_id); // 根据contacts_id修改
              //修改的字段
              const valuesBucket: relationalStore.ValuesBucket = {
    
    
                'ct_username': this.ct_username,
                'ct_mobile': this.ct_mobile,
              }
              storeDb.update(valuesBucket, predicates, (err: BusinessError, rowId: number) => {
    
    
                if (err) {
    
    
                  console.error(`------------Failed to insert data. Code:${
    
    err.code}, message:${
    
    err.message}`);
                  return
                }
                promptAction.showToast({
    
    
                  message: '修改成功'
                })

                router.back({
    
    
                  url: 'pages/Index',
                  params: {
    
    
                    result_code: 200
                  }
                })
              })

            } else {
    
    
              console.error('------------', `Failed store is undefined`);
            }

          })

      }.alignItems(HorizontalAlign.Start)
      .width('100%')
      .padding(20)
      .margin({
    
     top: 50 })
    }
    .height('100%')
    .width('100%')
  }
}

上面代码中，使用到了数据库的update更新操作

官方文档指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-data-relationalstore-V5#update

update

update(values: ValuesBucket, predicates: RdbPredicates, callback: AsyncCallback):void

根据RdbPredicates的指定实例对象更新数据库中的数据，使用callback异步回调。由于共享内存大小限制为2Mb，因此单条数据的大小需小于2Mb，否则会查询失败

参数：

参数名	类型	必填	说明
values	ValuesBucket	是	values指示数据库中要更新的数据行。键值对与数据库表的列名相关联。
predicates	RdbPredicates	是	RdbPredicates的实例对象指定的更新条件。
callback	AsyncCallback	是	指定的callback回调方法。返回受影响的行数。