鸿蒙实现登录后页面跳转

1、在实现实验二中登录界面的基础上,添加一个新页面;

2、点击"登录"按钮后跳转到新页面,并将登录结果作为参数传递到新页面;

3、如果登录成功,在新页面上显示欢迎语;

4、如果登录失败,在新页面上显示"登录失败,无操作权限"。

复制代码
Index.ets
import router from '@ohos.router';
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct LoginPage {
  @State password: string = ''
  @State username: string = ''

  build() {

    Column() {
      Image($r("app.media.panada"))
        .width(100) // 设置图片宽度
        .height(100) // 设置图片高度
        .margin({
          bottom: 60 // 设置图片下方的外边距
        })
      Row() {
        Text("用户名")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
      }.width("100%")

      Row() {
        Image($r("app.media.login")).width(30)

        TextInput({
          placeholder: "请输入用户名"
        }).width(200).onChange((val: string) => {
          this.username = val

        })
      }.margin({
        bottom: 8,
        top: 8
      }).width("100%")

      Divider().strokeWidth(4)

      Row() {
        Text("密码")
          .fontSize(18)
          .fontWeight(FontWeight.Bold).margin({
          bottom: 8,
          top: 8
        })
      }.width("100%")

      Row() {
        Image($r("app.media.pwd")).width(30)

        TextInput({
          placeholder: "请输入密码"
        }).width(200).onChange((val: string) => {
          this.password = val


        }).type(InputType.Password)
      }.width("100%")

      Divider().strokeWidth(4)
      Row() {
        Blank()
        Text("忘记密码?")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
      }.width("100%")

      Button("登录").width("90%").height(60).backgroundColor(Color.Blue).onClick(() => {
        if (this.username == "admin" && this.password == "123456") {
          promptAction.showToast({
            message: "输入正确!"
          });
          // 假设您有一个用于页面导航的函数,这里用 router.pushUrl 作为示例
          router.pushUrl({
            url: "pages/Second",
            params: { // 传递参数到新页面
              loginResult: "登录成功!欢迎!"
            }
          });
        } else {
          promptAction.showToast({
            message: "输入错误,请重新输入!"
          });
          // 如果需要,也可以导航到同一个页面或另一个错误页面,并传递登录失败的信息
          router.pushUrl({
            url: "pages/Second", // 或者另一个错误页面
            params: {
              loginResult: "登录失败,无操作权限。"
            }
          });
        }
      });

      Text("第三方登录")
        .fontSize(18).margin({
        bottom: 40,
        top: 60
      })

      Row({ space: 8 }) {
        Image($r("app.media.qq")).width(60)
        Image($r("app.media.wechat")).width(60)

      }

      Text("立即注册")
        .fontSize(18).margin({
        top: 20,
      })

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .padding({
      left: 20,
      right: 20
    })
  }
}

Second.ets
import router from '@ohos.router';

@Entry
@Component
struct Second {

  @State tips:string = '点击返回到首页'
  @State data:string = router.getParams()?.['loginResult']

  build() {
    Row() {
      Column() {
        if(this.data != null){
          Text(this.data)
            .fontSize(30)
        }
        Button(this.tips)
          .width(200)
          .height(60)
          .fontColor(Color.White)
          .fontSize(20)
          .margin({
            top:20
          })
          .onClick(()=>{
            router.back()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
相关推荐
周胡杰21 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦2 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳10 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼14 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳15 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
NoirSeeker15 小时前
在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用(详细)
c++·windows·arkts·鸿蒙·交叉编译
DC_BLOG16 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
博睿谷IT99_1 天前
入门华为人工智能,HCIA/HCIP/HCIE该怎么选?
人工智能·华为·华为认证
江湖有缘1 天前
基于华为欧拉系统安装FileGator文件管理器
华为