首页 > 其他分享 >鸿蒙 Ark ui 实战登录界面请求网络实现教程

鸿蒙 Ark ui 实战登录界面请求网络实现教程

时间：2023-12-25 21:01:18浏览次数：34  
标签：string 鸿蒙 color app float ui login Ark margin


团队介绍

作者：徐庆

团队：坚果派 公众号：“大前端之旅” 润开鸿生态技术专家，华为HDE，博客专家，超级个体，特邀嘉宾，签约作者，OpenHarmony布道师，电子发烧友专家博客，51CTO博客专家，擅长HarmonyOS/OpenHarmony应用开发、熟悉服务卡片开发。欢迎合作。

前言：

各位同学有段时间没有见面 因为一直很忙所以就没有去更新博客。最近有在学习这个鸿蒙的ark ui开发 因为鸿蒙不是发布了一个鸿蒙next的测试版本 明年会启动纯血鸿蒙应用 所以我就想提前给大家写一些博客文章

效果图

鸿蒙 Ark ui 实战登录界面请求网络实现教程_华为

鸿蒙 Ark ui 实战登录界面请求网络实现教程_ui_02

响应数据效果

鸿蒙 Ark ui 实战登录界面请求网络实现教程_网络_03

使用本地网络服务

鸿蒙 Ark ui 实战登录界面请求网络实现教程_华为_04

接口说明：

接口是我本地使用springboot 框架配合 hibernate 配合jpa写的一个后台服务 ：

客户端具体实现：

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

如图

鸿蒙 Ark ui 实战登录界面请求网络实现教程_网络_05

网络请求 工具类实现

import http from '@ohos.net.http';
import Constants, { ContentType } from '../constant/Constants';
import Logger from './Logger';
import { NewsData } from '../viewmodel/NewsData';


export function httpRequestGet(url: string) {
  return httpRequest(url, http.RequestMethod.GET);
}

export function httpRequestPost(url: string, params?: NewsData) {
  return httpRequest(url, http.RequestMethod.POST, params);
}

function httpRequest(url: string, method: http.RequestMethod,params?: NewsData){
  let httpRequest = http.createHttp();
  let responseResult = httpRequest.request(url, {
    method: method,
    readTimeout: Constants.HTTP_READ_TIMEOUT,//读取超时时间 可选，默认为60000ms
    header: {
      'Content-Type': ContentType.JSON
    },
    connectTimeout: Constants.HTTP_READ_TIMEOUT,//连接超时时间  可选，默认为60000ms
    extraData: params // 请求参数
  });
  return responseResult.then((value: http.HttpResponse)=>{
      Logger.error("请求状态 --> "+value.responseCode)
     if(value.responseCode===200){
       Logger.error("请求成功");
       let getresult = value.result;
       Logger.error('请求返回数据', JSON.stringify(getresult));
       return getresult;
     }
  }).catch((err)=>{
    return "";
  });
}

打印日志工具类实现 ：

import hilog from '@ohos.hilog';

class Logger {
  private domain: number;
  private prefix: string;
  private format: string = '%{public}s, %{public}s';

  /**
   * constructor.
   *
   * @param Prefix Identifies the log tag.
   * @param domain Domain Indicates the service domain, which is a hexadecimal integer ranging from 0x0 to 0xFFFFF.
   */
  constructor(prefix: string = 'MyApp', domain: number = 0xFF00) {
    this.prefix = prefix;
    this.domain = domain;
  }

  debug(...args: string[]): void {
    hilog.debug(this.domain, this.prefix, this.format, args);
  }

  info(...args: string[]): void {
    hilog.info(this.domain, this.prefix, this.format, args);
  }

  warn(...args: string[]): void {
    hilog.warn(this.domain, this.prefix, this.format, args);
  }

  error(...args: string[]): void {
    hilog.error(this.domain, this.prefix, this.format, args);
  }
}

export default new Logger('HTTPS', 0xFF00)

登录界面实现 ：

/**
 * 创建人：xuqing
 * 创建时间:2023年8月2日08:38:50
 * 类说明：
 *
 *
 */
import prompt from '@ohos.promptAction';
import router from '@ohos.router';
import CommonConstants from '../common/constant/CommonConstants';
import StyleConstant from '../common/constant/StyleConstant';
import { httpRequestGet }  from '../common/utils/OKhttpUtil';
import CommonConstant from '../common/constant/CommonConstants';
import  Logger from '../common/utils/Logger';



@Extend(TextInput) function inputStyle () {
  .placeholderColor($r('app.color.placeholder_color'))
  .height($r('app.float.login_input_height'))
  .fontSize($r('app.float.big_text_size'))
  .backgroundColor($r('app.color.background'))
  .width(CommonConstants.FULL_PARENT)
  .padding({ left: CommonConstants.INPUT_PADDING_LEFT })
  .margin({ top: $r('app.float.input_margin_top') })
}

@Extend(Line) function lineStyle () {
  .width(CommonConstants.FULL_PARENT)
  .height($r('app.float.line_height'))
  .backgroundColor($r('app.color.line_color'))
}

@Extend(Text) function blueTextStyle () {
  .fontColor($r('app.color.login_blue_text_color'))
  .fontSize($r('app.float.small_text_size'))
  .fontWeight(FontWeight.Medium)
}


@Extend(Text) function blackTextStyle () {
  .fontColor($r('app.color.black_text_color'))
  .fontSize($r('app.float.big_text_size'))
  .fontWeight(FontWeight.Medium)
}


/**
 * Login page
 */
@Entry
@Component
struct LoginPage {
  @State account: string = '';
  @State password: string = '';
  @State isShowProgress: boolean = false;
  private timeOutId = null;
  @Builder imageButton(src: Resource) {
    Button({ type: ButtonType.Circle, stateEffect: true }) {
      Image(src)
    }
    .height($r('app.float.other_login_image_size'))
    .width($r('app.float.other_login_image_size'))
    .backgroundColor($r('app.color.background'))
  }



 async  login() {
    if (this.account === '' || this.password === '') {
      prompt.showToast({
        message: $r('app.string.input_empty_tips')
      })
    } else {
      let username:string='username=';
      let password:string='&password=';
      let networkurl=CommonConstant.LOGIN+username+this.account+password+this.password;
      Logger.error("请求url "+networkurl);
      await   httpRequestGet(networkurl).then((data)=>{
        console.log("data --- > "+data);
        Logger.error("登录请求回调结果 ---> " +data.toString());
        let obj=JSON.parse(data.toString());
        Logger.error("请求结果code -- > "+obj.code);
        if(obj.code===200){
          prompt.showToast({
            message: $r('app.string.login_success')
          })
        }
      });
    }
  }

  aboutToDisappear() {
    clearTimeout(this.timeOutId);
    this.timeOutId = null;
  }

  build() {
    Column() {
      Image($r('app.media.logo'))
        .width($r('app.float.logo_image_size'))
        .height($r('app.float.logo_image_size'))
        .margin({ top: $r('app.float.logo_margin_top'), bottom: $r('app.float.logo_margin_bottom') })
      Text($r('app.string.login_page'))
        .fontSize($r('app.float.page_title_text_size'))
        .fontWeight(FontWeight.Medium)
        .fontColor($r('app.color.title_text_color'))
      Text($r('app.string.login_more'))
        .fontSize($r('app.float.normal_text_size'))
        .fontColor($r('app.color.login_more_text_color'))
        .margin({ bottom: $r('app.float.login_more_margin_bottom'), top: $r('app.float.login_more_margin_top') })

      Row() {
        //账号
        Text($r('app.string.account')).blackTextStyle()
        TextInput({ placeholder: $r('app.string.account') })
          .maxLength(CommonConstants.INPUT_ACCOUNT_LENGTH)
          .type(InputType.Number)
          .inputStyle()
          .onChange((value: string) => {
            this.account = value;
          }).margin({left:20})
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width(CommonConstants.FULL_PARENT)
      .margin({ top: $r('app.float.forgot_margin_top') })

      Line().lineStyle().margin({left:80})

      Row() {
        //密码
        Text($r('app.string.password')).blackTextStyle()
        TextInput({ placeholder: $r('app.string.password') })
          .maxLength(CommonConstants.INPUT_PASSWORD_LENGTH)
          .type(InputType.Password)
          .inputStyle()
          .onChange((value: string) => {
            this.password = value;
          }).margin({left:20})
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width(CommonConstants.FULL_PARENT)
      .margin({ top: $r('app.float.forgot_margin_top') })

      Line().lineStyle().margin({left:80})

      Row() {
        //短信验证码登录
        Text($r('app.string.message_login')).blueTextStyle().onClick(()=>{
          prompt.showToast({
            message: $r('app.string.stay_tuned_during_feature_development')
          })
        })
        //忘记密码
        Text($r('app.string.forgot_password')).blueTextStyle().onClick(()=>{
          prompt.showToast({
            message: $r('app.string.stay_tuned_during_feature_development')
          })
        })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width(CommonConstants.FULL_PARENT)
      .margin({ top: $r('app.float.forgot_margin_top') })

      Button($r('app.string.login'), { type: ButtonType.Capsule })
        .width(CommonConstants.BUTTON_WIDTH)
        .height($r('app.float.login_button_height'))
        .fontSize($r('app.float.normal_text_size'))
        .fontWeight(FontWeight.Medium)
        .backgroundColor($r('app.color.login_button_color'))
        .margin({ top: $r('app.float.login_button_margin_top'), bottom: $r('app.float.login_button_margin_bottom') })
        .onClick(() => {
          this.login();
        })
      Text($r('app.string.register_account')).onClick(()=>{
        prompt.showToast({
          message: $r('app.string.stay_tuned_during_feature_development')
        })
      }).fontColor($r('app.color.login_blue_text_color'))
        .fontSize($r('app.float.normal_text_size'))
        .fontWeight(FontWeight.Medium)

      if (this.isShowProgress) {
        LoadingProgress()
          .color($r('app.color.loading_color'))
          .width($r('app.float.login_progress_size'))
          .height($r('app.float.login_progress_size'))
          .margin({ top: $r('app.float.login_progress_margin_top') })
      }
      Blank()
    }
    .backgroundColor($r('app.color.background'))
    .height(CommonConstants.FULL_PARENT)
    .width(CommonConstants.FULL_PARENT)
    .padding({
      left: $r('app.float.page_padding_hor'),
      right: $r('app.float.page_padding_hor'),
      bottom: $r('app.float.login_page_padding_bottom')
    })
  }
}

点击登录拿到输入数据和后台交互

async  login() {
   if (this.account === '' || this.password === '') {
     prompt.showToast({
       message: $r('app.string.input_empty_tips')
     })
   } else {
     let username:string='username=';
     let password:string='&password=';
     let networkurl=CommonConstant.LOGIN+username+this.account+password+this.password;
     Logger.error("请求url "+networkurl);
     await   httpRequestGet(networkurl).then((data)=>{
       console.log("data --- > "+data);
       Logger.error("登录请求回调结果 ---> " +data.toString());
       let obj=JSON.parse(data.toString());
       Logger.error("请求结果code -- > "+obj.code);
       if(obj.code===200){
         prompt.showToast({
           message: $r('app.string.login_success')
         })
       }
     });
   }
 }

这边我们拿到输入框的数据 然后进行空判 非空后 我们把请求参数拼接在我们的 url 后面去调用工具类方法请求服务器去验证登录 。

异步调用请求方法

await   httpRequestGet(networkurl).then((data)=>{
  console.log("data --- > "+data);
  Logger.error("登录请求回调结果 ---> " +data.toString());
  let obj=JSON.parse(data.toString());
  Logger.error("请求结果code -- > "+obj.code);
  if(obj.code===200){
    prompt.showToast({
      message: $r('app.string.login_success')
    })
  }
});

josn解析

let obj=JSON.parse(data.toString());
Logger.error("请求结果code -- > "+obj.code);
if(obj.code===200){
 prompt.showToast({
   message: $r('app.string.login_success')
 })
}

请求成功后toast提示

鸿蒙 Ark ui 实战登录界面请求网络实现教程_ui_02

最后总结 ：

这个简单案例包含了网络请求 布局还有 数据回调 字符串拼接 知识点还是很多，回调写法和flutter 很像 这边字符串拼接 直接+ 号拼接我写很low希望网友可以优化 还有json解析 后面我会专门讲解的 现在篇幅有限就不展开讲了 有兴趣的同学可以把代码下载出来再研究 最后呢 希望我都文章能帮助到各位同学工作和学习 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 谢谢


标签：string,鸿蒙,color,app,float,ui,login,Ark,margin
From： https://blog.51cto.com/u_12300179/8972173

相关文章

  • Python+uiautomator2实现手机锁屏解锁功能
    业务需求：需要测试手机滑动解锁失败时事件的次数及等待的时间，本来想利用Python+Appium实现，但是Appium运行时自动给我解锁了....部分解释摘抄自：https://testerhome.com/topics/11357python-uiautomator2是一个自动化测试开源工具，仅支持Android平台的原生应用测试python-uiautomator2......
  • Markdown学习
    Markdown学习标题control+1-6字体Hello,World!两个星号Hello,World!两侧一个星号Hello,World!三个Hello,World!两个波浪线引用可爱小宝最可爱！箭头符号空格分割线三个星号/减号图片超链接点击跳转到coco鸭的博客列表ABC有序列表减......
  • CodeForces 1906K Deck-Building Game
    洛谷传送门CF传送门UNR#2黎明前的巧克力。枚举两个人选的卡的并集\(S\)，那么当\(\bigoplus\limits_{i\inS}a_i=0\)时\(S\)有贡献\(2^{|S|}\)。考虑将\(2^{|S|}\)分摊到每个元素上，也就是每个元素有\(2\)的贡献，然后把这些贡献乘起来。所以题目其实是想让我们算......
  • 不用写代码！UI自动化测试平台
    UI自动化测试已经成为现代软件开发过程中不可或缺的一部分。它能够提供诸多优势，包括提高测试效率、减少人力成本、提升软件质量等。同时，可视化工具为UI自动化测试带来了更多便利和灵活性。然而，可视化工具也存在一些潜在的劣势。本文将探讨UI自动化测试的必要性以及可视化工具的优......
  • Markdown 语法学习
    Markdown学习标题的添加​ 一级标题：#一级标题内容​ 二级标题：##二级标题内容​ 三级标题：###三级标题内容​ 以此内推文字格式​ 划线：~~+文字内容+~~​ 粗体文字：**+文字内容+**​ 斜体文字：*+文字内容+*​ 斜粗体文字：三个*，中间加文字内容分割线......
  • 鸿蒙原生应用/元服务开发-Stage模型能力接口（十）上
    @ohos.app.form.FormExtensionAbility(FormExtensionAbility)FormExtensionAbility为卡片扩展模块，提供卡片创建、销毁、刷新等生命周期回调。本模块首批接口从APIversion9开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。本模块接口仅可在Stage模型下使用。一、......
  • unigui显示websocket服务端向客户端发送信息【15】
    用WebSocket从服务端直接发送消息给all客户端。1、在ServerModule放TUniThreadTimer 2、timerevent：procedureTUniServerModule.UniThreadTimer1Timer(Sender:TObject);beginBroadcastMessage('update',[......
  • m基于Yolov2深度学习网络的驾驶员打电话行为预警系统matlab仿真,带GUI界面
    1.算法仿真效果matlab2022a仿真结果如下：2.算法涉及理论知识概要随着汽车数量的不断增加，交通安全问题日益突出。其中，驾驶员手持电话行为是导致交通事故的一个重要原因。为了降低这类事故的发生率，本文提出了一种基于Yolov2深度学习网络的驾驶员手持电话行为预警系统。该系统能够......
  • Cost Calculator Builder PRO v3.1.46 已注册 – WordPress 插件
    成本计算器生成器PROv3.1.46：WordPress插件全解析一、插件概述"成本计算器生成器PROv3.1.46"是一款强大的WordPress插件，专为需要创建报价、价格和项目估算表的用户设计。这款插件集成了众多高级功能，可帮助用户高效地管理他们的成本和价格，从而提供准确的报价估算。二、条......
  • UI定制 - 全局提示框
    ■ 全局提示框在开发中，一个全局提示框是很有必要的，毕竟系统的弹框是满足不了产品的变态要求。实现这样一个功能其实很简单代码示例：PopView就是我们要封装的全局弹框//-PopView.h1#import<UIKit/UIKit.h>2typedefvoid(^cancelBlock)(void);3typedefvoid(^sure......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99