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

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

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

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

3. 启用登录页面

一、功能介绍

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

二、技术方案

1. 前端采用Stage框架,通过Entry入口加载组件,实现界面渲染。
2. 用户输入通过Prompt组件获取,封装为Model进行校验。
3. 登录请求调用服务端接口,通过Ability注入网络能力。异常通过Catch处理。
4. 登录成功后,通过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 鸿蒙应用 第一节