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

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Git创建项目

Git创建项目

方法一 1.在gitee中新建仓库demo01&#xff0c;并勾选开源许可证&#xff0c;完成后gitee上面的项目demo01里只包含一个LICENSE文件 2.直接在本地电脑中新建项目文件夹demo01&#xff0c;双击进入这个文件夹&#xff0c;右键Git bash here&#xff0c;输入 git clone https:…
阅读更多...
跨域问题(CORS)

跨域问题(CORS)

文章目录 介绍解决一、添加跨域头&#xff0c;允许跨域1.后端配置CORS策略(4种方法)2.配置nginx 二、代理 介绍 跨域资源共享&#xff08;CORS, Cross-Origin Resource Sharing&#xff09;是浏览器的一个安全机制&#xff0c;用来防止来自一个域的网页对另一个域下的资源进行…
阅读更多...
Linux操作系统在虚拟机VM上的安装【CentOS版本】

Linux操作系统在虚拟机VM上的安装【CentOS版本】

目录 准备工作 "CPU虚拟化"的方法 VMware的安装 Linux镜像文件的下载 开始安装 声明 新建虚拟机 安装CentOS7.6 配置Linux(CentOS7.6)操作系统 配置分区【学习者可以直接点击自动配置分区&#xff0c;不过还是建议学习一下手动分区】 分区原则 添加分区 …
阅读更多...
提示工程颠覆：DSPy 引领全新范式革命

提示工程颠覆：DSPy 引领全新范式革命

几个月前，我清楚地记得，Prompt Engineering 还是热门话题。就业市场上充斥着提示工程师的岗位，仿佛这是未来的必备技能。 然而，现在情况已经大不相同了。提示工程并不是一门艺术或科学，更像是“聪明的汉斯”现象——人类为系统提供了必要的背景，以便系统能更好地作出回应…
阅读更多...
Maven聚合与继承

Maven聚合与继承

聚合 当我们一次想要构建多个项目时&#xff0c;而不是到每一个模块的目录下分别执行mvn命令。这个时候就需要使用到maven的聚合特性 这里第一个特殊的地方是packaging&#xff0c;值设置为pom。我们正常开发的其他模块中都没有声明packaging&#xff0c;默认使用了默认值jar&a…
阅读更多...
【Qt】仿照qq界面的设计

【Qt】仿照qq界面的设计

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug>//QT中信息调试类&#xff0c;用于输出数据&#xff0c;无需使用该类的实例化对象&#xff0c;直接使用成员函数即可 #include <QIcon>//图标类 #include <QPushButton&…
阅读更多...
代码随想录——回文子串（Leetcode 647）

代码随想录——回文子串（Leetcode 647）

题目链接 我的题解&#xff08;双指针&#xff09; 思路&#xff1a; 当然&#xff0c;以下是对您提供的代码的解释&#xff1a; class Solution {public int countSubstrings(String s) {// 初始化回文子字符串的数量int count 0;// 遍历字符串的每个字符&#xff0c;使用…
阅读更多...
综合评价 | 基于熵权-变异系数-博弈组合法的综合评价模型（Matlab）

综合评价 | 基于熵权-变异系数-博弈组合法的综合评价模型（Matlab）

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 根据信息熵的定义&#xff0c;对于某项指标&#xff0c;可以用熵值来判断某个指标的离散程度&#xff0c;其信息熵值越小&#xff0c;指标的离散程度越大&#xff0c; 该指标对综合评价的影响&#xff08;即权重&…
阅读更多...
基于鸿道Intewell操作系统的运动控制系统方案

基于鸿道Intewell操作系统的运动控制系统方案

随着工业控制行业的蓬勃发展&#xff0c;操作系统实时与非实时业务的深度融合应用需求日益增长&#xff0c;特别是在Windows或Linux平台上处理机器视觉等复杂场景时&#xff0c;传统实时操作系统&#xff08;RTOS&#xff09;面临显著挑战。这些挑战主要体现在两方面&#xff1…
阅读更多...
欢迎体验 tuya open-sdk for arduino

欢迎体验 tuya open-sdk for arduino

我们很高兴地宣布 tuya open-sdk 1.0.0 发布&#xff0c;tuya open-sdk 包括&#xff1a;https://github.com/tuya/tuya-open-sdk-for-device 和 https://github.com/tuya/arduino-tuyaopen 等多个系列&#xff0c;1.1.0 版本正在紧张开发中&#xff0c;敬请期待&#xff01; …
阅读更多...
视频监控系统布局策略：EasyCVR视频汇聚平台构建高效、全面的安全防线

视频监控系统布局策略：EasyCVR视频汇聚平台构建高效、全面的安全防线

随着科技的飞速发展&#xff0c;视频监控系统已成为现代社会安全防范的重要组成部分&#xff0c;广泛应用于公共场所、企业园区、住宅小区等各个领域。一个科学合理的视频监控系统布局与选型策略&#xff0c;不仅能够显著提升安全监控的效率和效果&#xff0c;还能在关键时刻提…
阅读更多...
DNN学习平台（GoogleNet、SSD、FastRCNN、Yolov3）

DNN学习平台（GoogleNet、SSD、FastRCNN、Yolov3）

DNN学习平台&#xff08;GoogleNet、SSD、FastRCNN、Yolov3&#xff09; 前言相关介绍1&#xff0c;登录界面&#xff1a;2&#xff0c;主界面&#xff1a;3&#xff0c;部分功能演示如下&#xff08;1&#xff09;识别网络图片&#xff08;2&#xff09;GoogleNet分类&#xf…
阅读更多...
揭秘Vue 2生命周期：从创建到毁灭的全面指南

揭秘Vue 2生命周期：从创建到毁灭的全面指南

Vue.js作为当前最受欢迎的前端框架之一&#xff0c;其生命周期方法是每个Vue开发者必须掌握的核心内容。下面将详细解释Vue2中的每个生命周期钩子的作用、概念和应用场景&#xff0c;并提供代码演示来进一步阐明其工作原理。以下是关于vue2中的生命周期每个参数的作用、概念、应…
阅读更多...
海外网络加速方案：解决海外访问难题

海外网络加速方案：解决海外访问难题

随着全球化的浪潮不断推进&#xff0c;越来越多的人和企业开始涉足海外市场&#xff0c;寻求更广阔的资源与机遇。然而&#xff0c;在海外访问过程中&#xff0c;网络速度慢、连接不稳定等问题频繁出现&#xff0c;不仅影响了个人网络体验&#xff0c;更对企业的日常运营和国际…
阅读更多...
【学术会议征稿】2024年第十届机械制造技术与工程材料国际学术会议（ICMTEM 2024）

【学术会议征稿】2024年第十届机械制造技术与工程材料国际学术会议（ICMTEM 2024）

2024年第十届机械制造技术与工程材料国际学术会议&#xff08;ICMTEM 2024&#xff09; 2024 10th International Forum on Manufacturing Technology and Engineering Materials 第十届机械制造技术与工程材料国际学术会议&#xff08;ICMTEM 2024&#xff09;将于2024年10月…
阅读更多...
QT学习之计算器

QT学习之计算器

网格布局初尝试&#xff0c;快速构建计算器 项目结构&#xff1a; wident.h拖动建立界面&#xff0c;20个button&#xff0c;一个lineedit 布局好后整体网格布局调整&#xff0c;依次给每个案件输入文本&#xff0c;并改objectname方便后期辨识 为了在lineedit显示数字&…
阅读更多...
WPF性能优化之UI虚拟化

WPF性能优化之UI虚拟化

文章目录 前言一、VirtualizingStackPanel1.1 虚拟化功能介绍1、在Window中添加一个ListBox控件。2、在设计视图中用鼠标选中ListBox控件并右健依次单击“编辑其他模板”&#xff0d;“编辑项的布局模板”&#xff0d;“编辑副本”。3、查看生成的模板代码。 1.2 虚拟化参数介绍…
阅读更多...
F12抓包04：(核心功能)Network接口抓包、定位缺陷

F12抓包04：(核心功能)Network接口抓包、定位缺陷

课程大纲 一、录制请求 ① tab导航选择“网络”&#xff08;Network&#xff09;&#xff0c;即可进入网络抓包界面&#xff0c;进入界面默认开启录制模式&#xff0c;显示浏览器当前标签页的请求列表。 ② 查看请求列表&#xff0c;包含了当前标签页执行的所有请求和下载的资…
阅读更多...
分支管理

分支管理

目录 创建分支 切换分支 合并分支 删除分支 合并冲突 创建分支 git branch [分支]指令 创建新的分⽀后&#xff0c;Git 新建了⼀个指针叫dev&#xff0c; * 表⽰当前 HEAD 指向的分⽀是 master 分⽀。另外&#xff0c;可以通过⽬录结构发现&#xff0c;新的 dev 分⽀…
阅读更多...
保姆级教学：OC监听网络状态变化 Reachability监听网络变化 ios网络变化

保姆级教学：OC监听网络状态变化 Reachability监听网络变化 ios网络变化

本文主要讲解了，在oc开发中，怎么去使用代码进行网络监听，十分的通俗易懂。 首先，在xcode工程中导入SystemConfiguration框架。 然后导入Reachability.h文件。 Reachability文件 点击下载，也可以按照如下内容创建对应的文件。 Reachability.m //文件名Reachability.m …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023