当前位置：首页 > news >正文

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

news 来源：原创 2025/6/30 16:25:50

技术栈

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