HarmonyOS实现登录页面（一）相关html代码（部分），js代码

首先在HarmonyOS中和vue不一样数据不是双向绑定。

为了页面简洁，样式相关代码一律忽略

on:change="changeUsername"表示当输入框的值发送变化的时候调用对应函数changeUsername

html相关代码

<input  type="text" placeholder="请输入手机号/邮箱/个人账号" on:change="changeUsername"/>

js相关代码

数据存放

data: {
    user:{
        username:'',
        password:''
    }
}

实现函数changeUsername。
event是函数自带的值。

changeUsername(event){//通过方法获得输入框的值
    this.user.username = event.value;
}

一个login函数，里面包括http请求和router.push页面跳转

login(){
    // 每一个httpRequest对应一个http请求任务，不可复用
    let httpRequest = http.createHttp();
    httpRequest.request(
        // 填写http请求的url地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
        "EXAMPLE_URL",
        {
            method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
            // 开发者根据自身业务需要添加header字段
            header: {
                'Content-Type': 'application/json'
            },
            // 当使用POST请求时此字段用于传递内容
            extraData: {
                "data": "data to send",
            },
            connectTimeout: 60000, // 可选，默认为60s，连接超时时间
            readTimeout: 60000, // 可选，默认为60s，读取超时时间
        }, (err, data) => {//err成功与否，data后台服务器返回的结果
            if (!err) {//成功
                // data.result为http响应内容，可根据业务需要进行解析
                console.info('Result:' + data.result);
                console.info('code:' + data.responseCode);
                // data.header为http响应头，可根据业务需要进行解析
                console.info('header:' + JSON.stringify(data.header));
                console.info('cookies:' + data.cookies); // 8+
            } else {//失败
                console.info('error:' + JSON.stringify(err));
                // 当该请求使用完毕时，调用destroy方法主动销毁。
                httpRequest.destroy();//对象销毁
            }
        }
    );
    router.push({
        url:'pages/main/main'
    });
}

js全部代码

import router from '@ohos.router'
import http from '@ohos.net.http';
export default {
    data: {
        user:{
            username:'',
            password:''
        }
    },
    onInit() {
    },
    changeUsername(event){//通过方法获得输入框的值
        this.user.username = event.value;
    },
    changePassword(event){//通过方法获得输入框的值
        this.user.username = event.value;
    },
    login(){
        // 每一个httpRequest对应一个http请求任务，不可复用
        let httpRequest = http.createHttp();
        httpRequest.request(
            // 填写http请求的url地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
            "EXAMPLE_URL",
            {
                method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
                // 开发者根据自身业务需要添加header字段
                header: {
                    'Content-Type': 'application/json'
                },
                // 当使用POST请求时此字段用于传递内容
                extraData: {
                    "data": "data to send",
                },
                connectTimeout: 60000, // 可选，默认为60s，连接超时时间
                readTimeout: 60000, // 可选，默认为60s，读取超时时间
            }, (err, data) => {//err成功与否，data后台服务器返回的结果
                if (!err) {//成功
                    // data.result为http响应内容，可根据业务需要进行解析
                    console.info('Result:' + data.result);
                    console.info('code:' + data.responseCode);
                    // data.header为http响应头，可根据业务需要进行解析
                    console.info('header:' + JSON.stringify(data.header));
                    console.info('cookies:' + data.cookies); // 8+
                } else {//失败
                    console.info('error:' + JSON.stringify(err));
                    // 当该请求使用完毕时，调用destroy方法主动销毁。
                    httpRequest.destroy();//对象销毁
                }
            }
        );
        router.push({
            url:'pages/main/main'
        });
    }
}