团队介绍作者:徐庆
团队:坚果派[1]
公众号:“大前端之旅”[2]
润开鸿生态技术专家,华为HDE,CSDN博客专家,CSDN超级个体,CSDN特邀嘉宾,InfoQ签约作者,OpenHarmony布道师,电子发烧友专家博客,51CTO博客专家,擅长HarmonyOS/OpenHarmony应用开发、熟悉服务卡片开发。欢迎合作。
前言:各位同学有段时间没有见面 因为一直很忙所以就没有去更新博客。最近有在学习这个鸿蒙的ark ui开发 因为鸿蒙不是发布了一个鸿蒙next的测试版本 明年会启动纯血鸿蒙应用 所以我就想提前给大家写一些博客文章
效果图图片
image-20231206202427615图片
image-20231206202438894响应数据效果图片
image-20231206202449876使用本地网络服务图片
image-20231206202459875接口说明:接口是我本地使用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@Componentstruct 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 === ''