Flutter移动电商实战 --（41）详细页_数据接口的调试

偏执的太偏执、 2023-06-01 06:04 15阅读 0赞

建立数据模型层，我们的业务逻辑分开，然后进行后台数据的调试

# 生成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"
        }
      }
    }

json生成dart类的网址：

[https://javiercbk.github.io/json\_to\_dart/][https_javiercbk.github.io_json_to_dart]

![1090399-20190915210918390-1042386030.png][]

在models文件夹下面新建details.dart类，并把我们生成的类复制过来。

![1090399-20190915210945073-1154495547.png][]

生成的类需要稍微修改一下，类名修改为DetailsGoodsModel

里面的Data数据修改为DatailsGoodsData

![1090399-20190915211027243-1782225505.png][]

![1090399-20190915211056756-861841328.png][]

# 设置后台的URL #

![1090399-20190915211133458-1091453888.png][]

'getGoodDetailById':serviceUrl+'wxmini/getGoodDetailById',//商品详细信息

# Provide #

provide/新建details\_info.dart

![1090399-20190915211228007-659898209.png][]

我们的业务逻辑要写在provide里面。

所以需要引入：../service/service\_method.dart

引入四个必要的包，然后class类要混入，。ChangeNotifier

![1090399-20190915211305713-1785959601.png][]

UI和业务逻辑分开，所以获取数据我们就写在Provide里面

后台获取数据的方法就写完了。

![1090399-20190915211341659-2061553412.png][]

# provide全局注入 #

在main.dart中注入

![1090399-20190915211415636-1030438823.png][]

# UI调用 #

新写一个方法，看看后台有没有数据，打印到控制台就可以了。

![1090399-20190915211450278-953531590.png][]

build方法内调用

![1090399-20190915211522358-21162856.png][]

# 运行测试 #

点击后报了一个错误

![1090399-20190915211557429-1893849872.png][]

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

修正错误

![1090399-20190915211633419-1844907194.png][]

保存后，大R进行热加载，成功的返回了数据

![1090399-20190915211706361-1005711704.png][]

转载于:https://www.cnblogs.com/crazycode2/p/11494881.html

[https_javiercbk.github.io_json_to_dart]: https://javiercbk.github.io/json_to_dart/
[1090399-20190915210918390-1042386030.png]: /images/20230601/c71377de80614033aa66b22d75606e3e.png
[1090399-20190915210945073-1154495547.png]: /images/20230601/4eda9d88535840ae97da1288722d58b2.png
[1090399-20190915211027243-1782225505.png]: /images/20230601/f8b84fe266ff4f8b90428dfdfecee093.png
[1090399-20190915211056756-861841328.png]: /images/20230601/eff508bdbfc24afe9a523e850ddf26c0.png
[1090399-20190915211133458-1091453888.png]: /images/20230601/97f1d8ba18ca4e72bdc39fe7b1c4cb37.png
[1090399-20190915211228007-659898209.png]: /images/20230601/a6bad65f4f304b919e4af193c599c635.png
[1090399-20190915211305713-1785959601.png]: /images/20230601/bce238694410481e89c6b3e57899a641.png
[1090399-20190915211341659-2061553412.png]: /images/20230601/55276f8342af4eafadb16e1660664c40.png
[1090399-20190915211415636-1030438823.png]: /images/20230601/fce0b624dd2f473e8ee085c46e84400f.png
[1090399-20190915211450278-953531590.png]: /images/20230601/dff094dd2b0d432ea4b32d5c6cd0c4db.png
[1090399-20190915211522358-21162856.png]: /images/20230601/1eddfb1daf15433481e9f236b2aabf88.png
[1090399-20190915211557429-1893849872.png]: /images/20230601/66b4450c753e450a89102471649ed9b0.png
[1090399-20190915211633419-1844907194.png]: /images/20230601/fb16ba08ba3348c1984cd35ba073cc62.png
[1090399-20190915211706361-1005711704.png]: /images/20230601/e65d3e95c926448aaf2c1ba66e2478fb.png