《伴时匣》app开发技术分享--用户登录（3）

## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了用户数据的提交，我们成功的实现了用户的注册，并且成功的把保存的数据这一节我们就要根据提交的信息进行登陆验证，在登陆之后我们需要保存当前用户的信息，方便我们后续的使用，这节课我们要实现的内容是用户的登录功能，我们登陆页面跟注册页面还是比较相似的，都需要收集用户输入的内容，只是注册是新增数据，登录是查询数据，根据用户输入的数据跟查询的数据做校验，成功之后实现的登录。

## 功能分析

要实现登陆，首先我们要创建两个textiput输入框，分别定义两个需要拿到用户输入的内容，点击登录按钮之后，我们提交账号密码到数据库进行数据查询，拿到返回数据源的条目回调，当回调条目大于1，我们就实现后续的业务逻辑，这时候我们就实现了用户的登陆，同时把用户登录成功后的数据存储起来，通过我们创建的用户首选项方法存储到应用中，方便我们后续的使用

## 功能开发

我们先实现登陆相关的内容，设计好布局需要的组件

```c

import promptAction from '@ohos.promptAction';

import { router } from '@kit.ArkUI';

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

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

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

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

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

import { StorageUtils } from '../utils/StorageUtils';

@Entry

@Component

struct LoginPage {

aboutToAppear(){

}

@State acc:string = ''

@State psw:string = ''

controller: TextInputController = new TextInputController()

async login(): Promise<void>{

if (this.acc===''&&this.psw==='') {

promptAction.showToast({message:"请输入账号或密码"})

return

}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)

Row() {

Text('用户注册')

.fontColor("#ff65c8ee")

.fontSize(14)

.margin(30)

.onClick(()=>{

router.pushUrl({url:'pages/user/RegisterPage'})

})

}

.width('100%')

.justifyContent(FlexAlign.End)

Button('登陆',{type:ButtonType.Capsule,stateEffect:false})

.onClick(()=>{

this.login()

})

.fontColor(Color.White)

.width('80%')

.height(40)

.backgroundColor("#ff65c8ee")

}

.width('100%')}

.height('100%')

.backgroundColor('#FFFFFF')

.justifyContent(FlexAlign.Start)

}

}

```

然后我们创建对应的账号密码的变量，在textinput的onchange回调中获取用户输入的内容，获取到用户输入的内容之后调用云数据库的条件查询，查询对应的数据实现登录，把信息存储到首选项中

```c

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

let condition = new cloudDatabase.DatabaseQuery(user);

condition.equalTo("user_name",this.acc).and().equalTo("psw",this.psw)

let listData = await databaseZone.query(condition);

let json = JSON.stringify(listData)

let data1:User[]= JSON.parse(json)

if (data1.length>0) {

showToast("登录成功")

StorageUtils.set("user",JSON.stringify(data1[0]))

}

```

当云数据库的返回条目大于一条，提醒用户登录成功，调用封装好的用户首选项，存储输入的用户数据，这样我们就实现了用户的登录功能