为了方便数据使用,我们将服务器拿到的数据转换为map类型,但是在使用是大量的数据会让使用map时头大,比如每个map都key都需要手动输入,很是麻烦。

本文使用了json_serializable将map数据转换为类类型,创建我们自己的实体类。使用时,将转换的对象(点)属性就可以了,方便许多。

下文将模型转换进行了封装,包括单个模型以及List嵌套模型,创建BaseEntity泛型模型。

 

使用:

  在配置文件中添加json_serializable包。

dependencies:
  flutter:
    sdk: flutter

    json_serializable: ^3.5.1 #json序列化

       在配置文件中添加

dev_dependencies:
  flutter_test:
    sdk: flutter
  integration_test:
    sdk: flutter

  build_runner: ^1.11.0 #用于生成g文件

 

在以往的配置中需要配置json_annotation类库,但是我发现在最新的json_serializable库中已经存在json_annotation库,可能是已经集成进去了,所以咱们就不写了。

首先准备json数据,我使用的是fastmock在线接口平台,可以写测试数据,挺方便。

例如数据为:

{
    "userImg":"https://img2.woyaogexing.com/2021/01/23/0e945e70341f4626b2f4a7c48991ea9e!400x400.jpeg",
    "nickName":"静怡学姐",
    "date":"2013-5-12",
    "tuijieContent":"为你推荐·19542人已关注ta·获得35124赞同",
    "isGuanzhu":false,
    "title":"毛孔粗大之后真的不可逆吗?",
    "content":"可逆!可逆!可逆!重要的事情说三遍!如果你看完还不清楚自己什么毛孔,可以发私信问我哦,科可以想我付费咨询,记得带自己的简历哦",
    "zanCount":1231,
    "pinglunCount":55252,
    "contentImg":"http://pic.5tu.cn/uploads/allimg/201003/010P0000109240-1.jpg"
  }

然后使用这个牛逼工具。将json数据转换为dart实体类数据。点我点我

fastapi封装tensorflow serving服务 flutter 封装_flutter

 

 

 将json代码拷贝到左边,右边写上实体类名称,下方红色字体为实体类对应的文件名,全小写格式。

fastapi封装tensorflow serving服务 flutter 封装_实体类_02

 

 

 复制生成的代码到创建的.dart文件当中,此时程序就报错,找不到

fastapi封装tensorflow serving服务 flutter 封装_flutter_03

 

 

 这个文件。这是需要用到刚才带入的类库build_runner中的文件生成命令。

 执行build_runner命令

 Terminal运行:flutter packages pub run build_runner build,自动生成g.dart
在工程的Terminal下运行代码: 这是一个实时监控bean中类型变化的。主要依赖库build_runner.

这样文件生成完成。

使用

fastapi封装tensorflow serving服务 flutter 封装_实体类_04

 

 

 这样就可以正常使用了。

 

封装:

如果你这样做了,开发过程中你会发现一个头疼的问题。json转list集合问题。

我们上面用的是单独一个json对象的列子。所以不存在集合,那么接下来我要准备一个集合代码。

 

List   Json数据。

{
  "code":1,
  "msg":"成功",
  "data":[
  {
    "userImg":"https://img2.woyaogexing.com/2021/01/23/0e945e70341f4626b2f4a7c48991ea9e!400x400.jpeg",
    "nickName":"静怡学姐",
    "date":"2013-5-12",
    "tuijieContent":"为你推荐·19542人已关注ta·获得35124赞同",
    "isGuanzhu":false,
    "title":"毛孔粗大之后真的不可逆吗?",
    "content":"可逆!可逆!可逆!重要的事情说三遍!如果你看完还不清楚自己什么毛孔,可以发私信问我哦,科可以想我付费咨询,记得带自己的简历哦",
    "zanCount":1231,
    "pinglunCount":55252,
    "contentImg":"http://pic.5tu.cn/uploads/allimg/201003/010P0000109240-1.jpg"
  },
  {
    "userImg":"https://img2.woyaogexing.com/2021/01/23/a8fba61a2ff840ac8722d80b57c74cbc!400x400.jpeg",
    "nickName":"静怡学姐",
    "date":"2013-5-12",
    "tuijieContent":"为你推荐·19542人已关注ta·获得35124赞同",
    "isGuanzhu":false,
    "title":"毛孔粗大之后真的不可逆吗?",
    "content":"可逆!可逆!可逆!重要的事情说三遍!如果你看完还不清楚自己什么毛孔,可以发私信问我哦,科可以想我付费咨询,记得带自己的简历哦",
    "zanCount":1231,
    "pinglunCount":55252,
    "contentImg":"http://pic.5tu.cn/uploads/allimg/201407/010P000040I52Q011-1.jpg"
  }
]
}

同样,用工具吧这个代码拷贝进去自己生成。

还是用这个工具点我点我。

得到以下代码:

import 'package:json_annotation/json_annotation.dart'; 
  
part 'attention_entity.g.dart';


@JsonSerializable()
  class AttentionEntity extends Object {

  @JsonKey(name: 'code')
  int code;

  @JsonKey(name: 'msg')
  String msg;

  @JsonKey(name: 'data')
  List<Data> data;

  AttentionEntity(this.code,this.msg,this.data,);

  factory AttentionEntity.fromJson(Map<String, dynamic> srcJson) => _$AttentionEntityFromJson(srcJson);

  Map<String, dynamic> toJson() => _$AttentionEntityToJson(this);

}

  
@JsonSerializable()
  class Data extends Object {

  @JsonKey(name: 'userImg')
  String userImg;

  @JsonKey(name: 'nickName')
  String nickName;

  @JsonKey(name: 'date')
  String date;

  @JsonKey(name: 'tuijieContent')
  String tuijieContent;

  @JsonKey(name: 'isGuanzhu')
  bool isGuanzhu;

  @JsonKey(name: 'title')
  String title;

  @JsonKey(name: 'content')
  String content;

  @JsonKey(name: 'zanCount')
  int zanCount;

  @JsonKey(name: 'pinglunCount')
  int pinglunCount;

  @JsonKey(name: 'contentImg')
  String contentImg;

  Data(this.userImg,this.nickName,this.date,this.tuijieContent,this.isGuanzhu,this.title,this.content,this.zanCount,this.pinglunCount,this.contentImg,);

  factory Data.fromJson(Map<String, dynamic> srcJson) => _$DataFromJson(srcJson);

  Map<String, dynamic> toJson() => _$DataToJson(this);

}

可以看到,代码生成了两个类,一个是我们定义的最外层的实例,一个是我们data数据集合的实例。

使用方式:

_getData(){
    ApplicationDioUtils.dioUtil.get(UrlKit.getGuanzhuList,success: (data){
      AttentionEntity attentionEntity = AttentionEntity.fromJson(data);
     
      print(baseEntity.data[0].title);
    },error: (code,message){

    });
  }

我们得到了集合数据。完美。。~·~

but,这不是我想要的,一般来说我们的json数据都是以这样的方式传输给客户端。

{
  "code":1,
  "msg":"成功",
  "data":{}
}

如果做一个外层实例化,那么也就不用每个实体类中都有这些重复字段了。

先这样。再那样,然后这样。

手动个创建一个baseEntity。内容是这样的

import 'package:flutter_zhihu/models/attention_entity.dart';
import 'package:json_annotation/json_annotation.dart';

part 'base_entity.g.dart';


@JsonSerializable(createToJson: false)
class BaseEntity<T>{

  @JsonKey(name: 'code')
  int code;

  @JsonKey(name: 'msg')
  String msg;

  @JsonKey(fromJson: _dataFromJson)
  T data;

  BaseEntity(this.code,this.msg,this.data,);

  factory BaseEntity.fromJson(Map<String, dynamic> srcJson) => _$BaseEntityFromJson(srcJson);

  static T _dataFromJson<T>(Object json) {
  //判断json数据是否是map类型
    if (json is Map<String, dynamic>) {
    //这里是判断传入的泛型是那个Entity。由于本人没有找到更顺眼的判断方法,只能获取传入泛型的字符串和实体类字符串是否一样来判断了,如果有更好的方式记得告诉我。
      if(T.toString() == 'AttentionEntity'){
        AttentionEntity.fromJson(json) as T;
      }
    //创建一个entity实例,记得在这里写一个
    } else if (json is List) {
    //判断json数据是否是list集合
      if(T.toString() == 'List<AttentionEntity>'){
        return json.map((e) => AttentionEntity.fromJson(e as Map<String,dynamic>)).toList() as T;
      }
//创建一个entity实例,记得在这里写一个
}
  //阴阳json,直接一个报错。
    throw ArgumentError.value(
      json,
      'json',
      'Cannot convert the provided data.',
    );
  }



}

好了 ,很简单,baseEntity完成。这下创建实体类的时候,我们只复制data中的json就行了。

开始使用:

_getData(){
    ApplicationDioUtils.dioUtil.get(UrlKit.getGuanzhuList,success: (data){
//此data已经经过json.decode(response.data)转换了.
BaseEntity<List<AttentionEntity>> baseEntity = BaseEntity.fromJson(data);
BaseEntity<AttentionEntity> baseEntity1 = BaseEntity.fromJson(data); 
print(baseEntity.data[0].title); },error: (code,message){ }); 

}

搞定。