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

最新推荐文章于 2024-09-28 23:52:06 发布
最新推荐文章于 2024-09-28 23:52:06 发布
阅读量1.2k 收藏 32
点赞数 30
分类专栏： 鸿蒙开发 文章标签： harmonyos
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sujiangming/article/details/141873628
版权

【鸿蒙HarmonyOS NEXT】调用后台接口及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: number
  public biaoti: string
  public neirong: string
  public shipin: string
  public fabushijian: string
  public faburen: string
  public fengmian: string
  // API12的语法，如果构造函数中该属性作为形式参数且是可选参数时，要保持类型一致
  public thumbsupnum: number
  public crazilynum: number
  public clicktime: string
  public clicknum: number
  public 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 = id
    this.biaoti = biaoti
    this.neirong = neirong
    this.shipin = shipin
    this.fabushijian = fabushijian
    this.faburen = faburen
    this.fengmian = fengmian
    this.thumbsupnum = thumbsupnum
    this.crazilynum = crazilynum
    this.clicktime = clicktime
    this.clicknum = clicknum
    this.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: number
  public  pageSize: number
  public  totalPage: number
  public  currPage: number
  public  list: Array<NewsDataItem>

  constructor(total: number, pageSize: number, totalPage: number, currPage: number, list: Array<NewsDataItem>) {
    this.total = total
    this.pageSize = pageSize
    this.totalPage = totalPage
    this.currPage = currPage
    this.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.data
            this.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对象（不需要显示引用）；
若兰幽竹
关注
专栏目录
带你玩转鸿蒙next读取本地json并展示UI
xq610928的博客
08-06 402
相信很多同学都有参加过各种比赛项目 主要都是做一些UI上面的展示 这时候很多同学可能会在本地创建很多数组模拟数据这样代码不但看着很臃肿也不好去处理新增数据。那么我们是不是可以读取本地的json数据然后再去展示UI呢。我们需要注意的是我们通过 resourceManager.getRawFileContent, 读取到的是我们 Uint8Array 类型 buffer， 然后我们这里调用。
赶紧收藏！鸿蒙ArkTS如何使用http进行网络通信(前后端示例)
m0_70749039的博客
06-03 1722
鸿蒙官方提供'@ohos.net.http'模块，它支持应用通过HTTP发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。
鸿蒙(HarmonyOS)--接口、泛型、模块化、工具类、关键字
hqy1989的博客
09-22 1713
目录1. 接口1.1 接口属性1.1.1 必需属性：1.1.2 可选属性：1.1.3 只读属性：1.1.4 函数类型的属性：1.2 接口继承1.3 接口实现2. 泛型2.1 泛型类2.2 泛型接口2.3 泛型约束2.4 泛型函数2.5 泛型默认值2.6 多个泛型参数 2.7 泛型约定3. 空安全3.1 非空断言运算符3.2 空值合并运算符3.3 可选链4. 模块4.1 导出（Export）4.2 导入（Import）4.2.1 静态导入4.2.2 动态导入4.2.3 全部导入4.2.4 导入HarmonyO
鸿蒙开发基础 - Http请求数据接口动态渲染首页
weixin_48091641的博客
05-05 1422
鸿蒙战略胜利，目前鸿蒙开发是一个急需要人才的缺口，在未来几年势必会有大量的鸿蒙岗位出现，目前所存在的鸿蒙岗位也是给出了相当高的薪资。事实证明，鸿蒙开发确实是一块香饽饽。作为华为自家的操作系统，正在逐步扩张市场份额。想要转行或者入行的朋友可以下手了。在这里，为大家提供一份我整理的鸿蒙开发学习资料，涵盖了UI开发、web、应用模型多个知识点，有需要的朋友可以扫描下方二维码，免费获取更多相关资料。
【鸿蒙实在开发】HarmonyOS NEXT接口请求渲染
HarmonyOS007的博客
07-26 1790
HTTP接口调用，即通过HTTP协议与服务器进行通信，常用于请求服务器数据或提交数据到服务器。在鸿蒙系统中，我们可以使用多种方法实现HTTP请求，包括@system.http模块、Axios（第三方库）等。下面将详细介绍这些方法的使用。本文详细介绍了在鸿蒙系统中如何实现HTTP接口调用，包括使用@system.http模块和第三方库的具体方法，并提供了错误处理与重试机制的实现方式。通过遵循最佳实践，开发者可以提高应用的健壮性和安全性，提升用户体验。
简化的鸿蒙WiFi接口，仅需几行代码，简单易用！
Python研究所
11-27 1055
此文转载自：https://my.oschina.net/u/4857646/blog/4753376 大咖揭秘Java人都栽在了哪？点击免费领取《大厂面试清单》，攻克面试难关~>>> 使用鸿蒙原始WiFI API接口进行编程，整个过程稍显繁琐，为此我们对鸿蒙原始WiFi API接口做了一层封装，形成了一套更简单易用的接口。 简化后的API接口 STA模式 // 连...
如何使用鸿蒙代码去与后台连接请求！
xiaozhou4233的博客
01-18 960
自己拉的在线的接口，试一下吧！
鸿蒙NEXT开发-界面渲染（条件和循环）（基于最新api12稳定版）
最新发布
qq_56760790的博客
09-28 662
鸿蒙界面渲染的学习包含了：条件渲染和循环渲染
HarmonyOS应用开发者基础题库
12-29
【HarmonyOS应用开发者基础题库】主要涵盖了鸿蒙系统应用开发的基础知识，涉及DevEco Studio集成开发环境、 ArkTS编程语言、应用程序框架以及页面布局设计等方面。 1. **DevEco Studio**：它是华为提供的开发...
HarmonyOS NEXT应用开发之ForEach：循环渲染
1
04-03 1702
ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为 List组件。从API version 9开始，该接口支持在ArkTS卡片中使用。
【HarmonyOS NEXT应用开发】案例140：基于RN框架实现高性能瀑布流页面
xzs51job的专栏
09-08 566
本案例针对瀑布流页面场景，基于@react-native-oh-tpl/flash-list、axios等框架，实现了一个高性能的瀑布流页面，该案例提供了关键的开发步骤，旨在帮助开发者高效开发出高性能的瀑布流页面。详情请查看。名称版本号0.72.270.0.26rnoh5.0.0.302及以上5.0.0.302及以上页面：页面渲染最大数≤300页面组件嵌套层数≤30。
HarmonyOS Next应用开发案例大全-(持续更新中……)
2401_84181911的博客
04-11 1277
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
HarmonyOS Next应用开发案例大全-(持续更新中……)(1)
2401_84181911的博客
04-11 1485
前者的优点在于使用简单，但是在大文件场景下，内存占用较高，影响应用性能；在应用开发中，我们通常需要使用相同功能和样式的ArkUI组件，例如购物页面中会使用相同样式的Button按钮、Text显示文字，我们常用的方法是抽取公共样式或者封装成一个自定义组件到公共组件库中以减少冗余代码。本示例提供组件实例在页面间共享的解决方案：通过Stack容器，下层放地图组件，上层放Navigation组件来管理页面，页面可以共享下层的地图组件，页面中需要显示地图的区域设置为透明，并参考触摸交互控制，设置事件透传及响应区域。
鸿蒙开发接口Ability框架：【(窗口扩展能力)】
2301_76813281的博客
05-11 1063
WindowExtensionAbility基于ExtensionAbility，WindowExtensionAbility中展示的内容作为一个控件(AbilityComponent)内容展示在其他应用窗口中，实现在一个窗口中展示多个应用程序内容的功能。本模块首批接口从API version 9开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。本模块接口为系统接口。本模块接口仅可在Stage模型下使用。
【鸿蒙】大模型对话应用（一）：大模型接口对接与调试
weixin_44348327的博客
01-27 3078
本demo对接阿里云和百度的大模型API，实现一个简单的对话应用。HarmonyOS API版本：API9ArkTS、ArkUI、UIAbility、网络http请求、列表布局。
鸿蒙开发接口数据管理：【@ohos.data.preferences (首选项)】
2301_76813281的博客
06-07 1537
首选项为应用提供key-value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。数据存储形式为键值对，键的类型为字符串型，值的存储数据类型包括数字型、字符型、布尔型。本模块首批接口从API version 9开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
HarmonyOS NEXT - ArkTS语言 - 接口
u011143672的博客
06-17 551
泛型类型的类型参数可以绑定。例如，HashMap容器中的Key类型参数必须具有哈希方法，即它应该是可哈希的。这样可以不指定实际的类型实参，而只使用泛型类型名称。在上面的例子中，Key类型扩展了Hashable，Hashable接口的所有方法都可以为key调用。继承接口包含被继承接口的所有属性和方法，还可以添加自己的属性和方法。泛型类型和函数允许创建的代码在各种类型上运行，而不仅支持单一类型。任何一个类的实例只要实现了特定接口，就可以通过该接口实现多态。接口是定义代码协定的常见方式。
鸿蒙NEXT实战开发： 依据前端对http请求进行二次简单封装
m0_64422261的博客
06-21 1871
为什么要对http请求进行封装
怎么调用react的生命周期
07-29
调用React的生命周期方法是由React框架自动管理的，不需要手动调用。当组件被创建、更新或卸载时，React会自动调用相应的生命周期方法。以下是React常用的生命周期方法调用顺序： 1. 创建阶段： - constructor(props)：组件的构造函数，在组件被创建时调用，用于初始化组件的状态和绑定事件等操作。 - static getDerivedStateFromProps(props, state)：在组件被创建或接收到新的props时调用，用于根据props更新组件的状态。 - render()：渲染组件的内容。 - componentDidMount()：在组件被挂载到DOM后调用，用于执行一些需要DOM的操作，如数据获取、订阅事件等。 2. 更新阶段： - static getDerivedStateFromProps(props, state)：在组件接收到新的props时调用，用于根据props更新组件的状态。 - shouldComponentUpdate(nextProps, nextState)：在组件更新前调用，用于判断是否需要重新渲染组件，默认返回true。 - render()：渲染组件的内容。 - getSnapshotBeforeUpdate(prevProps, prevState)：在组件更新前调用，用于获取更新前的DOM状态，返回值将作为componentDidUpdate()的第三个参数传递。 - componentDidUpdate(prevProps, prevState, snapshot)：在组件更新后调用，用于执行一些更新后的操作，如更新DOM、发送网络请求等。 3. 卸载阶段： - componentWillUnmount()：在组件从DOM中移除前调用，用于清理组件的副作用，如取消订阅、清除定时器等。 需要注意的是，React 16.3版本之后，一些生命周期方法已经被废弃或替代，具体使用哪些生命周期方法取决于React版本和组件的需求。以上是常用的生命周期方法调用顺序，具体使用时请参考React官方文档或相关教程。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [react生命周期详细介绍](https://blog.csdn.net/luobo2345/article/details/122818947)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

若兰幽竹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值