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

若兰幽竹2024-09-07 11:09

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

一、环境说明

  1. DevEco Studio 版本：

  2. API版本：以12为主

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

  1. 后台接口及返回数据分析

    JSON数据格式如下：

    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数据的最内层数据：

    typescript 复制代码 
    /**
 * 用于定义具体的数据项
 * {
 "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数据的中间层数据：

    typescript 复制代码 
    /**
 * 定义用于接收后台返回的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数据的最外层数据：

    typescript 复制代码 
    /**
 * 定义用于接收后台返回的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组件渲染后台数据，具体代码如下：

    typescript 复制代码 
    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对象（不需要显示引用）；
相关推荐
小强在此11 小时前
【基于开源鸿蒙(OpenHarmony)的智慧农业综合应用系统】
华为·开源·团队开发·智慧农业·harmonyos·开源鸿蒙
PlumCarefree15 小时前
基于鸿蒙API10的RTSP播放器(四：沉浸式播放窗口)
华为·harmonyos
中关村科金18 小时前
中关村科金推出得助音视频鸿蒙SDK，助力金融业务系统鸿蒙化提速
华为·音视频·harmonyos
小强在此1 天前
基于OpenHarmony(开源鸿蒙)的智慧医疗综合应用系统
华为·开源·团队开发·健康医疗·harmonyos·开源鸿蒙
奔跑的露西ly1 天前
【鸿蒙 HarmonyOS NEXT】popup弹窗
华为·harmonyos
OH五星上将1 天前
OpenHarmony（鸿蒙南向开发）——轻量和小型系统三方库移植指南（一）
嵌入式硬件·移动开发·harmonyos·openharmony·鸿蒙开发·鸿蒙移植
codes234577892 天前
鸿蒙开发之ArkTS 界面篇 一
harmonyos·arkts·harmonyos next·deveco-studio·鸿蒙界面·鸿蒙界面入门·鸿蒙 index.ets
HarmonyOS_SDK2 天前
免弹窗、预授权，默认界面扫码能力打造系统级扫码体验
harmonyos
追风小老头折腾程序2 天前
实战06-LazyForEach
harmonyos
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习