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

1. 前言导读

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

2.官方文档指南

1. 路由（router）跳转：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-routing-V5

2. 列表选择弹窗（ActionSheet）：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-action-sheet-V5

3. 数据库更新（update）操作：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-data-relationalstore-V5#update

3. 页面路由的使用

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

1. 页面跳转

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

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

2. 场景一：不带参数跳转

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

3. 场景二：带参数跳转

 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. 代码实现过程

1. 在Index.ets中，点击编辑，绑定跳转点击事件，具体代码请看上集Index.ets实现过程
   
2. 编写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%')
  }
}

3. 上面代码中，使用到了数据库的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回调方法。返回受影响的行数。

ValuesBucket

参数：

类型	说明
number	主键的类型可以是number。
string	主键的类型可以是string。

RdbPredicates

参数：

参数名	类型	必填	说明
name	string	是	数据库表名。

5. 运行效果图