鸿蒙实现登录后页面跳转

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%')
  }
相关推荐
幽蓝计划9 小时前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
幽蓝计划16 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core18 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
伍哥的传说18 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
funnycoffee12319 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
制造数字化方案研究院19 小时前
59页|PPT|华为集成服务交付ISD业务变革总体方案:业务规则、流程、IT、组织及度量“四位一体”的管理体系
运维·华为
博睿谷IT99_19 小时前
华为物联网认证:开启万物互联的钥匙
物联网·华为·华为认证·职业规划
遇到困难睡大觉哈哈1 天前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
伍哥的传说1 天前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
Fanmeang2 天前
OSPF高级特性之FRR
运维·网络·华为·ip·ospf·spf·frr