鸿蒙开发(三)：使用ArkTS开发鸿蒙应用：登录页面的实现原创

小_铁

发布于 2025-2-23 11:05

浏览

1收藏

🌟 使用ArkTS开发鸿蒙应用：登录页面的实现

在开发鸿蒙应用时，登录页面是一个常见的功能模块。通过登录页面，用户可以验证自己的身份并进入应用的主界面。以下是一个完整的登录页面实现，包括用户输入账号和密码、调用后端接口验证登录信息，并使用本地存储保存登录状态。

代码解析

1. 导入模块

import { router } from '@kit.ArkUI';
import { httpRequestGet } from '../Utils/HttpUtils';
import { LoginModel, LoginModelUser } from '../model/LoginModel';
import promptAction from '@ohos.promptAction';
import { common } from '@kit.AbilityKit';
import { preferences } from '@kit.ArkData';

导入了多个模块，用于实现路由跳转、HTTP请求、提示框、本地存储等功能。

2. 数据持久化

let dataPreference: preferences.Preferences | null = null;

定义了一个全局变量dataPreference，用于存储用户登录信息。

3. 定义登录页面组件

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State username: string = "";
  @State password: string = "";
  private backtime: number = 0;
  private loginurl: string = "http://42.192.45.45:8080/boss/user/validlogin?";

定义了一个名为Index 的登录页面组件。
使用@State 装饰器定义了username 和password，用于存储用户输入的账号和密码。
定义了loginurl，用于存储登录接口的URL。

4. 登录逻辑

async toLogin() {
  let username = 'username=';
  let password = '&password=';
  let networkurl = this.loginurl + username + this.username + password + this.password;
  console.log("networkurl===>" + networkurl);

  await httpRequestGet(networkurl).then((data) =>
    console.log("登录返回数据：" + data.toString());
    let loginModel: LoginModel = JSON.parse(data.toString());
    let msg = loginModel.msg;

    let options: preferences.Options = { name: 'myStore' };
    dataPreference = preferences.getPreferencesSync(getContext(), options);

    if (loginModel.code == 200) {
      router.pushUrl({
url: "pages/Home"
      });

      dataPreference.putSync("username", this.username);
      dataPreference.putSync("password", this.password);
      dataPreference.flush();
    } else {
      promptAction.showToast({
message: msg
      });
    }
  });
}

定义了toLogin 方法，用于处理用户登录逻辑。
拼接登录接口的URL，包含用户输入的账号和密码。
使用httpRequestGet 发送GET请求到后端接口。
如果登录成功（返回码为200），将用户重定向到主页，并将用户名和密码保存到本地存储中。
如果登录失败，显示提示信息。

5. 页面布局

build()
  Column()
    Image($r('app.media.icon2'))
      .width(100)
      .height(100)
      .borderRadius(10)
      .margin({ top: 140 })
    Text("登录界面")
      .fontSize(24)
      .fontWeight(700)
      .margin({ top: 10 })
    Text("登录账号以使用更多服务")
      .fontColor("#ff807b7b")
      .margin({ top: 10 })
    TextInput({ placeholder: "请输入账号" })
      .type(InputType.Normal)
      .onChange((value)
        this.username = value;
      })
      .newLocalFancy()
    TextInput({ placeholder: "请输入密码" })
      .type(InputType.Password)
      .onChange((value)
        this.password = value;
      })
      .newLocalFancy()
    Row({ space: 10 })
      Button("登录").width("80%").height(40)
        .onClick(()
          this.toLogin();
          console.log("账号：" + this.username);
          console.log("密码：" + this.password);
        }).layoutWeight(1)
      Button("注册").width("80%").height(40)
        .onClick(()
          router.pushUrl({
            url: "pages/Register"
          });
        }).layoutWeight(1)
    }.margin({ top: 20, right: 20, left: 20 })
  }
  .height('100%')
  .width('100%')
}

使用Column 和Row 布局组件，构建登录页面的UI。
包含一个图片、两个文本提示、两个输入框（账号和密码）以及两个按钮（登录和注册）。
通过onChange 事件监听输入框的值变化，更新username 和password。
登录按钮点击时调用toLogin 方法，注册按钮点击时跳转到注册页面。

6. 样式定义

@Styles
newLocalFancy() {
.margin({ top: 20, left: 20, right: 20 })
}

定义了一个样式方法newLocalFancy，用于设置输入框的外边距。

7. 返回键处理

onBackPress(): boolean | void {
  let nowtime = Date.now();
  if (nowtime - this.backtime < 1000) {
    const mContext = getContext(this) as common.UIAbilityContext;
    mContext.terminateSelf();
  } else {
    this.backtime = nowtime;
    promptAction.showToast({
      message: "再按一次退出应用"
    });
  }
  return true;
}

定义了onBackPress 方法，用于处理返回键事件。
如果用户在1秒内连续点击返回键两次，则退出应用；否则显示提示信息。

8.LoginModel

export class LoginModel {
  msg?: string = "";
  code?: number = 0;
  user?: LoginModelUser = new LoginModelUser();
  token?: string = "";
}
export class LoginModelUser {
  id?: number = 0;
  username?: string = "";
  password?: string = "";
  phone?: string = "";
  sex?: string = "";
}