为什么要将网络数据转模型数据

1. 后端提供的渲染界面的数据都是字典类型的数据
2. 字典数据渲染界面时，使用key读取数据，而key容易出错
3. 模型数据渲染界面时，由于数据模型是对象，使用模型对象的属性读取数据，语法简洁，不易出错
4. 结论
   • 在获取到网络数据之后，渲染界面之前，可以将字典数据转成模型数据，方便界面渲染
   

什么是数据模型

1. 数据模型是一个对象，模型对象中使用属性存储并读取数据
2. 数据模型内部结构：
   • 数据模型的属性：用于存储并读取数据
   • 构造函数：用于实例化模型对象
   • 工厂构造函数：用于将网络数据转模型数据

class ImageBannersModel {
  // 1. 数据模型的属性：用于存储并读取数据
  final String? id;
  final String? imgUrl;
  final String? hrefUrl;
  final String? type;

  // 2. 类名构造函数：用于实例化模型对象
  ImageBannersModel({
    this.id,
    this.imgUrl,
    this.hrefUrl,
    this.type,
  });
  
  // 3. 工厂构造函数：将网络数据转模型数据 并返回
  // json 用于接收字典数据
  factory ImageBannersModel.formJson(Map<String, dynamic> json) {
    return ImageBannersModel(
      id: json['id'],
      imgUrl: json['imgUrl'],
      hrefUrl: json['hrefUrl'],
      type: json['type'],
    );
  }
}

如何将网络数据转模型数据

1. 核心逻辑：
   • 基本数据类型转对象，也就是：将字典数据转存到模型对象中
2. 定义模型的套路
   • 分析网络数据结构（由外向内逐层分析）
   • 每个字典都对应一个数据模型
   • 字典列表对应数据模型列表
3. 模型的种类
   • 普通模型：字典 -- 模型对象
   • 嵌套模型：字典嵌套字典 -- 模型对象嵌套模型对象

网络数据转模型数据-数据模型

home-model.dart

class HomeModel {
  // 1. 模型属性：存储并读取数据
  final List<ImageBannersModel>? imageBanners;
  // 2. 构造函数：实例化模型对象
  HomeModel({
    this.imageBanners
  });
  / 3. 工厂构造函数：将网络数据转模型数据 并返回
  factory HomeModel.formJson(Map<String, dynamic> json) {
    // 将轮播图字典列表 转 模型列表
    List imageBannersJson = json['imageBanners'];
    List<ImageBannersModel> imageBanners = [];
    imageBannersJson.forEach((item) {
      imageBanners.add(ImageBannersModel.formJson(item));
    });
    return HomeModel(
      imageBanners: imageBanners,
      categoryGrids: categoryGrids,
      hotRecommends: hotRecommends,
      freshGoods: freshGoods,
      hotBrands: hotBrands,
      projects: projects,
      categoryBanners: categoryBanners,
    );
  }
}

class ImageBannersModel {
  final String? id;
  final String? imgUrl;
  final String? hrefUrl;
  final String? type;

  ImageBannersModel({
    this.id,
    this.imgUrl,
    this.hrefUrl,
    this.type,
  });

  factory ImageBannersModel.formJson(Map<String, dynamic> json) {
    return ImageBannersModel(
      id: json['id'],
      imgUrl: json['imgUrl'],
      hrefUrl: json['hrefUrl'],
      type: json['type'],
    );
  }
}

home-api.dart

class HomeAPI {
  static Future<HomeModel> homeFetch() async {
    Response response = await XTXRequestManager().handleRequest('home/index', 'GET');
    // 读取result字段
    dynamic ret = response.data['result'];
    HomeModel homeModel = HomeModel.formJson(ret);
    return homeModel;
  }
}

home-page.dart

void _loadData() async {
    try {
      // 使用首页接口方法 请求获取首页模型数据
      HomeModel homeModel = await HomeAPI.homeFetch();
      debugPrint('$homeModel');
    } catch (e) {
      // 4.捕获异常
      debugPrint('$e');
    }
}

补充

debugPrint

存在问题：

1. print()方法在开发环境和生产环境都会打印输出调试信息
2. 如果在生产环境打印输出调试信息会影响程序性能

解决办法：

1. debugPrint()方法
2. debugPrint()方法只在开发环境打印输出调试信息，生产环境不会打印输出调试信息

提示：

1. debugPrint()方法只能打印输出字符串，所以在使用时需要将要打印输出的内容转成字符串形式