当前位置： 首页 > news >正文

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

news 2025/7/8 3:11:19

【鸿蒙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对象（不需要显示引用）；

http://www.mrgr.cn/news/21163.html

相关文章：

  • k8s技术架构
  • Linux日志-sar日志
  • AI基础 L2 Agents1
  • 类和对象（中）
  • 灰光模块，彩光模块-介绍
  • Zotero引用参考文献常见问题及解决方法
  • 鸿蒙轻内核M核源码分析系列十一(1) 信号量Semaphore
  • 监理工程师专业划分-注册监理工程师每人最多可以申请两个专业注册
  • 兴业小知识|什么 法拍房保证金还有不予退回的情况
  • Lenze伦茨E82ZBC, E82ZBB E82ZMBRB安装说明手测
  • 考研英语作文高频20大句式总结
  • 如何测试一个算法
  • 使用Selenium WebDriver捕获网络请求
  • 牛客刷题之JZ31.栈的压入、弹出序列（C++）
  • Pytest插件pytest-selenium-让自动化测试更简洁
  • 基于51单片机的智能小车转向控制系统设计与实现
  • 在嵌入式板子上搭建和自定义live555服务器---编译问题和方法整理
  • 基于yolov8的包装盒纸板破损缺陷测系统python源码+onnx模型+评估指标曲线+精美GUI界面
  • 【软件测试】设计测试用例
  • 枚举: C++和Python实现鸡兔同笼问题