鸿蒙开发(三)：使用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 = ""; }