【鸿蒙HarmonyOS NEXT】调用后台接口及List组件渲染

2024-09-07 10:12
文章标签 接口 组件 调用 list 后台 渲染 next 鸿蒙 harmonyos

本文主要是介绍【鸿蒙HarmonyOS NEXT】调用后台接口及List组件渲染，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【鸿蒙HarmonyOS NEXT】调用后台接口及List组件渲染

  • 一、环境说明
  • 二、调用后台接口及List组件渲染
  • 三、总结

一、环境说明

  1. DevEco Studio 版本：
    在这里插入图片描述

  2. API版本：以12为主
    在这里插入图片描述

二、调用后台接口及List组件渲染

  1. 后台接口及返回数据分析
    在这里插入图片描述
    JSON数据格式如下：

    {"code": 0,"data": {"total": 6,"pageSize": 10,"totalPage": 1,"currPage": 1,"list": [{"id": 31,"biaoti": "标题1","neirong": "内容1","shipin": "","fabushijian": "2024-08-05 11:59:42","faburen": "发布人1","fengmian": "http://localhost:8080/springboot49j18/upload/xinwen_fengmian1.jpg","thumbsupnum": 1,"crazilynum": 1,"clicktime": "2024-08-05 12:00:04","clicknum": 4,"addtime": "2024-08-05 11:59:29"},{"id": 32,"biaoti": "标题2","neirong": "内容2","shipin": "","fabushijian": "2024-08-05 11:59:42","faburen": "发布人2","fengmian": "http://localhost:8080/springboot49j18/upload/xinwen_fengmian2.jpg","thumbsupnum": 2,"crazilynum": 2,"clicktime": "2024-08-05 12:00:04","clicknum": 5,"addtime": "2024-08-05 11:59:29"},{"id": 33,"biaoti": "标题3","neirong": "内容3","shipin": "","fabushijian": "2024-08-05 11:59:42","faburen": "发布人3","fengmian": "http://localhost:8080/springboot49j18/upload/xinwen_fengmian3.jpg","thumbsupnum": 3,"crazilynum": 3,"clicktime": "2024-08-05 12:00:04","clicknum": 3,"addtime": "2024-08-05 11:59:29"},{"id": 34,"biaoti": "标题4","neirong": "内容4","shipin": "","fabushijian": "2024-08-05 11:59:42","faburen": "发布人4","fengmian": "http://localhost:8080/springboot49j18/upload/xinwen_fengmian4.jpg","thumbsupnum": 4,"crazilynum": 4,"clicktime": "2024-08-05 12:01:05","clicknum": 7,"addtime": "2024-08-05 11:59:29"},{"id": 35,"biaoti": "标题5","neirong": "内容5","shipin": "","fabushijian": "2024-08-05 11:59:42","faburen": "发布人5","fengmian": "http://localhost:8080/springboot49j18/upload/xinwen_fengmian5.jpg","thumbsupnum": 5,"crazilynum": 5,"clicktime": "2024-08-05 12:00:04","clicknum": 5,"addtime": "2024-08-05 11:59:29"},{"id": 36,"biaoti": "标题6","neirong": "<p>66232</p>","shipin": "","fabushijian": "2024-08-05 11:59:42","faburen": "发布人6","fengmian": "http://localhost:8080/springboot49j18/upload/xinwen_fengmian6.jpg","thumbsupnum": 6,"crazilynum": 6,"clicktime": "2024-08-05 12:00:50","clicknum": 12,"addtime": "2024-08-05 11:59:29"}]}
}

  2. 新建后台数据相关的实体类
    新建common目录并在其下新建bean目录，然后在bean目录下新建NewsDataItem.ets类，用于封装整个后台JSON数据的最内层数据：

    /*** 用于定义具体的数据项* {"id": 31,"biaoti": "标题1","neirong": "内容1","shipin": "","fabushijian": "2024-08-05 11:59:42","faburen": "发布人1","fengmian": "http://localhost:8080/springboot49j18/upload/xinwen_fengmian1.jpg","thumbsupnum": 1,"crazilynum": 1,"clicktime": "2024-08-05 12:00:04","clicknum": 4,"addtime": "2024-08-05 11:59:29"}*/export default class NewsDataItem {public id: numberpublic biaoti: stringpublic neirong: stringpublic shipin: stringpublic fabushijian: stringpublic faburen: stringpublic fengmian: string// API12的语法，如果构造函数中该属性作为形式参数且是可选参数时，要保持类型一致public thumbsupnum: numberpublic crazilynum: numberpublic clicktime: stringpublic clicknum: numberpublic addtime: string/*** 构造函数* @param id* @param biaoti* @param neirong* @param shipin* @param fabushijian* @param faburen* @param fengmian* @param thumbsupnum* @param crazilynum* @param clicktime* @param clicknum* @param addtime*/constructor(id: number, biaoti: string, neirong: string, shipin: string, fabushijian: string,faburen: string, fengmian: string, thumbsupnum: number, crazilynum: number, clicktime: string,clicknum: number, addtime: string) {this.id = idthis.biaoti = biaotithis.neirong = neirongthis.shipin = shipinthis.fabushijian = fabushijianthis.faburen = faburenthis.fengmian = fengmianthis.thumbsupnum = thumbsupnumthis.crazilynum = crazilynumthis.clicktime = clicktimethis.clicknum = clicknumthis.addtime = addtime}
}

    然后在bean目录下新建NewsData.ets类，用于封装整个后台JSON数据的中间层数据：

    /*** 定义用于接收后台返回的json中间层数据* "data": {"total": 6,"pageSize": 10,"totalPage": 1,"currPage": 1,"list": []*/
import NewsDataItem from './NewsDataItem'export default class NewsData{public  total: numberpublic  pageSize: numberpublic  totalPage: numberpublic  currPage: numberpublic  list: Array<NewsDataItem>constructor(total: number, pageSize: number, totalPage: number, currPage: number, list: Array<NewsDataItem>) {this.total = totalthis.pageSize = pageSizethis.totalPage = totalPagethis.currPage = currPagethis.list = list}
}

    然后在bean目录下新建NewsResultData.ets类，用于封装整个后台JSON数据的最外层数据：

    /*** 定义用于接收后台返回的json最外层数据* {*    code: 0,*    data: {}* }*/
import NewsData from './NewsData';export default class NewsResultData extends Object{public code: number;public data: NewsData;constructor(code: number,data: NewsData) {super();this.code = code;this.data = data;}
}

  3. 新建ListComponentPage.ets页面，实现aboutToAppear()函数，然后在该函数中调用后台接口，最后用List组件渲染后台数据，具体代码如下：

    import NewsDataItem from '../common/bean/NewsDataItem'
import { http } from '@kit.NetworkKit';
import NewsResultData from '../common/bean/NewsResultData';
import NewsData from '../common/bean/NewsData';@Preview
@Entry
@Component
struct ListComponentPage {private httpReq = http.createHttp()@State listData: Array<NewsDataItem> = []aboutToAppear(): void {// 调用接口this.httpReq.request('http://localhost:8080/springboot/xinwen/list').then((resp) => {//console.info("---调用后台接口返回---", JSON.stringify(resp))if (resp !== undefined && resp !== null) {if (resp.responseCode == 200) {//console.info("---resp.result---", resp.result)let newsResult: NewsResultData = JSON.parse(resp.result.toString())//console.info("---newsData---", newsResult.code)if (newsResult !== undefined && resp !== null) {let newsData: NewsData = newsResult.datathis.listData = newsData.list}}}}).catch((reason: object) => {console.info("---接口错误信息---", JSON.stringify(reason))})}build() {Column() {List({ space: 10 }) {ForEach(this.listData, (item: NewsDataItem) => {ListItem() {Text(`${item.biaoti}`).width('100%').height(100).fontSize(20).fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0x007DFF)}})}// 分割线.divider({strokeWidth: 5,color: Color.Red,startMargin: 10,endMargin: 10})// 设置成水平方向// .listDirection(Axis.Horizontal)// 滑动事件.onScrollIndex((firstIndex: number, lastIndex: number) => {console.info('滑动起始位置索引值' + firstIndex)console.info('滑动结束位置索引值' + lastIndex)}).onDidScroll((scrollOffset: number, scrollState: ScrollState) => {console.info('滑动偏移量' + scrollOffset)console.info('当前滑动状态' + scrollState)}).onReachStart(() => {console.info('列表起始位置到达')}).onReachEnd(() => {console.info('列表末尾位置到达')}).onScrollStop(() => {console.info('列表滑动停止')})}.padding(12).height('100%').backgroundColor(0xF1F3F5)}
}

  4. 重新编译，运行效果如下：
    在这里插入图片描述

三、总结

有如下关键几点：

  1. 调用后台接口，需要引入http模块或者其他诸如Ajax、axios等网络请求模块；
  2. 如果是需要在页面被创建的时候调用后台接口，则需要在aboutToAppear()中进行调用，如需要在页面显示时需要调用后台接口加载数据，则可以在onPageShow()函数中进行调用。根据实际业务结合组件的生命周期进行合适的调用；
  3. 如使用JSON.parse报错Structural typing is not supported (arkts-no-structural-typing)，其原因是引入import { JSON } from '@kit.ArkTS';模块中的JSON，需要将其删除掉，使用内置的JSON对象（不需要显示引用）；

这篇关于【鸿蒙HarmonyOS NEXT】调用后台接口及List组件渲染的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1144772。

相关文章

Java调用DeepSeek API的最佳实践及详细代码示例

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》：本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.
阅读更多...
Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

《DeepseekR1模型本地化部署+API接口调用详细教程(释放AI生产力)》本文介绍了本地部署DeepSeekR1模型和通过API调用将其集成到VSCode中的过程,作者详细步骤展示了如何下载和... 目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装oll
阅读更多...
MyBatis-Flex BaseMapper的接口基本用法小结

MyBatis-Flex BaseMapper的接口基本用法小结

《MyBatis-FlexBaseMapper的接口基本用法小结》本文主要介绍了MyBatis-FlexBaseMapper的接口基本用法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具... 目录MyBATis-Flex简单介绍特性基础方法INSERT① insert② insertSelec
阅读更多...
Spring排序机制之接口与注解的使用方法

Spring排序机制之接口与注解的使用方法

《Spring排序机制之接口与注解的使用方法》本文介绍了Spring中多种排序机制,包括Ordered接口、PriorityOrdered接口、@Order注解和@Priority注解,提供了详细示例... 目录一、Spring 排序的需求场景二、Spring 中的排序机制1、Ordered 接口2、Pri
阅读更多...
一分钟带你上手Python调用DeepSeek的API

一分钟带你上手Python调用DeepSeek的API

《一分钟带你上手Python调用DeepSeek的API》最近DeepSeek非常火,作为一枚对前言技术非常关注的程序员来说,自然都想对接DeepSeek的API来体验一把,下面小编就来为大家介绍一下... 目录前言免费体验API-Key申请首次调用API基本概念最小单元推理模型智能体自定义界面总结前言最
阅读更多...
Idea实现接口的方法上无法添加@Override注解的解决方案

Idea实现接口的方法上无法添加@Override注解的解决方案

《Idea实现接口的方法上无法添加@Override注解的解决方案》文章介绍了在IDEA中实现接口方法时无法添加@Override注解的问题及其解决方法,主要步骤包括更改项目结构中的Languagel... 目录Idea实现接China编程口的方法上无法添加@javascriptOverride注解错误原因解决方
阅读更多...
JAVA调用Deepseek的api完成基本对话简单代码示例

JAVA调用Deepseek的api完成基本对话简单代码示例

《JAVA调用Deepseek的api完成基本对话简单代码示例》：本文主要介绍JAVA调用Deepseek的api完成基本对话的相关资料,文中详细讲解了如何获取DeepSeekAPI密钥、添加H... 获取API密钥首先，从DeepSeek平台获取API密钥，用于身份验证。添加HTTP客户端依赖使用Jav
阅读更多...
C#比较两个List集合内容是否相同的几种方法

C#比较两个List集合内容是否相同的几种方法

《C#比较两个List集合内容是否相同的几种方法》本文详细介绍了在C#中比较两个List集合内容是否相同的方法,包括非自定义类和自定义类的元素比较,对于非自定义类,可以使用SequenceEqual、... 目录 一、非自定义类的元素比较1. 使用 SequenceEqual 方法（顺序和内容都相等）2.
阅读更多...
redis防止短信恶意调用的实现

redis防止短信恶意调用的实现

《redis防止短信恶意调用的实现》本文主要介绍了在场景登录或注册接口中使用短信验证码时遇到的恶意调用问题,并通过使用Redis分布式锁来解决,具有一定的参考价值,感兴趣的可以了解一下... 目录1.场景2.排查3.解决方案3.1 Redis锁实现3.2 方法调用1.场景登录或注册接口中，使用短信验证码场
阅读更多...
使用C/C++调用libcurl调试消息的方式

使用C/C++调用libcurl调试消息的方式

《使用C/C++调用libcurl调试消息的方式》在使用C/C++调用libcurl进行HTTP请求时,有时我们需要查看请求的/应答消息的内容（包括请求头和请求体）以方便调试,libcurl提供了多种... 目录1. libcurl 调试工具简介2. 输出请求消息使用 CURLOPT_VERBOSE使用 C
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2