详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用第二节（鸿蒙Stage模型登录页面 JS版）

实现登录功能主要逻辑包括:

导入需要的组件
定义登录页面

渲染界面
登录方法
忘记密码方法

启用登录页面

一、功能介绍

本登录功能通过Stage框架实现了一个标准的用户名密码登录交互。支持账号密码输入,校验和存储,以及登录成功后的页面跳转。同时处理了常见的异常情况,如输入错误、网络异常等

二、技术方案

前端采用Stage框架,通过Entry入口加载组件,实现界面渲染。
用户输入通过Prompt组件获取,封装为Model进行校验。
登录请求调用服务端接口,通过Ability注入网络能力。异常通过Catch处理。
登录成功后,通过Storage组件持久化Token信息,Router组件跳转进入主页面。

三、功能实现

1. 登录页面组件渲染

通过@Entry注解入口,加载LoginComp组件,渲染用户名、密码输入框,登录按钮等界面元素。

2. 获取输入信息

在登录方法中,使用Prompt组件的getText方法获取用户名、密码文本输入信息。

3. 输入校验

利用Model模型对输入信息做校验,校验规则包括非空、长度限制、格式验证等。

4. 服务端登录验证

调用注入的Ability中定义的login方法发送登录请求。
在Ability中创建网络任务,发起实际的登录接口调用。

5. 异常处理

使用Catch机制捕获整个登录过程中的异常。
按照不同异常进行分类处理。如输入错误、网络错误等。

6. Token存储

登录成功后,通过Storage组件put方法永久存储登录Token。

7. 主页跳转

调用Router组件的replace接口跳转到主页面。

四、扩展能力

在此基础上,可以继续扩展功能:（后续持续更新）

密码加密保存
自动登录、记住密码
第三方微信、QQ登录
更丰富的异常分类和处理等

完整示例代码：

hml：

<!-- 1. 页面布局和基础样式 -->
<div class="container"><div class="login-page"><!-- 标题栏部分布局 --><div class="header"><text class="title">欢迎登录</text>    </div><!-- 登录表单部分布局 --><div class="form"><!-- 用户名输入框部分 --><div class="input-item"> <text>用户名</text><input type="text" id="username" class="input"></input></div><!-- 密码输入框部分 --><div class="input-item"><text>密码</text>  <input type="password" id="password" class="input"></input></div><!-- 登录按钮部分 --><div class="btn-wrapper"><button id="login" class="btn">登录</button>  </div><!-- 忘记密码部分 --><text id="forgot" class="extra">忘记密码?</text></div></div>  
</div>

css：

/* 页面总体样式 */
page {display: flex;flex-direction: column;background-color: #f6f6f6;
}/* 标题部分 */
.title {font-size: 40px;font-weight: bold;color: #007dff;
}/* 输入框部分 */
input {width: 80%;padding: 15px; border: 1px solid #ddd;border-radius: 5px;
}/* 按钮部分 */  
button {width: 80%;height: 50px;color: #fff;background-color: #007dff;  border-radius: 25px;box-shadow: 0 2px 10px #aaa; 
}button:active {opacity: 0.7; 
}/* 底部链接 */
text {font-size: 12px; color: #007dff;margin-top: 15px; 
}

js：

// 3. 交互逻辑处理
import router from '@system.router';  // 获取节点
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const loginButton = document.getElementById('login');
const forgotButton = document.getElementById('forgot');// 登录方法  
function login() {// 获取用户名和密码  let username = prompt.getTextFieldValue('username');let password = prompt.getTextFieldValue('password');// 简单验证if(!username || !password) {prompt.showToast({message: '用户名和密码不能为空'});return;}// TODO: 调用服务端接口验证//这个位置调用后台登录接口，如果验证账号密码成功则通过下述方法跳转到首页// 模拟登录成功prompt.showToast({message: '登录成功'});// 登录信息保存本地storage.set({key: 'user',value: JSON.stringify({username: username})});// 登录成功,跳转首页 router.replace({uri: 'pages/home' });
}// 登录按钮点击方法
loginButton.onclick = () => {login();
}// 忘记密码按钮点击方法
forgotButton.onclick = () => {router.push({uri: 'pages/forgotPassword' });
}