## 技术栈
Appgallery connect
开发准备
上一节我们实现了用户数据的提交，我们成功的实现了用户的注册，这一节我们就要根据提交的信息进行登陆验证，在登陆之后我们需要保存当前用户的信息，方便我们后续的使用。
功能分析
要实现登陆，首先我们需要拿到用户输入的内容，检测之后，我们实现用户的登陆，同时把用户登录成功后的数据存储起来，方便我们后续的使用
功能开发
我们先实现登陆相关的内容
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)
}
}
然后我们查询对应的数据实现登录，把信息存储到首选项中
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]))
}
这样我们就实现了用户的登录功能
