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

news2024/11/26 9:55:38

团队介绍

作者：徐庆

团队：坚果派 公众号：“大前端之旅” 润开鸿生态技术专家，华为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解析 后面我会专门讲解的 现在篇幅有限就不展开讲了 有兴趣的同学可以把代码下载出来再研究 最后呢 希望我都文章能帮助到各位同学工作和学习 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 谢谢

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2：离线数据处理

备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2：离线数据处理

MySQLhttps://www.mysql.com/ 将下发的ds_db01.sql数据库文件放置mysql中 12、编写Scala代码，使用Spark将MySQL的ds_db01库中表user_info的全量数据抽取到Hive的ods库中表user_info。字段名称、类型不变，同时添加静态分区，分区字段为etl_da…
阅读更多...
（1）Linux的 安装与用户的创建

（1）Linux的 安装与用户的创建

前言 本章正式开始Linux的学习 如果关于Linux环境搭配有问题的朋友 可以阅读此文章:Linux环境搭建 一，浅用一下吧 —— Hello, Linux! 我们现在已经登陆上了，我们当然可以用它来做很多事。 我们来用它写一个 "Hello, Linux!" ，来…
阅读更多...
Mysql 计算地理位置信息

Mysql 计算地理位置信息

mysql 处理空间关系 MySQL提供了一系列的函数来帮助我们处理空间对象之间的关系，如 ST_Intersects、ST_Contains 等。这些函数可以帮助我们判断空间对象之间的位置关系，并在此基础上执行相应的查询。 多边形查询 在实际应用中，需要查询某个…
阅读更多...
八股文打卡day2——计算机网络（2）

八股文打卡day2——计算机网络（2）

面试题：讲一下三次握手的过程？ 我的回答： 1.客户端发送报文段到服务器，主动建立连接。这个报文段中SYN标志位表示：这个报文段是用于连接的，此时SYN标志位设置为1。其中初始序列号字段包含了客户端的初始序…
阅读更多...
Vue 项目关于在生产环境下调试

Vue 项目关于在生产环境下调试

前言 开发项目时，在本地调试没问题，但是部署到生产会遇到一些很奇怪的问题，本地又没法调，就需要在生产环境/域名下进行调试。 在这里介绍一个插件Vue force dev ,浏览器扩展里下载 即便是设置了Vue.config.devtoolsfalse 只要安…
阅读更多...
计算机网络：自顶向下第八版学习指南笔记和课后实验--运输层

计算机网络：自顶向下第八版学习指南笔记和课后实验--运输层

记录一些学习计算机网络:自顶向下的学习笔记和心得 Github地址，欢迎star ⭐️⭐️⭐️⭐️⭐️ 运输层 TCP： 传输控制协议 报文段 UDP： 用户数据包协议 数据报 将主机间交付扩展到进程间交付被称为运输层的多路复用与多路分解 将运输层…
阅读更多...
苹果手机录屏没声音？找出原因，轻松修复！

苹果手机录屏没声音？找出原因，轻松修复！

“有人知道苹果手机录屏为什么没声音吗？今天录屏的时候，发现录制的视频没有声音，反反复复试了好几次，还是一样的情况，真的不知道该怎么办了，有人能帮帮我吗。” 苹果手机的内置录屏功能为用户提供了方便的…
阅读更多...
小程序地图检索

小程序地图检索

<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…
阅读更多...
系统移植导学

系统移植导学

什么是系统移植&#xff1f; 将操作系统移植到对应的硬件平台 linux系统移植到FS6818开发板 学习系统移植的目的&#xff1f; 1》浅图&#xff1a;为后面的驱动开发学习搭建一个系统环境 2》钱途&#xff1a;就业、工作的需要&#xff08;公司新的硬件平台---》移植linux系统到…
阅读更多...
【普中】基于51单片机简易计算器数码管显示设计( proteus仿真+程序+实物演示+讲解视频）

【普中】基于51单片机简易计算器数码管显示设计( proteus仿真+程序+实物演示+讲解视频）

【普中开发板】基于51单片机简易计算器数码管显示设计( proteus仿真程序实物演示讲解视频&#xff09; Proteus 仿真&#xff1a;Proteus 8.16(有低版本) 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;P04 1. 主要功能&#xff1a…
阅读更多...
台灯选用什么类型好？精选适合考研党使用的护眼台灯

台灯选用什么类型好？精选适合考研党使用的护眼台灯

台灯可以说是我们日常办公、学习必不可少的一盏桌面照明工具&#xff0c;因为他能够给我们带来充足的光线。不过大多数时候&#xff0c;我们只关注到了台灯的亮度是否足够&#xff0c;以为只要光线够亮就不会上眼镜&#xff0c;但实际上我们大多数实力下降的原因就和光线有很大…
阅读更多...
大数据技术之 Kettle（PDI）

大数据技术之 Kettle（PDI）

Kettle 第一章 Kettle概述1.1、ETL简介1.2、Kettle简介1.3、作业 和 转换 概念1.4、核心组件1.5、下载安装 第二章 控件使用2.1、初体验&#xff1a;csv 转换 excel 示例2.2、转换2.2.1、输入控件2.2.1.1、表输入 2.2.2、输出控件2.2.2.1、表输出2.2.2.2、更新&插入/更新2.…
阅读更多...
前后端传参：掌握FormData并解决form-data类型传参问题

前后端传参：掌握FormData并解决form-data类型传参问题

目录 第一章 解决问题过程 第二章 对form-data的理解 2.1 使用场景 2.2 了解formData对象的创建与使用 2.3 formData常用方法 2.3.1 构造函数 2.3.2 获取数据 2.3.3 添加数据 2.3.4 修改数据 2.3.5 检查是否有该数据 2.3.6 删除数据 2.3.7 遍历formData里的键值对…
阅读更多...
极狐GitLab DevSecOps 之容器镜像安全扫描

极狐GitLab DevSecOps 之容器镜像安全扫描

容器镜像安全 现状 最近某银行遭受供应链攻击的事件传的沸沸扬扬&#xff0c;安全又双叒叕进入了人们的视野。安全确实是一个非常重要&#xff0c;但是又最容易被忽略的话题。但是现在到了一个不得不人人重视安全&#xff0c;人人为安全负责的时代。尤其以现在非常火爆的云原…
阅读更多...
Mybatis概述和快速入门

Mybatis概述和快速入门

文章目录 Mybatis概述Mybatis概念JDBC 缺点Mybatis 优化 Mybatis快速入门 Mybatis概述 Mybatis概念 &#xff08;1&#xff09;Mybatis是一个半ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;它内部封装了JDBC&#xff0c;开发时只需要关注SQL语句本身&#xff0c…
阅读更多...
电脑上怎么录屏？教你3种方法，轻松搞定！

电脑上怎么录屏？教你3种方法，轻松搞定！

在数字时代&#xff0c;电脑录屏已经成为各行各业的普遍需求&#xff0c;无论是制作教学视频、记录操作步骤&#xff0c;还是制作工作报告。可是很多人不知道电脑上怎么录屏&#xff0c;本文将详细介绍电脑上三种常见的录屏方法&#xff0c;通过这些工具&#xff0c;您可以轻松…
阅读更多...
houdini 神经网络

houdini 神经网络

实现个神经网络的3D可视化&#xff0c;美爆了&#xff01;-腾讯云开发者社区-腾讯云 https://vimeo.com/stefsietz GitHub - julrog/nn_vis: A project for processing neural networks and rendering to gain insights on the architecture and parameters of a model throu…
阅读更多...
Linux驱动（中断、异步通知）：红外对射，并在Qt StatusBus使用指示灯进行显示

Linux驱动（中断、异步通知）：红外对射，并在Qt StatusBus使用指示灯进行显示

本文工作&#xff1a; 1、Linux驱动与应用程序编写&#xff1a;使用了设备树、中断、异步通知知识点&#xff0c;实现了红外对射状态的异步信息提醒。 2、QT程序编写&#xff1a;自定义了一个“文本指示灯”类&#xff0c;并放置在QMainWidget的StatusBus中。 3、C与C混合编程与…
阅读更多...
详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第五节 （基于uni-app封装鸿蒙接口请求库）

详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第五节 （基于uni-app封装鸿蒙接口请求库）

随着鸿蒙系统的兴起,越来越多的app会采用鸿蒙开发。而鸿蒙开发必不可少的就是调用各种接口服务。为了简化接口的调用流程,我们通常会做一层封装。今天就来讲解一下,如何用uni-app封装鸿蒙的接口请求库。 一、新建项目 首先我们要新建一个鸿蒙项目啦&#xff01;当然选择第一个…
阅读更多...
音频ncm格式转mp3格式

音频ncm格式转mp3格式

做个笔记&#xff0c;ncm格式转mp3格式 参考&#xff1a;传送门 import os import json import base64 import struct import logging import binascii from glob import glob from tqdm.auto import tqdm from textwrap import dedent from Crypto.Cipher import AES from mu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023