# 夏日挑战赛 # 基于ArkUI eTS开发的每日食谱（NutRecipes）原创精华

程序员法医

发布于 2022-7-25 14:04

浏览

2收藏

实现的功能：

获取接口数据
菜谱列表
菜谱详情页

你能学到的有：

网络请求
可滚动组件
容器组件
路由跳转
基础组件

文件结构

.
├── config.json
├── ets
│   └── MainAbility
│       ├── app.ets
│       ├── data
│       │   ├── get_cook_data.ets
│       │   └── get_test.ets
│       ├── model
│       │   ├── cookDetailModel.ets
│       │   ├── cookModel.ets
│       │   ├── materialModel.ets
│       │   └── processModel.ets
│       └── pages
│           ├── Main.ets
│           ├── cookbookDetails.ets
│           └── index.ets
└── resources
    ├── base
    │   ├── element
    │   │   ├── color.json
    │   │   └── string.json
    │   └── media
    │       └── icon.png
    └── rawfile

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.

效果预览：

# 夏日挑战赛 # 基于ArkUI eTS开发的每日食谱（NutRecipes）-鸿蒙开发者社区

获取新闻接口a

标识：get

接口地址：

https://way.jd.com/jisuapi/search
请求方式：

HTTPS GET POST
请求示例：

Url:https://way.jd.com/jisuapi/search?keyword=白菜&num=10&start=0&appkey=7c913be32b690701cd994d804a6d4294

请求参数说明：

# 夏日挑战赛 # 基于ArkUI eTS开发的每日食谱（NutRecipes）-鸿蒙开发者社区

返回参数说明：

# 夏日挑战赛 # 基于ArkUI eTS开发的每日食谱（NutRecipes）-鸿蒙开发者社区

JSON返回示例

{"code":"10000","charge":false,"msg":"查询成功","result":{
    "status": "0",
    "msg": "ok",
    "result": {
        "num": "10",
        "list": [
            {
                "id": "8",
                "classid": "2",
                "name": "醋溜白菜",
                "peoplenum": "1-2人",
                "preparetime": "10-20分钟",
                "cookingtime": "10-20分钟",
                "content": "醋溜白菜，是北方人经常吃的一道菜，尤其是在多年前的冬天。那时，没有大棚菜，冬天，家家每天佐餐的基本上都是冬储大白菜，聪明的家庭主妇总是想方设法将这单调的菜变成多种菜式，于是，醋溜白菜被频繁的端上餐桌。

美食不分贵贱，用最平凡的原料、最简单的调料和最普通的手法做出美味的菜肴来才是美食的真谛。 

这次，我做的醋溜白菜，近似鲁菜的做法，使个这道菜酸甜浓郁、开胃下饭、老少咸宜。",
                "pic": "http://api.jisuapi.com/recipe/upload/20160719/115138_46688.jpg",
                "tag": "减肥,家常菜,排毒,补钙",
                "material": [
                    {
                        "mname": "油",
                        "type": "0",
                        "amount": "适量"
                    },
                    {
                        "mname": "盐",
                        "type": "0",
                        "amount": "适量"
                    },
                    {
                        "mname": "花椒",
                        "type": "0",
                        "amount": "适量"
                    },
                    {
                        "mname": "干红椒",
                        "type": "0",
                        "amount": "适量"
                    },
                    {
                        "mname": "葱",
                        "type": "0",
                        "amount": "适量"
                    },
                    {
                        "mname": "姜",
                        "type": "0",
                        "amount": "适量"
                    },
                    {
                        "mname": "蒜",
                        "type": "0",
                        "amount": "适量"
                    },
                    {
                        "mname": "醋",
                        "type": "0",
                        "amount": "适量"
                    },
                    {
                        "mname": "酱油",
                        "type": "0",
                        "amount": "适量"
                    },
                    {
                        "mname": "糖",
                        "type": "0",
                        "amount": "适量"
                    },
                    {
                        "mname": "淀粉",
                        "type": "0",
                        "amount": "适量"
                    },
                    {
                        "mname": "白菜",
                        "type": "1",
                        "amount": "380g"
                    }
                ],
                "process": [
                    {
                        "pcontent": "准备食材。",
                        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162550_84583.jpg"
                    },
                    {
                        "pcontent": "将白菜斜刀片成薄片。",
                        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162551_90620.jpg"
                    },
                    {
                        "pcontent": "片切好的白菜帮与菜叶分别入好。",
                        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162551_20925.jpg"
                    },
                    {
                        "pcontent": "盐、糖、生抽、醋淀粉加少许水调匀备用。",
                        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162552_23125.jpg"
                    },
                    {
                        "pcontent": "锅中油烧热，先入花椒炒香后捞出。再加入干红椒段略炒。",
                        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162552_57046.jpg"
                    },
                    {
                        "pcontent": "加入葱姜蒜煸炒香，然后入白菜帮翻炒。",
                        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162553_89090.jpg"
                    },
                    {
                        "pcontent": "炒至菜帮变软时，加入白菜叶。",
                        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162553_40445.jpg"
                    },
                    {
                        "pcontent": "快速翻炒至菜软，勾入碗汁",
                        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162554_92210.jpg"
                    },
                    {
                        "pcontent": "使汤汁均匀的包裹在菜帮上即可",
                        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162554_29522.jpg"
                    }
                ]
            }
        ]
    }
}}
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.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.

接下来，我们开始今天的实战，首先创建一个项目NutJoke

# 夏日挑战赛 # 基于ArkUI eTS开发的每日食谱（NutRecipes）-鸿蒙开发者社区

点击下一步

# 夏日挑战赛 # 基于ArkUI eTS开发的每日食谱（NutRecipes）-鸿蒙开发者社区

因为我们要网络请求

所以我们需要在config.json中配置网络请求权限

网络请求的步骤

1、声明网络请求权限

在entry下的config.json中module字段下配置权限

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

2、支持http明文请求

默认支持https，如果要支持http，在entry下的config.json中deviceConfig字段下配置

  "deviceConfig": {"default": {
    "network": {
      "cleartextTraffic": true
    }
  }},
1.
2.
3.
4.
5.

3、创建HttpRequest

// 导入模块
import http from '@ohos.net.http';
// 创建HttpRequest对象
let httpRequest = http.createHttp();
1.
2.
3.
4.

4、发起请求

GET请求（默认为GET请求）


  // 请求方式：GET
  getRequest() {
    // 每一个httpRequest对应一个http请求任务，不可复用
    let httpRequest = http.createHttp()
    let url = "https://way.jd.com/jisuapi/search?keyword=白菜&num=10&start=0&appkey=7c913be32b690701cd994d804a6d4294"
    httpRequest.request(url, (err, data) => {
      if (!err) {
        if (data.responseCode == 200) {
          console.info('=====data.result=====' + data.result)
          // 解析数据
          //this.content= data.result;
          // 解析数据
          var cookModel: CookModel = JSON.parse(data.result.toString())
          // 判断接口返回码，0成功
          if (cookModel.code == 1000) {
            // 设置数据

            this.future = cookModel.result.result.list.material
            this.cookdetail = cookModel.result.result.list

            this.isRequestSucceed = true;

            console.info('=====data.result===this.content==' + cookModel.result.result.list.material)

          } else {
            // 接口异常，弹出提示
            prompt.showToast({ message: "数据请求失败" })
            prompt.showToast({ message: jokeModel.error_code })
          }

        } else {
          // 请求失败，弹出提示
          prompt.showToast({ message: '网络异常' })
        }
      } else {
        // 请求失败，弹出提示
        prompt.showToast({ message: err.message })
      }
    })
  }
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.

5、解析数据（简单示例）

1.网络请求到的json字符串

/*
 * Copyright (c) 2021 JianGuo Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

export function getCookTest() {
  return {
    "id": "8",
    "classid": "2",
    "name": "醋溜白菜",
    "peoplenum": "1-2人",
    "preparetime": "10-20分钟",
    "cookingtime": "10-20分钟",
    "content": "醋溜白菜，是北方人经常吃的一道菜，尤其是在多年前的冬天。那时，没有大棚菜，冬天，家家每天佐餐的基本上都是冬储大白菜，聪明的家庭主妇总是想方设法将这单调的菜变成多种菜式，于是，醋溜白菜被频繁的端上餐桌。" +

    " 美食不分贵贱，用最平凡的原料、最简单的调料和最普通的手法做出美味的菜肴来才是美食的真谛。" +

    " 这次，我做的醋溜白菜，近似鲁菜的做法，使个这道菜酸甜浓郁、开胃下饭、老少咸宜。",
    "pic": "http://api.jisuapi.com/recipe/upload/20160719/115138_46688.jpg",
    "tag": "减肥,家常菜,排毒,补钙",
    "material": [
      {
        "mname": "油",
        "type": "0",
        "amount": "适量"
      },
      {
        "mname": "盐",
        "type": "0",
        "amount": "适量"
      },
      {
        "mname": "花椒",
        "type": "0",
        "amount": "适量"
      },
      {
        "mname": "干红椒",
        "type": "0",
        "amount": "适量"
      },
      {
        "mname": "葱",
        "type": "0",
        "amount": "适量"
      },
      {
        "mname": "姜",
        "type": "0",
        "amount": "适量"
      },
      {
        "mname": "蒜",
        "type": "0",
        "amount": "适量"
      },
      {
        "mname": "醋",
        "type": "0",
        "amount": "适量"
      },
      {
        "mname": "酱油",
        "type": "0",
        "amount": "适量"
      },
      {
        "mname": "糖",
        "type": "0",
        "amount": "适量"
      },
      {
        "mname": "淀粉",
        "type": "0",
        "amount": "适量"
      },
      {
        "mname": "白菜",
        "type": "1",
        "amount": "380g"
      }
    ],
    "process": [
      {
        "pcontent": "准备食材。",
        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162550_84583.jpg"
      },
      {
        "pcontent": "将白菜斜刀片成薄片。",
        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162551_90620.jpg"
      },
      {
        "pcontent": "片切好的白菜帮与菜叶分别入好。",
        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162551_20925.jpg"
      },
      {
        "pcontent": "盐、糖、生抽、醋淀粉加少许水调匀备用。",
        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162552_23125.jpg"
      },
      {
        "pcontent": "锅中油烧热，先入花椒炒香后捞出。再加入干红椒段略炒。",
        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162552_57046.jpg"
      },
      {
        "pcontent": "加入葱姜蒜煸炒香，然后入白菜帮翻炒。",
        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162553_89090.jpg"
      },
      {
        "pcontent": "炒至菜帮变软时，加入白菜叶。",
        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162553_40445.jpg"
      },
      {
        "pcontent": "快速翻炒至菜软，勾入碗汁",
        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162554_92210.jpg"
      },
      {
        "pcontent": "使汤汁均匀的包裹在菜帮上即可",
        "pic": "http://api.jisuapi.com/recipe/upload/20160719/162554_29522.jpg"
      }
    ]
  }
}
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.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.

2.创建相应的对象


/*
 * Copyright (c) 2021 JianGuo Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { CookDetailData } from './cookDetailModel';
export class CookModel {
  charge: string //返回说明
  code: number //返回码，1000为查询成功
  msg: string //
  result: {
    result: CookModel7 // 笑话
    status: number //数量
    msg: string // ok
  }
}
export class CookModel7 {
  num: string //频道
  list: CookDetailData //
}


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.

/*
 * Copyright (c) 2021 JianGuo Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { MaterialData } from './materialModel';
import { ProcessData } from './processModel';

export class CookDetailData {
  name: string //
  peoplenum: string //
  cookingtime: string //
  content: string //
  pic: string //
  tag: string //

  material: Array<MaterialData>
  process: Array<ProcessData>
}
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.

参考文档

项目地址

https://gitee.com/jianguo888/nut-recipes

分类

标签

3条回复

按时间正序

按时间倒序

红叶亦知秋

很有意思的项目，让我想起了github上的隔离食用手册大全，楼主可以参考里面的菜谱（https://cook.yunyoujun.cn/）

2022-7-26 10:07:59

葫芦大金刚

大佬写的不错啊

2022-7-28 10:32:49

WangNing1995

学习了

2022-7-28 10:37:55

51CTO

51CTO博客

51CTO学堂

# 夏日挑战赛 # 基于ArkUI eTS开发的每日食谱（NutRecipes）原创精华

实现的功能：

你能学到的有：

文件结构

效果预览：

获取新闻接口a

请求参数说明：

返回参数说明：

JSON返回示例

网络请求的步骤

1、声明网络请求权限

2、支持http明文请求

3、创建HttpRequest

4、发起请求

5、解析数据（简单示例）

参考文档

项目地址

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

# 夏日挑战赛 # 基于ArkUI eTS开发的每日食谱（NutRecipes） 原创 精华

实现的功能：

你能学到的有：

文件结构

效果预览：

获取新闻接口a

请求参数说明：

返回参数说明：

JSON返回示例

网络请求的步骤

1、声明网络请求权限

2、支持http明文请求

3、创建HttpRequest

4、发起请求

5、解析数据（简单示例）

参考文档

项目地址

目录

订阅鸿蒙技术特刊，精选内容抢先看

# 夏日挑战赛 # 基于ArkUI eTS开发的每日食谱（NutRecipes）原创精华