HarmonyOS NEXT应用开发边学边玩系列：从零实现一影视APP (三、影视搜索页功能实现)

在HarmonyOS NEXT开发环境中，我们可以使用@nutpi/axios库来简化网络请求的操作。本文将展示如何使用HarmonyOS NEXT框架和@nutpi/axios库，从零开始实现一个简单的影视APP，主要关注影视搜索页的功能实现。

为什么选择@nutpi/axios？

nutpi/axios是坚果派出品的，对axios封装过的鸿蒙HTTP客户端库，用于简化axios库的使用和以最简单的形式写代码。使用nutpi/axios库可以大大简化代码，使网络接口变得简单直观。

项目开源地址：https://atomgit.com/csdn-qq8864/hmmovie

安装nutpi/axios

首先，我们需要在项目中安装nutpi/axios库。

ohpm install @ohos/axios

在这里插入图片描述

实现电影搜索接口

我们使用nutpi/axios库来实现电影搜索接口。先封装一个工具类：

//axiosClient.ets
import {AxiosHttpRequest,HttpPromise} from '@nutpi/axios'
import {AxiosHeaders,AxiosRequestHeaders,AxiosError } from '@nutpi/axios';
import { Log } from './logutil';
import { promptAction } from "@kit.ArkUI";

function showToast(msg:string){
  Log.debug(msg)
  promptAction.showToast({ message: msg })
}

function showLoadingDialog(msg:string){
  Log.debug(msg)
  promptAction.showToast({ message: msg })
}

function hideLoadingDialog() {

}
/**
 * axios请求客户端创建
 */
const axiosClient = new AxiosHttpRequest({
  baseURL: "http://120.27.146.247:8000/api/v1",
  timeout: 10 * 1000,
  checkResultCode: false,
  showLoading:true,
  headers: new AxiosHeaders({
    'Content-Type': 'application/json'
  }) as AxiosRequestHeaders,
  interceptorHooks: {
    requestInterceptor: async (config) => {
      // 在发送请求之前做一些处理，例如打印请求信息
      Log.debug('网络请求Request 请求方法:', `${config.method}`);
      Log.debug('网络请求Request 请求链接:', `${config.url}`);
      Log.debug('网络请求Request Params:', `\n${JSON.stringify(config.params)}`);
      Log.debug('网络请求Request Data:', `${JSON.stringify(config.data)}`);
      // 动态添加或修改header
      //config.headers['X-ATOMGIT-POP-COMMUNITY'] = 'openatom';
      axiosClient.config.showLoading = config.showLoading
      if (config.showLoading) {
        showLoadingDialog("加载中...")
      }
      if (config.checkLoginState) {
        //let hasLogin = await StorageUtils.get(StorageKeys.USER_LOGIN, false)
        //Log.debug('网络请求Request 登录状态校验>>>', `${hasLogin.toString()}`);
        // if (hasLogin) {
        //   return config
        // } else {
        //   if (config.needJumpToLogin) {
        //     //Router.push(RoutePath.TestPage)
        //   }
        //   throw new AxiosError("请登录")
        // }
      }
      return config;
    },
    requestInterceptorCatch: (err) => {
      Log.error("网络请求RequestError", err.toString())
      if (axiosClient.config.showLoading) {
        hideLoadingDialog()
      }
      return err;
    },
    responseInterceptor: (response) => {
      //优先执行自己的请求响应拦截器，在执行通用请求request的
      if (axiosClient.config.showLoading) {
        hideLoadingDialog()
      }
      Log.debug('网络请求响应Response:', `\n${JSON.stringify(response.data)}`);
      if (response.status === 200) {
        // @ts-ignore
        const checkResultCode = response.config.checkResultCode
        if (checkResultCode && response.data.errorCode != 0) {
          showToast(response.data.errorMsg)
          return Promise.reject(response)
        }
        return Promise.resolve(response);
      } else {
        return Promise.reject(response);
      }
    },
    responseInterceptorCatch: (error) => {
      if (axiosClient.config.showLoading) {
        hideLoadingDialog()
      }
      Log.error("网络请求响应异常", error.toString());
      errorHandler(error);
      return Promise.reject(error);
    },
  }
});

function errorHandler(error: any) {
  if (error instanceof AxiosError) {
    //showToast(error.message)
  } else if (error != undefined && error.response != undefined && error.response.status) {
    switch (error.response.status) {
    // 401: 未登录
    // 未登录则跳转登录页面，并携带当前页面的路径
    // 在登录成功后返回当前页面，这一步需要在登录页操作。
      case 401:

        break;
    // 403 token过期
    // 登录过期对用户进行提示
    // 清除本地token和清空vuex中token对象
    // 跳转登录页面
      case 403:
        //showToast("登录过期，请重新登录")
      // 清除token
      // localStorage.removeItem('token');
        break;
    // 404请求不存在
      case 404:
        //showToast("网络请求不存在")
        break;

    // 其他错误，直接抛出错误提示
      default:
        //showToast(error.response.data.message)
    }

  }
}

export  {axiosClient,HttpPromise};

接口的实现很简单啦：

// 定义电影搜索接口
// 7.电影搜索接口
export const movieSearch =  (q:string,start:number,count:number): HttpPromise<SearchResp> => axiosClient.post({url:'/searchmovie',data: {  q:q,start:start,count:count }});

代码讲解

  1. 创建axios客户端：我们封装了一个axios客户端axiosClient工具类，并设置了基础URL和请求超时时间。
  2. 定义接口函数：movieSearch函数接收三个参数：q（查询字符串）、start（起始位置）和count（数量），并返回一个Promise对象。

Search组件和List组件使用

接下来，我们将实现影视搜索页的组件，包括Search组件和List组件的使用。

import { movieSearch } from '../../common/api/movie';
import { SearchRespData } from '../../common/bean/SearchResp';
import { Log } from '../../utils/logutil';
import { BusinessError } from '@kit.BasicServicesKit';

@Builder
export function SearchPageBuilder() {
  SearchPage()
}

@Component
struct SearchPage {
  pageStack: NavPathStack = new NavPathStack()
  controller: SearchController = new SearchController()
  @State changeValue: string = ''
  @State submitValue: string = ''
  @State searchList: SearchRespData[] = []

  // 组件生命周期
  aboutToAppear() {
    Log.info('SearchPage aboutToAppear');
  }

  onPageShow(): void {
    this.controller.caretPosition(0)
  }

  build() {
    NavDestination() {
      Column({ space: 0 }) {
        Search({ controller: this.controller, value: this.changeValue, placeholder: '请输入片名' })
          .searchButton('搜索')
          .width('95%')
          .height(45)
          .maxLength(30)
          .backgroundColor('#F5F5F5')
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .textFont({ size: 14, weight: 400 })
          .focusable(true)
          .defaultFocus(true)
          .onSubmit((value: string) => {
            this.submitValue = value
          })
          .onChange((value: string) => {
            this.changeValue = value
            movieSearch(value, 1, 10).then((res) => {
              Log.debug(res.data.message)
              Log.debug("request", "res.data.code:%{public}d", res.data.code)
              if (res.data.code == 0) {
                this.searchList = res.data.data
              }
            })
              .catch((err: BusinessError) => {
                Log.debug("request", "err.data.code:%d", err.code)
                Log.debug("request", err.message)
              });
          })
          .margin({ left: 20, right: 20 })

        // list组件
        List({ space: 10 }) {
          ForEach(this.searchList, (item: SearchRespData, idx) => {
            ListItem() {
              Column({ space: 0 }) {
                Row() {
                  Stack() {
                    Image(item.cover).objectFit(ImageFit.Cover)
                      .borderRadius(5).zIndex(1)

                    Text(item.year.substring(0, 10))
                      .padding(5)
                      .margin({ top: 80 })
                      .width('100%')
                      .height(20)
                      .textAlign(TextAlign.Center)
                      .maxLines(2)
                      .textOverflow({ overflow: TextOverflow.Clip })
                      .fontSize(12)
                      .fontColor(Color.White)
                      .opacity(100) // 设置标题的透明度
                      .backgroundColor('#808080AA') // 背景颜色设为透明
                      .zIndex(2)
                  }.width(100).height(100).margin({ left: 10 })

                  Column({ space: 15 }) {
                    Text(item.title).fontSize(16).fontWeight(FontWeight.Bold).align(Alignment.Start).width('100%')
                    Text(item.genre).fontSize(12).align(Alignment.Start).width('100%')
                    Text('评分: ' + item.rate).fontSize(12)
                      .align(Alignment.Start).width('100%')
                  }.justifyContent(FlexAlign.Start).padding(5).margin({ left: 10 })
                }.size({ width: '100%', height: 100 })
              }.size({ width: '100%', height: 100 })
            }.onClick(() => {
              this.pageStack.pushDestinationByName("MovieDetailPage", { id: item.id }).catch((e: Error) => {
                console.log(`catch exception: ${JSON.stringify(e)}`)
              }).then(() => {
                // 跳转成功
              });
            })
          }, (itm: SearchRespData) => itm.id)
        }
        .divider({ strokeWidth: 2, color: '#F1F3F5' })
        .listDirection(Axis.Vertical)
        .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })

      }
      .width('100%')
      .height('100%')
    }.title("影视搜索")
    .width('100%')
    .height('100%')
    .onReady(ctx => {
      this.pageStack = ctx.pathStack
    })
  }
}

代码讲解

  1. 导入模块：我们导入了之前定义的movieSearch函数，以及一些其他必要的模块。
  2. 定义组件状态：
    • changeValue：用于存储当前搜索框中的输入值。
    • submitValue：用于存储用户提交的搜索值。
    • searchList：用于存储搜索结果的列表。
  3. 组件生命周期：
    • aboutToAppear：组件即将出现在页面时执行的日志记录。
    • onPageShow：组件显示时重置光标位置。
  4. 构建页面：
    • NavDestination：定义页面的导航目的地。
    • Column：垂直布局容器。
    • Search：搜索框组件，设置了搜索按钮、宽度、高度、最大长度等属性，并绑定了onSubmit和onChange事件。
    • List：列表组件，用于显示搜索结果。
      • ForEach：遍历searchList数组，为每个搜索结果项创建一个ListItem。
      • ListItem：列表项组件，包含电影的封面、年份、标题、类型和评分。
      • onClick：点击列表项时，导航到电影详情页。
  5. 列表样式：
    • divider：设置列表项之间的分隔线。
    • listDirection：设置列表的方向为垂直。
    • edgeEffect：设置边缘效果为弹簧效果。

总结

通过本文，我们展示了如何使用HarmonyOS NEXT框架和nutpi/axios库来实现一个简单的影视搜索页。nutpi/axios库的使用大大简化了网络请求的操作，使代码更加简洁易读。希望这篇文章对你有所帮助，让你在开发HarmonyOS NEXT应用时更加得心应手。

如果你有任何问题或建议，欢迎在评论区留言交流！

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

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

相关文章

高级运维：shell练习2

高级运维：shell练习2

1、需求&#xff1a;判断192.168.1.0/24网络中&#xff0c;当前在线的ip有哪些&#xff0c;并编写脚本打印出来。 vim check.sh #!/bin/bash# 定义网络前缀 network_prefix"192.168.1"# 循环遍历1-254的IP for i in {1..254}; do# 构造完整的IP地址ip"$network_…
阅读更多...
好用的php商城源码有哪些？

好用的php商城源码有哪些？

选择一个优秀的商城工具&#xff0c;能更好地帮助大家建立一个好用的商城系统。目前比较流行的都是开源PHP商城系统&#xff0c;那么现实中都有哪些好用的PHP商城源码值得推荐呢&#xff1f;下面就带大家一起来了解一下。 1.TigShop 【推荐指数】&#xff1a;★★★★★☆ 【推…
阅读更多...
Docker Desktop 构建java8基础镜像jdk安装配置失效解决

Docker Desktop 构建java8基础镜像jdk安装配置失效解决

Docker Desktop 构建java8基础镜像jdk安装配置失效解决 文章目录 1.问题2.解决方法3.总结 1.问题 之前的好几篇文章中分享了在Linux(centOs上)和windows10上使用docker和docker Desktop环境构建java8的最小jre基础镜像&#xff0c;前几天我使用Docker Desktop环境重新构建了一个…
阅读更多...
Open FPV VTX开源之嵌入式OSD配置

Open FPV VTX开源之嵌入式OSD配置

Open FPV VTX开源之嵌入式OSD配置 1. 源由2. 安装3. 配置步骤一&#xff1a;备份/etc/telemetry.conf步骤二&#xff1a;修改/etc/telemetry.conf步骤三&#xff1a;配置时区步骤四&#xff1a;重启摄像头 4. 实测5. 参考资料 1. 源由 穿越机模拟图传延迟通常在10ms左右。 最…
阅读更多...
数据平台浅理解

数据平台浅理解

定义 数据平台架构是指用于收集、存储、处理和分析数据的一系列组件、技术和流程的整体架构设计。它就像是一个复杂的数据生态系统的蓝图&#xff0c;旨在高效地管理数据从产生源头到产生价值的整个生命周期。 主要层次 数据源层 这是数据的起点&#xff0c;包含各种类型的数据…
阅读更多...
CSS3的aria-hidden学习

CSS3的aria-hidden学习

前言 aria-hidden 属性可用于隐藏非交互内容&#xff0c;使其在无障碍 API 中不可见。即当aria-hidden"true" 添加到一个元素会将该元素及其所有子元素从无障碍树中移除&#xff0c;这可以通过隐藏来改善辅助技术用户的体验&#xff1a; 纯装饰性内容&#xff0c;如…
阅读更多...
【ArcGIS初学】产生随机点计算混淆矩阵

【ArcGIS初学】产生随机点计算混淆矩阵

混淆矩阵&#xff1a;用于比较分类结果和地表真实信息 总体精度(overall accuracy) :指对角线上所有样本的像元数(正确分类的像元数)除以所有像元数。 生产者精度(producers accuracy) &#xff1a;某类中正确分类的像元数除以参考数据中该类的像元数(列方向)&#xff0c;又称…
阅读更多...
认识机器学习中的结构风险最小化准则

认识机器学习中的结构风险最小化准则

上一篇文章我们学习了关于经验风险最小化准则&#xff0c;其核心思想是通过最小化训练数据上的损失函数来优化模型参数&#xff0c;从而提高模型在训练集上的表现。但是这也会导致一个问题&#xff0c;经验风险最小化原则很容易导致模型在训练集上错误率很低&#xff0c;但在未…
阅读更多...
设计模式-工厂模式/抽象工厂模式

设计模式-工厂模式/抽象工厂模式

工厂模式 定义 定义一个创建对象的接口&#xff0c;让子类决定实列化哪一个类&#xff0c;工厂模式使一个类的实例化延迟到其子类&#xff1b; 工厂方法模式是简单工厂模式的延伸。在工厂方法模式中&#xff0c;核心工厂类不在负责产品的创建&#xff0c;而是将具体的创建工作…
阅读更多...
Chatper 4: Implementing a GPT model from Scratch To Generate Text

Chatper 4: Implementing a GPT model from Scratch To Generate Text

文章目录 4 Implementing a GPT model from Scratch To Generate Text4.1 Coding an LLM architecture4.2 Normalizing activations with layer normalization4.3 Implementing a feed forward network with GELU activations4.4 Adding shortcut connections4.5 Connecting at…
阅读更多...
Unity ShaderGraph中Lit转换成URP的LitShader

Unity ShaderGraph中Lit转换成URP的LitShader

ShaderGraph中的LitShader如下&#xff1a; 在顶点和片元着色器暴露出了上图中的几个参数&#xff0c;要转换成URPLitShaderLab,首先要找到这几个参数&#xff0c;打开LitShader&#xff0c;找到第一个Pass&#xff0c;可以看到下图中的顶点和片元的定义函数&#xff0c;还有引…
阅读更多...
uni-app的学习

uni-app的学习

uni-app 有着跨平台支持、丰富的插件和生态系统、高性能、集成开发工具HBuilderX的配合使用。允许使用者仅通过一套代码发布到多平台使用。 uni-app官网 uni-app 是一个适合开发跨平台移动应用和小程序的框架&#xff0c;能够大幅提高开发效率。 一、了解 1.1 工具准备 从Git…
阅读更多...
USRP X310 Windows 烧录镜像

USRP X310 Windows 烧录镜像

说明 USRP-X 系列设备包含两个用于两个以太网通道的 SFP 端口。由于 SFP 端口支持 1 千兆 (SFP) 和 10 千兆 (SFP) 收发器&#xff0c;因此 UHD 附带了多个 FPGA 图像&#xff0c;以确定上述接口的行为。 注意&#xff1a;Aurora 图像需要从 FPGA 源代码手动构建。 FPGA 图像…
阅读更多...
Sprint Boot教程之五十八：动态启动/停止 Kafka 监听器

Sprint Boot教程之五十八：动态启动/停止 Kafka 监听器

Spring Boot – 动态启动/停止 Kafka 监听器 当 Spring Boot 应用程序启动时&#xff0c;Kafka Listener 的默认行为是开始监听某个主题。但是&#xff0c;有些情况下我们不想在应用程序启动后立即启动它。 要动态启动或停止 Kafka Listener&#xff0c;我们需要三种主要方法…
阅读更多...
Docker save load 镜像 tag 为 ＜none＞

Docker save load 镜像 tag 为 ＜none＞

一、场景分析 我从 docker hub 上拉了这么一个镜像。 docker pull tomcat:8.5-jre8-alpine 我用 docker save 命令想把它导出成 tar 文件以便拷贝到内网机器上使用。 docker save -o tomcat-8.5-jre8-alpine.tar.gz 镜像ID 当我把这个镜像传到别的机器&#xff0c;并用 dock…
阅读更多...
计算机网络（三）——局域网和广域网

计算机网络（三）——局域网和广域网

一、局域网 特点&#xff1a;覆盖较小的地理范围&#xff1b;具有较低的时延和误码率&#xff1b;使用双绞线、同轴电缆、光纤传输&#xff0c;传输效率高&#xff1b;局域网内各节点之间采用以帧为单位的数据传输&#xff1b;支持单播、广播和多播&#xff08;单播指点对点通信…
阅读更多...
浅谈云计算01 | 云计算服务的特点

浅谈云计算01 | 云计算服务的特点

在当今数字化时代&#xff0c;云计算作为一种强大的技术解决方案&#xff0c;正逐渐改变着企业和个人对信息技术的使用方式。本文将详细探讨云计算的五个主要特点&#xff0c;包括按需自助服务、广泛的网络接入、资源池化、快速弹性伸缩以及可计量服务。 一、按需自助服务 云…
阅读更多...
【Qt】01－了解QT

【Qt】01－了解QT

踏入QT的殿堂之路 前言一、创建工程文件1.1 步骤介绍1.2 编译介绍方法1、方法2、编译成功 二、了解框架2.1 main.cpp2.2 .Pro文件2.2.1 注释需要打井号。2.2.2 F1带你进入帮助模式2.2.3 build文件 2.3 构造函数 三、编写工程3.1 main代码3.2 结果展示 四、指定父对象4.1 main代…
阅读更多...
DDD - 微服务设计与领域驱动设计实战(上)_统一建模语言及事件风暴会议

DDD - 微服务设计与领域驱动设计实战(上)_统一建模语言及事件风暴会议

文章目录 Pre概述业务流程需求分析的困境统一语言建模事件风暴会议什么是事件风暴&#xff08;Event Storming&#xff09;事件风暴会议 总结 Pre DDD - 软件退化原因及案例分析 DDD - 如何运用 DDD 进行软件设计 DDD - 如何运用 DDD 进行数据库设计 DDD - 服务、实体与值对…
阅读更多...
ssh2详细使用步骤，以及常用方法介绍

ssh2详细使用步骤，以及常用方法介绍

开源地址&#xff1a;https://github.com/mscdex/ssh2 ssh2 是一个功能强大的 Node.js 库&#xff0c;用于通过 SSH 协议与远程服务器交互。它支持命令执行、文件上传下载、端口转发等操作&#xff0c;常用于自动化脚本和远程服务器管理。 下面是 ssh2 的详细使用步骤和常用方…
阅读更多...
最新文章

Copyright @ 2022~2023