零基础开始学习鸿蒙开发-文章推荐栏获取接口数据并展示

目录

1.新建文章列表布局页面,通过静态数据,编写好布局页面。

[1.1 通过行ArticleCard布局构建单个文章展示的item项](#1.1 通过行ArticleCard布局构建单个文章展示的item项)

[1.2 使用了@ObjectLink装饰器(尽管这不是ArkUI标准API的一部分,特定框架或自定义的扩展),它用于创建组件与某个对象(在这个例子中是Article类型的对象)之间的双向绑定或关联。这意味着ArticleCard组件内部可以访问并修改article对象的状态](#1.2 使用了@ObjectLink装饰器(尽管这不是ArkUI标准API的一部分,特定框架或自定义的扩展),它用于创建组件与某个对象(在这个例子中是Article类型的对象)之间的双向绑定或关联。这意味着ArticleCard组件内部可以访问并修改article对象的状态)

[1.3 handleLiked():这是一个方法,用于切换文章的点赞状态(isLiked)并相应地更新点赞数(likesCount)。如果文章已被点赞,则取消点赞并减少点赞数;如果未点赞,则点赞并增加点赞数](#1.3 handleLiked():这是一个方法,用于切换文章的点赞状态(isLiked)并相应地更新点赞数(likesCount)。如果文章已被点赞,则取消点赞并减少点赞数;如果未点赞,则点赞并增加点赞数)

2.基本item框架构建好之后,开始构建List的静态列表

3.列表如下图所示

4.发起http请求,从接口获取数据,动态展示列表数据

[4.1 使用getReqeust函数 发起get请求拿到json数据,下面是 getReqeust函数的定义](#4.1 使用getReqeust函数 发起get请求拿到json数据,下面是 getReqeust函数的定义)

[4.2 获取到数据之后,记得把数据类型转换一下](#4.2 获取到数据之后,记得把数据类型转换一下)

5.获取动态数据效果


1.新建文章列表布局页面,通过静态数据,编写好布局页面。

javascript 复制代码
@Observed
export  class Article {
  id: number;
  title: string;
  brief: string;
  isLiked: boolean;
  likesCount: number;
  createTime:String;
  updateTime:String;

  constructor(id: number, title: string,
              brief: string,
              isLiked: boolean,
              likesCount: number,
              createTime: String,
              updateTime: String,
  ) {
    this.id = id;
    this.title = title;
    this.brief = brief;
    this.isLiked = isLiked;
    this.likesCount = likesCount;
  }
}
import router from "@ohos.router"
@Entry
@Component
struct clickPage {
  @State dataList:Array<Article>  = router.getParams()?.['dataList']  as  Array<Article>;
  @State articleList: Array<Article> = [
    new Article(1, '四书', '文章简介内容', false, 0,"2021","2024"),
    new Article(2, '五经', '文章简介内容', false, 0,"2021","2024"),
    new Article(3, '大学', '文章简介内容', false, 0,"2021","2024"),
    new Article(4, '中庸', '文章简介内容', false, 0,"2021","2024"),
    new Article(5, '论语', '文章简介内容', false, 0,"2021","2024"),
    new Article(6, '孟子', '文章简介内容', false, 0,"2021","2024"),
  ];

  build() {
  Column(){
    List() {
      ForEach(this.dataList, (item: Article) => {
        ListItem() {
          ArticleCard({
            article: item
          })
            .margin({ top: 20 })
        }
      }, (item: Article) => item.id.toString())
    }
    .padding(20)
    .scrollBar(BarState.Off)
    .backgroundColor(0xF1F3F5)
  }

  }
}

@Component
struct ArticleCard {
  @ObjectLink article: Article;
  handleLiked() {
    this.article.isLiked = !this.article.isLiked;
    this.article.likesCount = this.article.isLiked ? this.article.likesCount + 1 : this.article.likesCount - 1;
  }

  build() {
    Row() {
      Image($r('app.media.articles'))
        .width(80)
        .height(80)
        .margin({ right: 20 })

      Column() {
        Text(this.article.title)
          .fontSize(20)
          .margin({ bottom: 8 })
        Text(this.article.brief)
          .fontSize(16)
          .fontColor(Color.Gray)
          .margin({ bottom: 8 })

        Row() {
          Image(this.article.isLiked ? $r('app.media.iconLiked') : $r('app.media.iconUnLiked'))
            .width(24)
            .height(24)
            .margin({ right: 8 })
          Text(this.article.likesCount.toString())
            .fontSize(16)
        }
        .onClick(() => this.handleLiked())
        .justifyContent(FlexAlign.Center)
      }
      .alignItems(HorizontalAlign.Start)
      .width('80%')
      .height('100%')
    }
    .padding(20)
    .borderRadius(12)
    .backgroundColor('#FFECECEC')
    .height(120)
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

1.1 通过行ArticleCard布局构建单个文章展示的item项

1.2 使用了@ObjectLink装饰器(尽管这不是ArkUI标准API的一部分,特定框架或自定义的扩展),它用于创建组件与某个对象(在这个例子中是Article类型的对象)之间的双向绑定或关联。这意味着ArticleCard组件内部可以访问并修改article对象的状态

1.3 handleLiked():这是一个方法,用于切换文章的点赞状态(isLiked)并相应地更新点赞数(likesCount)。如果文章已被点赞,则取消点赞并减少点赞数;如果未点赞,则点赞并增加点赞数

2.基本item框架构建好之后,开始构建List的静态列表

javascript 复制代码
import router from "@ohos.router"
@Entry
@Component
struct clickPage {
  @State dataList:Array<Article>  = router.getParams()?.['dataList']  as  Array<Article>;
  @State articleList: Array<Article> = [
    new Article(1, '四书', '文章简介内容', false, 0,"2021","2024"),
    new Article(2, '五经', '文章简介内容', false, 0,"2021","2024"),
    new Article(3, '大学', '文章简介内容', false, 0,"2021","2024"),
    new Article(4, '中庸', '文章简介内容', false, 0,"2021","2024"),
    new Article(5, '论语', '文章简介内容', false, 0,"2021","2024"),
    new Article(6, '孟子', '文章简介内容', false, 0,"2021","2024"),
  ];

  build() {
  Column(){
    List() {
      ForEach(this.dataList, (item: Article) => {
        ListItem() {
          ArticleCard({
            article: item
          })
            .margin({ top: 20 })
        }
      }, (item: Article) => item.id.toString())
    }
    .padding(20)
    .scrollBar(BarState.Off)
    .backgroundColor(0xF1F3F5)
  }

  }
}

3.列表如下图所示

4.发起http请求,从接口获取数据,动态展示列表数据

javascript 复制代码
//发送异步请求
              getReqeust("http://r3y8xeo.nat.ipyingshe.com/articleList")
                .then(data => {
                  // 处理成功的数据
                  if (data.responseCode===200) {
                    //成功弹窗
                    promptAction.showToast({
                      // @ts-ignore
                      message: JSON.stringify(JSON.parse(data.result).data)
                    });
                    // @ts-ignore
                    router.pushUrl({ url: 'component/clickPage',params:{
                      // @ts-ignore
                      dataList: JSON.parse(data.result).data as  Array<Article>
                    } }).then(() => {
                    }).catch((err) => {
                      throw  err
                      promptAction.showToast({
                        // @ts-ignore
                        message: '跳转出错'
                      });
                    });
                  }else {
                    promptAction.showToast({
                      message: '获取数据出错!' // 弹窗内容
                    });
                  }
                })
                .catch(error => {
                  promptAction.showToast({
                    message: '请求失败,网络接口有问题!' // 弹窗内容
                  });
                });

4.1 使用getReqeust函数 发起get请求拿到json数据,下面是 getReqeust函数的定义

javascript 复制代码
export   function getReqeust(url: string) {
  if (!url) {
    return undefined;
  }
  let request = http.createHttp();
  let options = {
    method: http.RequestMethod.GET,
    header: {
      'Content-Type': 'application/json', 'charset': 'utf-8'
    },
    extraData: {
    },
    readTimeout: 5000,
    connectTimeout: 5000
  } as http.HttpRequestOptions;
  try {
    // 使用 await 等待异步请求的结果
    let result = request.request(url, options);
    // 如果请求成功,处理 result
    // 返回结果或进行其他处理
    return result;
  } catch (error) {
    // 如果请求失败,捕获错误
    // 在这里处理错误,比如重试请求、记录日志或抛出新的错误
    // 你可以选择返回一个错误对象、null、默认值或者重新抛出错误
    // 例如,重新抛出错误以便上层调用者可以处理它
    throw error; // 或者你可以不抛出错误,而是返回一个默认值或错误对象
  }
}

4.2 获取到数据之后,记得把数据类型转换一下

javascript 复制代码
router.pushUrl({ url: 'component/clickPage',params:{
                      // @ts-ignore
                      dataList: JSON.parse(data.result).data as  Array<Article>
                    } })

5.获取动态数据效果

代码在绑定在本博文资源,需要的自取就好,你们的点赞收藏是我继续创作的动力。

相关推荐
2501_9153738842 分钟前
Node.js 学习入门指南
学习·node.js
绵绵细雨中的乡音1 小时前
Linux进程学习【基本认知】
linux·运维·学习
我的golang之路果然有问题3 小时前
快速了解redis,个人笔记
数据库·经验分享·redis·笔记·学习·缓存·内存
Angindem4 小时前
SpringClound 微服务分布式Nacos学习笔记
分布式·学习·微服务
虾球xz5 小时前
游戏引擎学习第244天: 完成异步纹理下载
c++·学习·游戏引擎
BOB-wangbaohai5 小时前
Flowable7.x学习笔记(十四)查看部署流程Bpmn2.0-xml
xml·笔记·学习
先生沉默先5 小时前
c#接口_抽象类_多态学习
开发语言·学习·c#
豆芽8195 小时前
图解YOLO(You Only Look Once)目标检测(v1-v5)
人工智能·深度学习·学习·yolo·目标检测·计算机视觉
友善啊,朋友5 小时前
《普通逻辑》学习记录——性质命题及其推理
学习·逻辑学
Gsen28196 小时前
AI大模型从0到1记录学习 数据结构和算法 day20
数据结构·学习·算法·生成对抗网络·目标跟踪·语言模型·知识图谱