更新升级 专属应用 系统故障 硬件故障 电脑汽车 鸿蒙刷机 鸿蒙开发Linux教程 鸿蒙开发Linux命令
当前位置:HMXT之家 > 应用开发 > 用DevEco Studio开发鸿蒙应用之基于eTS的登录程序的实现

用DevEco Studio开发鸿蒙应用之基于eTS的登录程序的实现

更新时间:2022-06-17 16:05:59浏览次数:80+次

使用的工具是DevEco Studio,开发鸿蒙应用之基于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 }

3、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);

          }

        }

      }

    );

  }

}

4、运行结果如下截图:

\

\

说明

如果可以,不建议把后端逻辑(Controller)和界面(View)写在一起。