基于ArkUI eTS开发的坚果食谱（NutRecipes）

基于ArkUI eTS开发的坚果食谱（NutRecipes）

今天为大家做一款坚果食谱，有大量的食谱数据，覆盖了很多种类的食谱。

实现的功能：

• 获取接口数据

• 菜谱列表

• 菜谱详情页

你能学到的有：

• 网络请求

• 可滚动组件

• 容器组件

• 路由跳转

• 基础组件

文件结构

.
├── 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


效果预览：

获取新闻接口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

请求参数说明：

返回参数说明：

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"
 }
 ]
 }
 ]
 }
}}


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

点击下一步

因为我们要网络请求

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

网络请求的步骤

1、声明网络请求权限

在

entry

下的

config.json

中

module

字段下配置权限

"reqPermissions": [
 {
 "name": "ohos.permission.INTERNET"
 }
]


2、支持http明文请求

默认支持https，如果要支持http，在

entry

下的

config.json

中

deviceConfig

字段下配置

 "deviceConfig": {"default": {
 "network": {
 "cleartextTraffic": true
 }
 }},


3、创建HttpRequest

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


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 })
 }
 })
 }


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"
 }
 ]
 }
}


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 //
}

/*
 * 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>
}


参考文档

• Text

• 尺寸设置

• 边框设置

• RichText

• Web

项目地址

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