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

## 技术栈

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

}

```

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