## 技术栈

Appgallery connect

## 开发准备

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

## 功能分析

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

## 功能开发

```c

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)

  }

}

```

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

```c

 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("用户注册成功")

        }

```

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