Flutter實戰視頻-移動電商-41.詳細頁_數據接口的調試

41.詳細頁_數據接口的調試

創建數據模型層，咱們的業務邏輯分開，而後進行後臺數據的調試

 

生成model類

json數據：

{
  "code": "0",
  "message": "success",
  "data": {
    "goodInfo": {
      "image5": "",
      "amount": 10000,
      "image3": "",
      "image4": "",
      "goodsId": "ed675dda49e0445fa769f3d8020ab5e9",
      "isOnline": "yes",
      "image1": "http://images.baixingliangfan.cn/shopGoodsImg/20190116/20190116162618_2924.jpg",
      "image2": "",
      "goodsSerialNumber": "6928804011173",
      "oriPrice": 3.00,
      "presentPrice": 2.70,
      "comPic": "http://images.baixingliangfan.cn/compressedPic/20190116162618_2924.jpg",
      "state": 1,
      "shopId": "402880e860166f3c0160167897d60002",
      "goodsName": "可口可樂500ml/瓶",
      "goodsDetail": "<img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081109_5060.jpg\" width=\"100%\" height=\"auto\" alt=\"\" /><img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081109_1063.jpg\" width=\"100%\" height=\"auto\" alt=\"\" /><img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081110_8029.jpg\" width=\"100%\" height=\"auto\" alt=\"\" /><img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081110_1074.jpg\" width=\"100%\" height=\"auto\" alt=\"\" /><img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081110_8439.jpg\" width=\"100%\" height=\"auto\" alt=\"\" /><img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081110_6800.jpg\" width=\"100%\" height=\"auto\" alt=\"\" />"
    },
    "goodComments": [
      {
        "SCORE": 5,
        "comments": "果斷卸載，2.5個小時才送到",
        "userName": "157******27",
        "discussTime": 1539491266336
      }
    ],
    "advertesPicture": {
      "PICTURE_ADDRESS": "http://images.baixingliangfan.cn/advertesPicture/20190113/20190113134955_5825.jpg",
      "TO_PLACE": "1"
    }
  }
}

View Code

 

 

json生成dart類的網址：

https://javiercbk.github.io/json_to_dart/

 

在models文件夾下面新建details.dart類，並把咱們生成的類複製過來。

生成的類須要稍微修改一下，類名修改成DetailsGoodsModel

裏面的Data數據修改成DatailsGoodsData

 

 

設置後臺的URL

 

'getGoodDetailById':serviceUrl+'wxmini/getGoodDetailById',//商品詳細信息

 

Provide

provide/新建details_info.dart

咱們的業務邏輯要寫在provide裏面。

因此須要引入：../service/service_method.dart

引入四個必要的包，而後class類要混入，。ChangeNotifier

UI和業務邏輯分開，因此獲取數據咱們就寫在Provide裏面

後臺獲取數據的方法就寫完了。

 

provide全局注入

在main.dart中注入

 

UI調用

新寫一個方法，看看後臺有沒有數據，打印到控制檯就能夠了。

build方法內調用

 

運行測試

點擊後報了一個錯誤

 

Unhandled Exception: type 'double' is not a subtype of type 'int'

 

修正錯誤

保存後，大R進行熱加載，成功的返回了數據