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

团队介绍

作者：徐庆

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

前言：

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

效果图

image.png

image.png

响应数据效果

image.png

使用本地网络服务

image.png

接口说明：

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

客户端具体实现：

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

如图

image.png

网络请求 工具类实现

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提示

image.png

最后总结 ：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/254031.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

18个非技术面试题

18个非技术面试题

请你自我介绍一下你自己？ 这道面试题是大家在以后面试过程中会常被问到的，那么我们被问到之后，该如果回答呢？是说姓名？年龄？还是其他什么？ 最佳回答提示： 一般人回答这个问题往往会…
阅读更多...
接口测试--参数实现MD5加密签名规则

接口测试--参数实现MD5加密签名规则

最近有个测试接口需求，接口有签名检查，签名规范为将所有请求参数按照key字典排序并连接起来进行md5加密，格式是：md5(bar2&baz3&foo1),得到签名，将签名追加到参数末尾。由于需要对参数进行动态加密并且做压力测…
阅读更多...
基于Python实现的一个书法字体风格识别器源码，通过输入图片，识别出图片中的书法字体风格，采用Tkinter实现GUI界面

基于Python实现的一个书法字体风格识别器源码，通过输入图片，识别出图片中的书法字体风格，采用Tkinter实现GUI界面

项目描述 本项目是一个书法字体风格识别器，通过输入图片，识别出图片中的书法字体风格。项目包含以下文件： 0_setting.yaml：配置文件，包含书法字体风格列表、图片调整大小的目标尺寸等设置。1_Xy.py：预处理…
阅读更多...
vue3 插槽slot

vue3 插槽slot

插槽是子组件中的提供给父组件使用的一个占位符&#xff0c;用 <slot> 表示&#xff0c;父组件可以在这个占位符中填充任何模板代码&#xff0c;如 HTML、组件等&#xff0c;填充的内容会替换子组件的<slot> 元素。<slot> 元素是一个插槽出口 (slot outlet)&…
阅读更多...
Web前端-HTML（初识）

Web前端-HTML（初识）

文章目录 1.认识WEB1.1 认识网页&#xff0c;网站1.2 思考 2. 浏览器&#xff08;了解&#xff09;2.1 五大浏览器2.2 查看浏览器占有的市场份额 3. Web标准&#xff08;重点&#xff09;3.1 Web 标准构成结构表现行为 1.认识WEB 1.1 认识网页&#xff0c;网站 网页主要由文字…
阅读更多...
ADB：获取坐标

ADB：获取坐标

命令&#xff1a; adb shell getevent | grep -e "0035" -e "0036" adb shell getevent -l | grep -e "0035" -e "0036" 这一条正确&#xff0c;但是&#xff0c;grep给过滤了&#xff0c;导致没有输出 getevent -c 10 //输出10条信息…
阅读更多...
Linux---远程登录、远程拷贝命令

Linux---远程登录、远程拷贝命令

1. 远程登录、远程拷贝命令的介绍 命令说明ssh远程登录scp远程拷贝 2. ssh命令的使用 ssh是专门为远程登录提供的一个安全性协议&#xff0c;常用于远程登录&#xff0c;想要使用ssh服务&#xff0c;需要安装相应的服务端和客户端软件&#xff0c;当软件安装成功以后就可以使…
阅读更多...
雷士、书客、松下护眼台灯怎么样？多方位测评对比爆料！

雷士、书客、松下护眼台灯怎么样？多方位测评对比爆料！

灯光对于我们而言&#xff0c;重要性不言而喻&#xff0c;不管是办公、休闲&#xff0c;还是学习阅读&#xff0c;都离不开它的存在&#xff0c;尤其的在夜晚的时候。所以一般来说都会准备一盏桌面照明的台灯&#xff0c;目前而言最受欢迎的台灯就是护眼台灯了&#xff0c;因为…
阅读更多...
企业电子招标采购系统源码Spring Cloud + Spring Boot + 前后端分离 + 二次开发

企业电子招标采购系统源码Spring Cloud + Spring Boot + 前后端分离 + 二次开发

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及审…
阅读更多...
免费分享一套Springboot+Vue前后端分离的在线图书商城(书城)系统，挺漂亮的

免费分享一套Springboot+Vue前后端分离的在线图书商城(书城)系统，挺漂亮的

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringbootVue前后端分离的在线图书商城(书城)系统&#xff0c;分享下哈。 项目视频演示 【免费】SpringbootVue在线图书商城(在线书城) 毕业设计 Java毕业设计_哔哩哔哩_bilibili【免费】SpringbootVue在…
阅读更多...
【动态读取配置文件】ParameterTool读取带环境的配置信息

【动态读取配置文件】ParameterTool读取带环境的配置信息

不同环境Flink配置信息是不同的&#xff0c;为了区分不同环境的配置文件&#xff0c;使用ParameterTool工具读取带有环境的配置文件信息 区分环境的配置文件 三个配置文件&#xff1a; flink.properties&#xff1a;决定那个配置文件生效 flink-dev.properties&#xff1a;测…
阅读更多...
国产or进口？台阶仪为何要选择国产

国产or进口？台阶仪为何要选择国产

在微观轮廓测量领域&#xff0c;选择一款合适的台阶仪对于获得精准的测量结果至关重要。随着科技的不断发展&#xff0c;台阶仪市场上涌现了许多国产和进口产品&#xff0c;消费者在选择时可能会面临一些疑虑。 什么是台阶仪 台阶仪是一种超精密接触式微观轮廓测量仪&#xf…
阅读更多...
小程序地图检索

小程序地图检索

<template><view style"background-color: #f5f5f5"><!-- 头部开始 --><viewstyle"position: fixed;left: -5rpx;right: -5rpx;z-index: 99;top: -5rpx;width: 101vw;"><view style"position: relative"><view…
阅读更多...
常用模块之(time/datetime）

常用模块之(time/datetime）

【 一 】时间模块&#xff08;time/datetime&#xff09; 【 二 】 表示时间的三种方式 *时间戳&#xff08;Timestamp&#xff09;是指1970年1月1日00:00:00开始计算的偏移量。可以使用time模块中的time()函数获取当前时间的时间戳&#xff0c;也可以使用datetime模块中的tim…
阅读更多...
低代码开发平台的优势及应用场景分析

低代码开发平台的优势及应用场景分析

文章目录 低代码是什么&#xff1f;低代码起源低代码分类低代码的能力低代码的需求市场需要专业开发者需要数字化转型需要 低代码的趋势如何快速入门低代码开发低代码应用领域 低代码是什么&#xff1f; 低代码&#xff08;Low-code&#xff09;是著名研究机构Forrester于2014…
阅读更多...
lseek()函数的原型及使用方法，超详细

lseek()函数的原型及使用方法，超详细

对于所有打开的文件都有一个当前文件偏移量(current file offset)&#xff0c;文件偏移量通常是一个非负整数&#xff0c;用于表明文件开始处到文件当前位置的字节数。 读写操作通常开始于当前文件偏移量的位置&#xff0c;并且使其增大&#xff0c;增量为读写的字节数。文件被…
阅读更多...
机器视觉技术与应用实战（Chapter Two-04）

机器视觉技术与应用实战（Chapter Two-04）

2.6 图像形态学及常见的图像处理工具 图像形态学&#xff1a;是分析几何形状和结构的数字方法&#xff0c;是建立在集合代数的基础上用集合论方法定量描述几何结构的学科。基本的图像形态学算法有&#xff1a;腐蚀&#xff08;Erode&#xff09;、膨胀&#xff08;Dilate&…
阅读更多...
geemap学习笔记028：Landsat8计算时间序列NDVI并导出

geemap学习笔记028：Landsat8计算时间序列NDVI并导出

前言 本节则是以Landsat8影像数据为例&#xff0c;进行NDVI时间序列计算&#xff0c;并将得到的时间序列NDVI进行展示并导出。 1 导入库并显示地图 import ee import geemap import datetime import pandas as pd import os ee.Initialize()2 定义时间范围 # 定义日期范围 …
阅读更多...
【ECMAScript笔记四】自定义对象（创建，遍历）、内置对象（Math、Data、Array、String）、数据类型比较

【ECMAScript笔记四】自定义对象（创建，遍历）、内置对象（Math、Data、Array、String）、数据类型比较

文章目录 10 自定义对象10.1 创建对象方式10.1.1 字面量10.1.2 new object10.1.3 构造函数 10.2 遍历对象 11 内置对象11.1 Math 数学对象11.2 Date 时间对象11.3 Array 数组对象11.4 String 字符串对象 12 简单数据类型和复杂数据类型 10 自定义对象 JavaScript中的对象分为3…
阅读更多...
频谱论文：基于张量Tucker分解的频谱地图构建算法

频谱论文：基于张量Tucker分解的频谱地图构建算法

#频谱# [1]陈智博,胡景明,张邦宁 郭道省.(2023).基于张量Tucker分解的频谱地图构建算法.电子与信息学报(11),4161-4169. &#xff08;陆军工程大学&#xff09; 研究内容 将动态电磁环境的时变频谱地图建模为3维频谱张量&#xff0c;通过张量Tucker分解提取出具有物理意义的核…
阅读更多...
最新文章

Copyright @ 2022~2023