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

🌟 使用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 = "";
}

9.图片展示 

总结

通过上述代码，我们实现了一个完整的登录页面，包括用户输入账号和密码、调用后端接口验证登录信息，并使用本地存储保存登录状态。用户登录成功后将被重定向到主页，登录失败则显示提示信息。此外，还实现了返回键的防抖处理，提升了用户体验。