【鸿蒙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。

相关文章

Vue3视频播放组件 vue3-video-play使用方式

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v
阅读更多...
MySQL中C接口的实现

MySQL中C接口的实现

《MySQL中C接口的实现》本节内容介绍使用C/C++访问数据库,包括对数据库的增删查改操作,主要是学习一些接口的调用,具有一定的参考价值,感兴趣的可以了解一下... 目录准备mysql库使用mysql库编译文件官方API文档对象的创建和关闭链接数据库下达sql指令select语句前言：本节内容介绍使用C/
阅读更多...
MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决

MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决

《MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决》MyBatis默认开启一级缓存,同一事务中循环调用查询方法时会重复使用缓存数据,导致获取的序列主键值均为1,... 目录问题原因解决办法如果是存储过程总结问题myBATis有如下代码获取序列作为主键IdMappe
阅读更多...
90%的人第一步就错了! 顺利登录wifi路由器后台的技巧

90%的人第一步就错了! 顺利登录wifi路由器后台的技巧

《90%的人第一步就错了!顺利登录wifi路由器后台的技巧》登录Wi-Fi路由器，其实就是进入它的后台管理页面，很多朋友不知道该怎么进入路由器后台设置，感兴趣的朋友可以花3分钟了解一下... 你是不是也遇到过这种情况：家里网速突然变慢、想改WiFi密码却不知道从哪进路由器、新装宽带后完全不知道怎么设置？别慌
阅读更多...
使用Go调用第三方API的方法详解

使用Go调用第三方API的方法详解

《使用Go调用第三方API的方法详解》在现代应用开发中,调用第三方API是非常常见的场景,比如获取天气预报、翻译文本、发送短信等,Go作为一门高效并发的编程语言,拥有强大的标准库和丰富的第三方库,可以... 目录引言一、准备工作二、案例1：调用天气查询 API1. 注册并获取 API Key2. 代码实现3
阅读更多...
基于Go语言开发一个 IP 归属地查询接口工具

基于Go语言开发一个 IP 归属地查询接口工具

《基于Go语言开发一个IP归属地查询接口工具》在日常开发中,IP地址归属地查询是一个常见需求,本文将带大家使用Go语言快速开发一个IP归属地查询接口服务,有需要的小伙伴可以了解下... 目录功能目标技术栈项目结构核心代码（main.go）使用方法扩展功能总结在日常开发中，IP 地址归属地查询是一个常见需求：
阅读更多...
SpringBoot分段处理List集合多线程批量插入数据方式

SpringBoot分段处理List集合多线程批量插入数据方式

《SpringBoot分段处理List集合多线程批量插入数据方式》文章介绍如何处理大数据量List批量插入数据库的优化方案：通过拆分List并分配独立线程处理,结合Spring线程池与异步方法提升效率... 目录项目场景解决方案1.实体类2.Mapper3.spring容器注入线程池bejsan对象4.创建
阅读更多...
Vue和React受控组件的区别小结

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一：直接修改事件参数写法二：通过ref引用 DOMVu
阅读更多...
SpringBoot实现不同接口指定上传文件大小的具体步骤

SpringBoot实现不同接口指定上传文件大小的具体步骤

《SpringBoot实现不同接口指定上传文件大小的具体步骤》：本文主要介绍在SpringBoot中通过自定义注解、AOP拦截和配置文件实现不同接口上传文件大小限制的方法,强调需设置全局阈值远大于... 目录一  springboot实现不同接口指定文件大小1.1 思路说明1.2 工程启动说明二 具体实施2
阅读更多...
Java调用Python脚本实现HelloWorld的示例详解

Java调用Python脚本实现HelloWorld的示例详解

《Java调用Python脚本实现HelloWorld的示例详解》作为程序员,我们经常会遇到需要在Java项目中调用Python脚本的场景,下面我们来看看如何从基础到进阶,一步步实现Java与Pyth... 目录一、环境准备二、基础调用：使用 Runtime.exec()2.1 实现步骤2.2 代码解析三、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2