实现登录功能主要逻辑包括:
- 导入需要的组件
- 定义登录页面
- 渲染界面
- 登录方法
- 忘记密码方法
- 启用登录页面
一、功能介绍
本登录功能通过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'
});
}
五、结语
下一节：详细教程 - 从零开发 Vue 鸿蒙应用 第三节 （封装TabBar）
上一节：详细教程 - 从零开发 Vue 鸿蒙应用 第一节
