《仿盒马》app开发技术分享-- 用户登陆页面(静态)(20)

举报
yd_215151764 发表于 2025/06/30 10:26:05 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了个人中心页面的静态展示,项目进行到这里呢,我们也是时候添加用户相关的内容了, 因为到了后期,我们的数据都是跟用户绑定的,各个用户之间的数据并不互通,现在为了实现我们的用户绑定制度,我们需要给应用添加一个用户登陆的入口的。## 功能分析用户登陆页面的内容相对来说比较简单,我们首先要实现的就是登陆页的静态页面,需要展示...


## 技术栈

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)

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


【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。