当前位置：网站首页>Nutrecipes developed based on arkui ETS
Nutrecipes developed based on arkui ETS
2022-07-27 09:08:00 【Hua Weiyun】
Today, I will make a nut recipe for you , There is a lot of recipe data , It covers many kinds of recipes .
request urlUrl:https://way.jd.com/jisuapi/search?keyword= Chinese cabbage &num=10&start=0&appkey=7c913be32b690701cd994d804a6d4294
Implemented function ：
Get interface data
Menu details page
What you can learn is ：
Network request
Scrollable components
Container components
Routing jump
Basic components
File structure
.├── 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 └── rawfileResults the preview ：
Get the news interface a
identification ：get
Address of the interface ：
Request mode ：
HTTPS GET POST
Request example ：
Url:https://way.jd.com/jisuapi/search?keyword= Chinese cabbage &num=10&start=0&appkey=7c913be32b690701cd994d804a6d4294
Request parameter description ：
Return parameter description ：
JSON Return to example
{"code":"10000","charge":false,"msg":" The query is successful ","result":{ "status": "0", "msg": "ok", "result": { "num": "10", "list": [ { "id": "8", "classid": "2", "name": " Vinegar cabbage ", "peoplenum": "1-2 people ", "preparetime": "10-20 minute ", "cookingtime": "10-20 minute ", "content": " Vinegar cabbage , It is a dish that northerners often eat , Especially in winter many years ago . At that time , There are no greenhouse dishes , winter , Every family basically eats Chinese cabbage stored in winter , Smart housewives always try to turn this monotonous dish into a variety of dishes , therefore , Vinegar cabbage is frequently served on the table . Delicious food is not distinguished between high and low , Use the most ordinary raw materials 、 The essence of delicious food is to make delicious dishes with the simplest condiments and the most common methods . This time, , I made vinegar cabbage , Similar to Shandong cuisine , Make this dish sour and sweet 、 Have an appetizer 、 It's good for young and old .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/115138_46688.jpg", "tag": " To lose weight , Home Dishes , Detox , Calcium supplement ", "material": [ { "mname": " oil ", "type": "0", "amount": " appropriate amount " }, { "mname": " salt ", "type": "0", "amount": " appropriate amount " }, { "mname": " Sichuan Pepper ", "type": "0", "amount": " appropriate amount " }, { "mname": " capsicum ", "type": "0", "amount": " appropriate amount " }, { "mname": " The onion ", "type": "0", "amount": " appropriate amount " }, { "mname": " ginger ", "type": "0", "amount": " appropriate amount " }, { "mname": " Garlic ", "type": "0", "amount": " appropriate amount " }, { "mname": " vinegar ", "type": "0", "amount": " appropriate amount " }, { "mname": " The soy sauce ", "type": "0", "amount": " appropriate amount " }, { "mname": " sugar ", "type": "0", "amount": " appropriate amount " }, { "mname": " starch ", "type": "0", "amount": " appropriate amount " }, { "mname": " Chinese cabbage ", "type": "1", "amount": "380g" } ], "process": [ { "pcontent": " Prepare the ingredients .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162550_84583.jpg" }, { "pcontent": " Slice the cabbage into thin slices .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162551_90620.jpg" }, { "pcontent": " Put the sliced cabbage into the side and the leaves respectively .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162551_20925.jpg" }, { "pcontent": " salt 、 sugar 、 Light soy sauce 、 Mix vinegar starch with a little water and set aside .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162552_23125.jpg" }, { "pcontent": " Heat the oil in the pot , First put in the pepper and stir fry until fragrant, then take it out . Add dry red pepper and stir fry .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162552_57046.jpg" }, { "pcontent": " Add shallots, ginger and garlic and stir fry until fragrant , Then add cabbage and stir fry .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162553_89090.jpg" }, { "pcontent": " Stir fry until the side of the dish softens , Add cabbage leaves .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162553_40445.jpg" }, { "pcontent": " Stir fry quickly until the vegetables are soft , Hook in the bowl of juice ", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162554_92210.jpg" }, { "pcontent": " Wrap the soup evenly on the top of the dish ", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162554_29522.jpg" } ] } ] }}}Next , Let's start today's actual combat , First create a project NutJoke
Click next
Because we need network requests
So we need to be able to config.json Configure network request permission
Steps of network request
1、 Declare network request permission
stay entry Under the config.json in module Configure permissions under the field
"reqPermissions": [ { "name": "ohos.permission.INTERNET" }]2、 Support http Plaintext request
The default support https, If you want to support http, stay entry Under the config.json in deviceConfig Field
"deviceConfig": {"default": { "network": { "cleartextTraffic": true } }},3、 establish HttpRequest
// The import module import http from '@ohos.net.http';// establish HttpRequest object let httpRequest = http.createHttp();4、 Initiate request
GET request （ The default is GET request ）
// Request mode ：GET getRequest() { // every last httpRequest Corresponding to one http Ask for a task , Do not reuse let httpRequest = http.createHttp() let url = "https://way.jd.com/jisuapi/search?keyword= Chinese cabbage &num=10&start=0&appkey=7c913be32b690701cd994d804a6d4294" httpRequest.request(url, (err, data) => { if (!err) { if (data.responseCode == 200) { console.info('=====data.result=====' + data.result) // Parsing data //this.content= data.result; // Parsing data var cookModel: CookModel = JSON.parse(data.result.toString()) // Determine the interface return code ,0 success if (cookModel.code == 1000) { // Set up the data 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 { // Abnormal interface , Pop up the prompt prompt.showToast({ message: " Data request failed " }) prompt.showToast({ message: jokeModel.error_code }) } } else { // request was aborted , Pop up the prompt prompt.showToast({ message: ' Network anomalies ' }) } } else { // request was aborted , Pop up the prompt prompt.showToast({ message: err.message }) } }) }5、 Parsing data （ A simple example ）
1. The network requested json character string
/* * 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": " Vinegar cabbage ", "peoplenum": "1-2 people ", "preparetime": "10-20 minute ", "cookingtime": "10-20 minute ", "content": " Vinegar cabbage , It is a dish that northerners often eat , Especially in winter many years ago . At that time , There are no greenhouse dishes , winter , Every family basically eats Chinese cabbage stored in winter , Smart housewives always try to turn this monotonous dish into a variety of dishes , therefore , Vinegar cabbage is frequently served on the table ." + " Delicious food is not distinguished between high and low , Use the most ordinary raw materials 、 The essence of delicious food is to make delicious dishes with the simplest condiments and the most common methods ." + " This time, , I made vinegar cabbage , Similar to Shandong cuisine , Make this dish sour and sweet 、 Have an appetizer 、 It's good for young and old .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/115138_46688.jpg", "tag": " To lose weight , Home Dishes , Detox , Calcium supplement ", "material": [ { "mname": " oil ", "type": "0", "amount": " appropriate amount " }, { "mname": " salt ", "type": "0", "amount": " appropriate amount " }, { "mname": " Sichuan Pepper ", "type": "0", "amount": " appropriate amount " }, { "mname": " capsicum ", "type": "0", "amount": " appropriate amount " }, { "mname": " The onion ", "type": "0", "amount": " appropriate amount " }, { "mname": " ginger ", "type": "0", "amount": " appropriate amount " }, { "mname": " Garlic ", "type": "0", "amount": " appropriate amount " }, { "mname": " vinegar ", "type": "0", "amount": " appropriate amount " }, { "mname": " The soy sauce ", "type": "0", "amount": " appropriate amount " }, { "mname": " sugar ", "type": "0", "amount": " appropriate amount " }, { "mname": " starch ", "type": "0", "amount": " appropriate amount " }, { "mname": " Chinese cabbage ", "type": "1", "amount": "380g" } ], "process": [ { "pcontent": " Prepare the ingredients .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162550_84583.jpg" }, { "pcontent": " Slice the cabbage into thin slices .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162551_90620.jpg" }, { "pcontent": " Put the sliced cabbage into the side and the leaves respectively .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162551_20925.jpg" }, { "pcontent": " salt 、 sugar 、 Light soy sauce 、 Mix vinegar starch with a little water and set aside .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162552_23125.jpg" }, { "pcontent": " Heat the oil in the pot , First put in the pepper and stir fry until fragrant, then take it out . Add dry red pepper and stir fry .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162552_57046.jpg" }, { "pcontent": " Add shallots, ginger and garlic and stir fry until fragrant , Then add cabbage and stir fry .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162553_89090.jpg" }, { "pcontent": " Stir fry until the side of the dish softens , Add cabbage leaves .", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162553_40445.jpg" }, { "pcontent": " Stir fry quickly until the vegetables are soft , Hook in the bowl of juice ", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162554_92210.jpg" }, { "pcontent": " Wrap the soup evenly on the top of the dish ", "pic": "http://api.jisuapi.com/recipe/upload/20160719/162554_29522.jpg" } ] }}2. Create the corresponding object
/* * 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 // Return instructions code: number // Return code ,1000 For successful query msg: string // result: { result: CookModel7 // joke status: number // Number msg: string // ok }}export class CookModel7 { num: string // channel 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>}Reference documents
Project address
边栏推荐
- Can "Gulangyu yuancosmos" become an "upgraded sample" of China's cultural tourism industry
- Matlab求解微分代数方程 (DAE)
- CUDA programming-05: flows and events
- As a VC, the auction house invested Web3 for the first time
- Specific methods and steps for Rockwell AB PLC to establish communication with PLC through rslinx classic
- “鼓浪屿元宇宙”，能否成为中国文旅产业的“升级样本”
- BEVFormer: Learning Bird’s-Eye-View Representation from Multi-Camera Images via Spatiotemporal Trans
- Five kinds of 3D attention/transformer finishing (a-scn, point attention, CAA, offset attention, point transformer)
- CUDA Programming -03: thread level
- 巴比特 | 元宇宙每日必读：广州南沙发布“元宇宙九条”措施，平台最高可获得2亿元资金支持...
猜你喜欢
How to optimize the deep learning model to improve the reasoning speed
E. Split into two sets
Flex layout (actual Xiaomi official website)
NIO this.selector.select()
Rewrite the tensorrt version deployment code of yolox
Restful
Is the operation of assigning values to int variables atomic?
PyQt5快速开发与实战 4.1 QMainWindow
对 int 变量赋值的操作是原子的吗？
Ctfshow ultimate assessment
随机推荐
8 kinds of visual transformer finishing (Part 2)
Size limit display of pictures
Babbitt | yuan universe daily must read: Guangzhou Nansha released the "Yuan universe nine" measures, and the platform can obtain up to 200million yuan of financial support
PyTorch自定义CUDA算子教程与运行时间分析
qt中使用sqlite同时打开多个数据库文件
"Weilai Cup" 2022 Niuke summer multi school training camp 1
CUDA Programming -03: thread level
500报错
Matlab求解微分代数方程 (DAE)
Easy language programming: allow the screen reading software to obtain the text of the label control
拍卖行做VC，第一次出手就投了个Web3
Ztree custom title attribute
8 kinds of visual transformer finishing (Part 1)
TensorFlow损失函数
Matlab画图技巧与实例：堆叠图stackedplot
ArkUI中的显式动画
How to deploy yolov6 with tensorrt
Music experience ceiling! Emotional design details of 14 Netease cloud music
Solve the problem of Chinese garbled code on the jupyter console
Can "Gulangyu yuancosmos" become an "upgraded sample" of China's cultural tourism industry