Flutter json_serializable

开始json反序列化

第一步：创建mock数据

在实际开发过程中，我们可能会对之前的一些代码进行修改。当我们代码功能复杂并且量足够大的时候，我们需要使用单元测试来保证新添加的代码不会影响之前所写的代码。而服务器的数据经常会变化，所以第一步当然是创建一个我们的mock数据啦。

这里使用了GITHUB/HackerNews的数据(https://github.com/HackerNews/API)

abstract class JsonString{
  static final String mockdata = ''' {
  "by" : "dhouston",
  "descendants" : 71,
  "id" : 8863,
  "kids" : [ 8952, 9224, 8917, 8884, 8887, 8943, 8869, 8958, 9005, 9671, 8940, 9067, 8908, 9055, 8865, 8881, 8872, 8873, 8955, 10403, 8903, 8928, 9125, 8998, 8901, 8902, 8907, 8894, 8878, 8870, 8980, 8934, 8876 ],
  "score" : 111,
  "time" : 1175714200,
  "title" : "My YC app: Dropbox - Throw away your USB drive",
  "type" : "story",
  "url" : "http://www.getdropbox.com/u/2/screencast.html"
}''';
}

第二步：添加依赖

在pubspec.yaml中添加如下依赖

dependencies:
  # Your other regular dependencies here
  json_annotation: ^1.2.0

dev_dependencies:
  # Your other dev_dependencies here
  build_runner: ^0.10.2
  json_serializable: ^1.5.1

这里需要添加三个依赖，它们分别是："json_annotation" "build_runner" 和 "json_serializable"。

请注意，yaml配置文件对于缩进要求十分严格，下面的build_runner和json_serializable应该是与flutter_test平级的，千万不要写在flutter_test缩进后，这样它会认为这两个是flutter_test的子集目录！

由于很多朋友在这一步遇到了问题，这里贴出源码

image

第三步：根据json创建实体类

我们这里根据上面的json数据写好了一个dart的实体类

class Data{
  final String by;
  final int descendants;
  final int id;
  final List<int> kids;
  final int score;
  final int time;
  final String title;
  final String type;
  final String url;

  Data({this.by, this.descendants, this.id, this.kids, this.score, this.time,
    this.title, this.type, this.url});
}

我们在这里使用了dart语法糖创建了构造函数。具体请参考(https://www.dartlang.org/guides/language/language-tour#using-constructors)。

第四步：关联实体类文件

我们需要在我们的实体类中关联生成文件。

import 'package:json_annotation/json_annotation.dart';

part 'data.g.dart';

@JsonSerializable()
class Data {
  final String by;
  final int descendants;
  final int id;
  final List<int> kids;
  final int score;
  final int time;
  final String title;
  final String type;
  @JsonKey(nullable: false)
  final String url;

  Data({this.by, this.descendants, this.id, this.kids, this.score, this.time,
    this.title, this.type, this.url});

刚写完data.g.dart的会报错，这是正常的！因为我们还没生成解析文件

  • 为了使实体类文件找到生成文件，我们需要 part 'data.g.dart'。

第五步：生成Json解析文件

当当当...!这里开始就是重头戏了！！

我们要使用JsonSerializable生成代码的话必须要在需要生成代码的实体类前添加注解@JsonSerializable(),而要使用这个注解我们必须引入json_annotation/json_annotation.dart这个包。

import 'package:json_annotation/json_annotation.dart';

@JsonSerializable()
class Data{
  final String by;
  final int descendants;
  final int id;
  final List<int> kids;
  final int score;
  final int time;
  final String title;
  final String type;
  final String url;

  Data({this.by, this.descendants, this.id, this.kids, this.score, this.time,
    this.title, this.type, this.url});
}

这里需要注意，flutter编码规范dart文件名统一小写，这样可以避免很多问题。ok这样实体类就创建完成啦。

那么问题来了，应该如何生成代码呢？

还记得我们刚才添加的build_runner的依赖吗，这时候我们就需要它来帮忙咯。

build_runner

build_runner是dart团队提供的一个生成dart代码文件的外部包。

我们在当前项目的目录下运行flutter packages pub run build_runner build

image

运行成功后我们应该能在这个实体类的下面发现一个新的文件

image

这个data.g.dart就是build_runner根据JsonSerializable生成的json解析文件。
我们来看看这个生成的dart文件

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'data.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

Data _$DataFromJson(Map<String, dynamic> json) {
  return Data(
      by: json['by'] as String,
      descendants: json['descendants'] as int,
      id: json['id'] as int,
      kids: (json['kids'] as List)?.map((e) => e as int)?.toList(),
      score: json['score'] as int,
      time: json['time'] as int,
      title: json['title'] as String,
      type: json['type'] as String,
      url: json['url'] as String);
}

Map<String, dynamic> _$DataToJson(Data instance) => <String, dynamic>{
      'by': instance.by,
      'descendants': instance.descendants,
      'id': instance.id,
      'kids': instance.kids,
      'score': instance.score,
      'time': instance.time,
      'title': instance.title,
      'type': instance.type,
      'url': instance.url
    };

同志们请注意这段代码最上面的注释"// GENERATED CODE - DO NOT MODIFY BY HAND"。你可千万别手写生成文件啊哈哈哈哈。

这段代码生成实体类库的一个part，在老版本part中有一个抽象实体类的mixin，dart中使用基于mixin的继承来解决单继承的局限性。

新版本中声称了两个方法，fromJson和toJson方法，它们能干什么相信大家从名字上就能猜到了。

【对part感兴趣的同学可以参考https://juejin.im/post/5b601f40e51d4519575a5036#heading-8 Dart | 浅析dart中库的导入与拆分。

对mixin感兴趣的同学可以在(https://www.dartlang.org/guides/language/language-tour#adding-features-to-a-class-mixins)了解更多关于mixin的知识。】

  • _$DataFromJson:它接收了一个map：Map<String, dynamic>，并将这个Map里的值映射为我们所需要的实体类对象。我们就可以使用这个方法，将存有json数据的map转化为我们需要的实体类对象。
  • _$DataToJson:将调用此方法的对象直接根据字段映射成Map。

而这两个都是私有方法，part让两个文件共享作用域与命名空间，所以我们需要将生成的方法暴露给外部。

然后我们再回到实体类中将 添加fromJson 和 toJson方法。

import 'package:json_annotation/json_annotation.dart';

@JsonSerializable()
class Data{
  final String by;
  final int descendants;
  final int id;
  final List<int> kids;
  final int score;
  final int time;
  final String title;
  final String type;
  final String url;

  Data({this.by, this.descendants, this.id, this.kids, this.score, this.time,
    this.title, this.type, this.url});
//反序列化
  factory Data.fromJson(Map<String, dynamic> json) => _$DataFromJson(json);
//序列化
  Map<String, dynamic> toJson() => _$DataToJson(this);
}
  • 提供一个工厂构造方法Data.fromJson，该方法实际调用生成文件的DataFromJson方法。
  • 提供一个toJson()序列化对象的方法，实际调用生成文件的_$DataToJson()方法，并将调用对象解析生成Map<String ,dynamic>。

这样Json反序列化的工作就完成啦！

第六步：JSON反序列化

我们刚才实现了Map to Dart，可是我们需要的是json to dart。这时候就需要dart自带的 dart:convert 来帮助我们了。

dart:convert

dart:convert是dart提供用于在不同数据表示之间进行转换的编码器和解码器，能够解析JSON和UTF-8。

也就是说我们需要先将json数据使用dart:convert转成Map，我们就能通过Map转为dart对象了。

使用方法

Map<String ,dynamic> map = json.decode("jsondata");

知道了如何将jsonString解析成map以后我们就能直接将json转化为实体对象啦。

转化方法

    Data data = Data.fromJson(json.decode('jsondata'));

第七步：编写单元测试

flutter给我们提供了单元测试，它的好处在于，我们想要验证代码的正确性不用跑整个程序，每次只用跑一个单元测试文件。而且养成习惯编写单元测试以后，能够保证以后在开发过程中快速精确定位错误，避免新加入的代码破坏老的代码引起项目崩溃。每次应用启动前都会跑一遍单元测试以确保项目能够正确运行。在实际开发中我们应该使用的mock数据来作为测试数据来源。

使用方法：
右键run这个测试文件

import 'dart:convert';

import 'package:flutter_test/flutter_test.dart';
import 'package:wmkids/data/mockdata.dart';
import 'package:wmkids/data/data.dart';

void main(){
  group('jsonparse test', (){
    test('mockdata test', (){
      Data data1 = Data.fromJson(json.decode(JsonString.mockdata));
      expect(data1.url, 'http://www.getdropbox.com/u/2/screencast.html');
    });
  });
}

我们使用到了第一步创建的mock数据，并验证了该json的url，假如我们解析正确这个单元测试将会通过。

image

这里的group是一组测试，一个group中可以有多个test验证我们的代码是否正确。

expect(data1,data2);会check我们的data1与data2的值是否相等，假如一样的话就会通过测试。假如不一样的话会告诉我们哪里不一样。

image

常用场景特殊处理办法

对象嵌套场景下的json解析

在json中经常会使用嵌套信息，我们在解析成dart文件的时候需要解析成对象嵌套。在这种场景下需要将编写步骤做一个调整。
我们需要在编写实体类的时候就带上工厂方法，因为对象存在依赖关系，先要保证子对象是serializable的才能保证父对象成功解析。

image

这里提示有错误时正常的，然后再生成文件。

自定义字段

我们可以通过JsonKey自定义参数进行注释并自定义参数来自定义各个字段。例如:是否允许字段为空等。注意，这里不加任何JsonKey默认允许空json字段。

例如：

image

这里的json使用了“-”作为字段名，而dart中只允许字母数字下划线作为变量名。所以我们必须对它进行特殊处理。@JsonKey(name="Nicehash-CNHeavy")来解析map。

image

然后再生成文件。

image

我们可以发现，生成文件已经将map中的NicehashCNHeavy替换成了Nicehash-CNHeavy。

泛型情况

github源码参考

https://github.com/Vadaski/Vadaski-flutter_note_book/tree/master/mecury_project/example/flutter_auto_json_parsing

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,905评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,140评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,791评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,483评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,476评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,516评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,905评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,560评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,778评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,338评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,925评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2赞 342