HarmonyOS 鸿蒙Next 基于eTS的登录程序的实现

HarmonyOS 鸿蒙Next 基于eTS的登录程序的实现 1、在config.json中配置权限

{
  "reqPermissions": [
    {
      "name": "ohos.permission.INTERNET"
    }
  ]
}

2、在apipost中

(1)Body中添加

• username 为 admin
• password 为 123456

（2）编写Mock服务

{
  "loginSuccess": function() {
    let body = _req.body;
    return body.username === 'admin' && body.password === '123456';
  }
}

（3）得到的实时响应为 {“loginSuccess”: true }

2、index.ets代码如下：

import http from '@ohos.net.http'
import RequestMethod from '@ohos.net.http'
import ResponseCode from '@ohos.net.http'
import prompt from '@system.prompt'

@Entry
@Component struct Index {
  username :String = "";
  password :String = "";
  loginSuccess :boolean=false;

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Row({space: 5}) {
        Text('用户：')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

        TextInput({
          placeholder: "请输入用户名"
        })
        .width('150')
        .onChange((value) => {
           this.username = value;
        })
     }
      .width('100%')
      .height(30)
      .margin('bottom:50')

      Row({space: 5}) {
        Text('密码：')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

        TextInput({
          placeholder: "请输入密码"
        })
        .width('150')
        .onChange((value) => {
            this.password = value;
        })

      }
      .width('100%')
      .height(30)
      .margin({top:20})

      Row(){
        Button('登录').width('150')
          .onClick(() => {
            this.httplogin();
          })
      }.margin({right:120,top:50})

    }
    .width('100%')
    .height('100%')
    .margin({left:80})
  }

  private httplogin() {
    let httpRequest = http.createHttp();
    httpRequest.request(
      "https://console-mock.apipost.cn/app/mock/project/c2f3021b-fa84-4ba5-e39a-78ab02ba5d53/login",
      {
        method: RequestMethod.RequestMethod.POST,
        header: {
          'Content-Type': 'application/json; charset=utf-8'
        },
        readTimeout: 15000,
        connectTimeout: 15000,
        extraData: { "username":this.username,"password":this.password }
      },
      (error, data) => {
        if(error) {
          console.log("error code: " + error.code + ", msg: " + error.message)
        } else {
          let code = data.responseCode
          if(ResponseCode.ResponseCode.OK == code) {
            //data.result为{"loginSuccess": true }或{"loginSuccess": false }
            this.loginSuccess = JSON.parse(data.result).loginSuccess
            if(this.loginSuccess){
              prompt.showToast({
                message: "登录成功！", // 显示文本
                duration: 3000,      // 显示时长
                bottom: 100          // 距离底部的距离
              })
            }else{
              prompt.showToast({
                message: "登录失败！", // 显示文本
                duration: 3000,      // 显示时长
                bottom: 100          // 距离底部的距离
              })
            }
          } else {
            console.log("response code: " + code);
          }
        }
      }
    );
  }
}

3、运行结果如下：