【鸿蒙HarmonyOS NEXT】调用后台接口及List组件渲染
- 一、环境说明
- 二、调用后台接口及List组件渲染
- 三、总结
一、环境说明
-
DevEco Studio 版本：
-
API版本：以12为主
二、调用后台接口及List组件渲染
-
后台接口及返回数据分析
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" } ] } } -
新建后台数据相关的实体类
新建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; } } -
新建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) } } -
重新编译，运行效果如下：
三、总结
有如下关键几点：
- 调用后台接口，需要引入http模块或者其他诸如Ajax、axios等网络请求模块；
- 如果是需要在页面被创建的时候调用后台接口，则需要在aboutToAppear()中进行调用，如需要在页面显示时需要调用后台接口加载数据，则可以在onPageShow()函数中进行调用。根据实际业务结合组件的生命周期进行合适的调用；
- 如使用JSON.parse报错Structural typing is not supported (arkts-no-structural-typing)，其原因是引入
import { JSON } from '@kit.ArkTS';模块中的JSON，需要将其删除掉，使用内置的JSON对象（不需要显示引用）；
