HarmonyOS鸿蒙Next《伴时匣》app开发技术分享--用户注册（2）

HarmonyOS鸿蒙Next《伴时匣》app开发技术分享–用户注册（2）

技术栈

Appgallery connect

开发准备

上一节我们已经实现了静态的用户登陆页，这时候我们已经有了用户登录的窗口了，现在我们只需要搞定用户数据的插入，就可以使用登陆功能了，这一节我们就要实现用户注册功能，实现用户的数据插入。这样我们在后续的业务里就可以实现绑定用户数据的插入了

功能分析

要实现用户数据的插入，首先我们要把用户填充的数据提交到表单中，同时我们要添加默认id 和用户id ，绑定id 我们在后续绑定的时候使用，我们拿到输入的用户名和密码，完成信息的提交，要注意的是我们在用户注册提交表单之前，要先校验用户提交的信息是否二次创建。我们需要保证用户的唯一性

功能开发

import promptAction from '@ohos.promptAction';

import { cloudDatabase } from '@kit.CloudFoundationKit';

import { User } from '../entity/User';

import { user } from '../CloudDb/user';

import showToast from '../utils/ToastUtils';

import { CommonTopBar } from '../widget/CommonTopBar';

let databaseZone = cloudDatabase.zone('default');

@Entry
@Component
struct RegisterPage {
  @State acc:string = ''
  @State psw:string = ''
  controller: TextInputController = new TextInputController()
  async register(): Promise<void>{
    if (this.acc===''&&this.psw==='') {
      promptAction.showToast({message:"账号或密码不能为空"})
      return
    }else {
      let condition = new cloudDatabase.DatabaseQuery(user);
      condition.equalTo("user_name",this.acc)
      let listData = await databaseZone.query(condition);
      let json = JSON.stringify(listData)
      let data1:User[]= JSON.parse(json)
      if (data1.length>0) {
        showToast("用户已存在")
      }else {
      }
    }
  }

  build() {
    Column({space:20}) {
      CommonTopBar({ title: "用户注册", alpha: 0, titleAlignment: TextAlign.Center ,backButton:false})
      Column() {
        Image($r("app.media.logo"))
          .width(120).height(120).borderRadius(60)
        TextInput({text:this.acc,
          placeholder: '请输入账号'
        })
          .backgroundColor("#f6f6f6")
          .placeholderColor("#ff999595")
          .fontColor("#333333")
          .maxLength(11)
          .type(InputType.Number)
          .onChange((value: String) => {
            this.acc = value.toString()
          }).margin(20)
        TextInput({text:this.psw,
          placeholder: '请输入密码'
        })
          .backgroundColor("#f6f6f6")
          .placeholderColor("#ff999595")
          .fontColor("#333333")
          .type(InputType.Password)
          .onChange((value: String) => {
            this.psw = value.toString()
          }).margin(20)

        Button('确认',{type:ButtonType.Capsule,stateEffect:false})
          .onClick(()=>{this.register()})
          .fontColor(Color.White)
          .width('80%')
          .height(40)
          .margin(40)
          .backgroundColor("#ff65c8ee")

        Blank()
          .margin(30)
      }
      .width('100%')}
    .height('100%')
    .backgroundColor('#FFFFFF')
    .justifyContent(FlexAlign.Start)
  }
}

然后我们开始实现用户创建的逻辑

let adduser=new user()
  adduser.id=Math.floor(Math.random() * 1000000)
  adduser.user_id=Math.floor(Math.random() * 1000000)
  adduser.bind_user_id=0
  adduser.bind_type=0
  adduser.user_name=this.acc
  adduser.psw=this.psw
  adduser.nike_name='默认用户名称'
  adduser.url=''
  adduser.sex=''
  adduser.birthday=''
  adduser.phone=''
  let num = await databaseZone.upsert(adduser);
  if (num>0) {
    showToast("用户注册成功")
  }

到这里我们就实现了用户注册功能，用户的其他信息，我们可以通过用户自行设置