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

心之所想，行则将至

于 2024-08-04 12:01:15 发布

阅读量478

点赞数 13

文章标签：学习

本文链接：https://blog.csdn.net/qq_36973384/article/details/140903914

版权

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

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

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

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

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

3.列表如下图所示

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

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

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

5.获取动态数据效果

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

@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的静态列表

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请求，从接口获取数据，动态展示列表数据

//发送异步请求
              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函数的定义`


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 获取到数据之后，记得把数据类型转换一下

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