鸿蒙HarmonyOS NEXT入门，使用axios获取网络影片数据（四）

1. 涉及到的技术点

1. axios的使用
2. 第三方库的包管理ohpm的下载和环境变量的配置

2. 官网文档指南

1. 如何使用axios https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios
2. 第三方库的包管理ohpm的下载和环境变量的配置 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-commandline-get-0000001954334245-V5

温馨提示：使用第三方库，必须安装ohpm和环境变量配置，上面的官方教程有详细的说明

3. axios基础使用

详细教程请看上面的官方文档

1. 倒入axios依赖

ohpm install @ohos/axios
1

2. 网络权限，只要涉及到网路模块，都得添加网络权限，官方指南教程：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/declare-permissions-V5

3. 在module.json5中添加网络权限

 "requestPermissions": [
      {
        'name': 'ohos.permission.INTERNET'
      }
    ],
1
2
3
4
5

4. axios 使用

// 发送一个get请求
axios<string, AxiosResponse<string>, null>({
  method: "get",
  url: 'https://www.xxx.com/info'
}).then((res: AxiosResponse) => {
  console.info('result:' + JSON.stringify(res.data));
}).catch((error: AxiosError) => {
  console.error(error.message);
})
1
2
3
4
5
6
7
8
9

4. demo具体代码实现

1. 在上集中，我们把首页电影列表实现了，但里面的数据是本地模拟的，也就是数据是写死的。这集讲通过axios发送网络请求，获取影片动态数据
2. axios获取影片数据

 /**
   * 获取最近热门电影
   */
  getMovieListData() {

    axios<string, AxiosResponse<string>, null>({
      method: "get",
      url: 'https://movie.douban.com/j/search_subjects?type=movie&tag=热门&page_limit=50&page_start=0'
    }).then((res: AxiosResponse) => {
      this.movieInfo = res.data

    }).catch((error: AxiosError) => {
      console.error(error.message);
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 整体代码实现过程

import axios, { AxiosError, AxiosResponse } from '@ohos/axios';
import { MovieInfo, MovieInfoItem } from '../entity/MovieInfo';

@Entry
@Component
struct HomePage{
  @State movieInfo: MovieInfo = {
    subjects: []
  }

  aboutToAppear(): void {
    this.getMovieListData()
  }

  /**
   * 获取最近热门电影
   */
  getMovieListData() {

    axios<string, AxiosResponse<string>, null>({
      method: "get",
      url: 'https://movie.douban.com/j/search_subjects?type=movie&tag=热门&page_limit=50&page_start=0'
    }).then((res: AxiosResponse) => {
      this.movieInfo = res.data

    }).catch((error: AxiosError) => {
      console.error(error.message);
    })
  }

  build() {

    Column() {

      //标题栏
      Text('首页')
        .fontWeight(700)
        .fontSize(28)
        .width('100%')
        .padding({ left: 10 })

      Scroll() {
        Column() {
          //轮播图
          Swiper() {
            Image("https://img2.baidu.com/it/u=3119334893,112907213&fm=253&fmt=auto&app=138&f=JPEG?w=1333&h=500")
              .height(120).width('100%')
            Image('https://img1.baidu.com/it/u=2208322220,3046896965&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=500')
              .height(120).width('100%')
            Image('https://img1.baidu.com/it/u=3642384699,1397016578&fm=253&fmt=auto&app=138&f=JPEG?w=1476&h=500')
              .height(120).width('100%')
            Image('https://img1.baidu.com/it/u=3953008485,1470810916&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400')
              .height(120).width('100%')

          }.loop(true)
          .margin(10)
          .autoPlay(true)
          .borderRadius(10)

          Text('最近热门电影')
            .fontWeight(700)
            .fontSize(17)
            .width('100%')
            .margin({ left: 10, top: 20 })
            .padding({ left: 6 })//设置左边框
            .borderWidth({
              left: 4
            })
            .borderColor('#e22418')


          //电影列表，网格布局
          Grid() {
            ForEach(this.movieInfo.subjects, (item: MovieInfoItem) => {
              GridItem() {
                Column() {
                  Image(item.cover)
                    .height(140)
                    .width('100%')
                    .objectFit(ImageFit.Cover)
                  Text(item.title)
                    .fontSize(13)
                    .margin({ top: 6 })
                    .textOverflow({
                      overflow: TextOverflow.Clip
                    })
                    .maxLines(1) //一般情况下textOverflow和maxLines配合一起使用
                }.width('100%')
              }.onClick(() => {

              })

            })

          }
          .columnsTemplate('1fr 1fr 1fr')
          .margin({ top: 20 })
          .columnsGap(10)
          .rowsGap(10)
          .margin(10)
        }
        .width('100%')

      }

    }
    .width('100%')
    .height('100%')

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

上面代码中，获取网络数据的方法，在生命周期的aboutToAppear()函数中调用

3. 数据实体MovieInfo，MovieInfoItem
   在项目ets下新建entity文件夹，存放数据实体类，如下图所示：
   

export class MovieInfo {

  subjects: Array<MovieInfoItem> =[]
}

export class MovieInfoItem {
  episodes_info: string = ''
  rate: string = ''
  cover_x: string = ''
  title: string = ''
  url: string = ''
  playable: boolean = false
  cover: string = ''
  id: string = ''
  cover_y: string = ''
  is_new: string = ''
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

温馨提示：1. 必须安装ohpm包管理器 2. 必须安装axios依赖 3. 必须添加网络权限

1. 如何检验ohpm包管理器是否安装成功？执行codelinter -v指令
   
2. axios是否倒入依赖成功 在oh-package.json5文件中查看
   
3. 添加网络权限，在module.json5中
   

5. 演示效果