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

技术栈

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

这样我们就实现了用户的登录功能