## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了个人中心页面的静态展示，项目进行到这里呢，我们也是时候添加用户相关的内容了， 因为到了后期，我们的数据都是跟用户绑定的，各个用户之间的数据并不互通，现在为了实现我们的用户绑定制度，我们需要给应用添加一个用户登陆的入口的。

## 功能分析

用户登陆页面的内容相对来说比较简单，我们首先要实现的就是登陆页的静态页面，需要展示的内容不多，包括logo，账号密码的输入框，登陆按钮，请求状态等，之后我们会在页面中添加相应的业务逻辑使他更丰富一些，我们在这个页面中要提前实现账号密码的校验，这样在后续的业务逻辑中可以少进行一次请求，减少我们数据库的压力，这里也算是一个业务逻辑的优化。要实现登陆，首先我们要创建两个textiput输入框，分别定义两个需要拿到用户输入的内容，点击登录按钮之后，我们提交账号密码到数据库进行数据查询，拿到返回数据源的条目回调，当回调条目大于1，我们就实现后续的业务逻辑，这时候我们就实现了用户的登陆，同时把用户登录成功后的数据存储起来，通过我们创建的用户首选项方法存储到应用中，方便我们后续的使用

import promptAction from '@ohos.promptAction';

@Entry

@Component

struct LoginPage {

  @State userId:string=''

  aboutToAppear(){

  }

  @State message: string = 'login page'

  @State acc:string = ''

  @State psw:string = ''

  @State isShowProgress: boolean = true;

  controller: TextInputController = new TextInputController()

  login():void{

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

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

      return

    }else {

      this.isShowProgress=false

    }

  }

  @Builder  imageButton(src:String){

    Button({type:ButtonType.Circle,stateEffect:true}){

      Image(src.toString())

        .height(20)

        .width(20)

    }

    .height(50)

    .width(50)

  }

  build() {

    Row() {

      Column() {

        Image($r('app.media.logo'))

          .width(120).height(120).borderRadius(60)

        Text("登陆界面")

          .width(80)

          .fontSize(14)

          .fontColor("#333333")

          .margin({top:40})

          .fontWeight(FontWeight.Medium)

        TextInput({text:"15290959515",

          placeholder: '请输入账号'

        })

          .backgroundColor("#f6f6f6")

          .placeholderColor("#ff999595")

          .fontColor("#333333")

          .maxLength(11)

          .type(InputType.Number)

          .onChange((value: String) => {

            this.acc = value.toString()

          }).margin(20)

        TextInput({text:"123456",

          placeholder: '请输入密码'

        })

          .backgroundColor("#f6f6f6")

          .placeholderColor("#ff999595")

          .fontColor("#333333")

          .type(InputType.Password)

          .onChange((value: String) => {

            this.psw = value.toString()

          }).margin(20)

        Row() {

          Text('注册')

            .fontColor(Color.Blue)

            .fontSize(14)

            .margin(30)

          Text('忘记密码')

            .fontColor(Color.Blue)

            .fontSize(14)

            .margin(30)

        }

        .width('100%')

        .justifyContent(FlexAlign.SpaceBetween)

        if (this.isShowProgress) {

          LoadingProgress()

            .width(60)

            .height(60)

            .backgroundColor(Color.Pink)

            .margin({ top: $r('app.float.login_progress_margin_top') })

        }

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

          .onClick(()=>{

            this.isShowProgress=true

            this.login()

          })

          .fontColor(Color.White)

          .width('80%')

          .height(40)

          .margin(40)

          .backgroundColor(0xff0000)

        Blank()

        .margin(30)

      }

      .width('100%')}

    .height('100%')

    .backgroundColor('#FFFFFF')

    .justifyContent(FlexAlign.Center)

  }

}

到这里我们的静态页面就实现完成了