在Flutter开发过程当中快速生成json解析模板类的工具 | 掘金技术征文

时间  2019-11-09
标签 flutter 开发过程 当中 快速 生成 json 解析 模板 工具 技术 征文 栏目 JavaScript 繁體版
原文   原文链接

若是你已经入门了Flutter的开发，并准备实现一个包含网络数据请求并解析数据显示在界面上的应用，那么你必定须要了解在Flutter中应该如何完成对JSON数据的解析和处理。

若是尚未看过官方的相关文档，请移步至JSON和序列化查看。java

能够看到Flutter使用的sdk中提供了dart:convert 包用于JSON的序列化和反序列化，其功能与iOS的NSJSONSerialization相似，都是直接将JSON数据转成NSDictionary / NSArray(或者JAVA中的Map/List)， 而后开发时经过输入字段名字符串的方式从中取值，很是的不方便。

另外一种方式则是编写模型类，这样能够在已知JSON结构和字段的状况下预先设置好类结构，开发时则能够方便地经过'点语法'进行数据字段取值，得到IDE代码提示的辅助，从而减小手误提升开发效率。然而编写大量类似的模板类代码无聊又费力，即便使用官方提供的json_serializable package包进行代码生成也仍是至关麻烦。

若是开发过android、iOS或者java后台应用，那么你应该曾使用过各类插件用于将JSON字符串解析生成模板类(例如GsonFormat和ESJsonFormat )，这些工具极大提升了开发效率。python

那么Flutter开发中有没有相似的工具可使用呢？本文就将介绍我参照这些工具专为Flutter编写的一个小工具(还有一个相似的在线工具：JSON to Dart，感兴趣的能够试试～～)：

JSONFormat4Flutter

github地址：github.com/debuggerx01…

使用操做演示：

使用说明

1.界面操做 (参考录屏：parse.gif)

  1. 工具运行之后，先将复制好的json字符串粘贴到左侧文本框，而后点击'格式化'按钮；若是提示出错请检查json是否合法
  2. 格式化成功后左侧json将会按照缩进格式化显示，而且右侧表格将显示分析得出的json结构，'Fields'列显示层级和原始分析数据，'Name'列显示每一个字段的名称，'Type'列用于设定字段的数据类型
    1. 对于普通数据类型(int、 double、 boolean、 String)，Types列的类型将会自动给出，请尽可能避免在上面滚动鼠标滚轮致使类型选择改变
    2. 对于值null的字段，Types列的类型会自动设置为Object，并以黄色背景做为警告。此时若是直接生成代码也是可使用的，只是该字段在使用时可能须要手动强转，因此建议在知晓该字段实际类型状况下尽可能补全json字符串后再点击'格式化'，或者在类型下拉框中指定实际的基本数据类型
    3. 对于自定义对象类型(或者说字典/Map)，'Fields'的对应输入框将留空并设为红色背景，须要您手动输入类型名称，并请注意：
      1. 任意一个字段没有输入类型名时点击代码生成按钮，都将弹出警告提示并拒绝生成代码
      2. 设置类型名时能够参考同一行'Name'栏的值进行设置以方便使用时识别字段，通常状况下推荐直接将'Name'栏内容首字母大写做为类型名
      3. 可是须要注意，类型名不可与'Name'栏内容彻底相同，且不能是dart中的关键字，不然生成的代码将包含语法错误
      4. 通常状况下第一行的数据类型为对象且'Name'栏内容为空，设置第一列的'Types'即为生成的bean的顶级对象类名，推荐使用'该json的做用+Resp/Bean'形式进行命名以方便管理
    4. 对于数组类型，'Types'栏将被自动设置，而且：
      1. 数组的泛型类型取决于数组的内容的类型，也就是下一行设置的类型；当数组下一行的内容类型变化时泛型也会自动改变
      2. 支持数组的嵌套泛型传递
      3. 支持空数组，而且生成的代码中其泛型会被设置为dynamic
    5. 特殊的，若是json自己的顶层级不是对象而是数组，那么须要为第一行的'Name'栏设置类型名称，获取顶层级数组数据的方式为对象bean.list
  3. 确认设置无误后，点击'生成Bean'按钮，左侧json显示栏的内容将被替换为生成的代码，可使用鼠标键盘全选复制，或者直接点击下方的'复制'按钮，而后将代码粘贴到IDE中，完成解析流程

2.生成代码说明 (参考录屏：use.gif)

  1. 反序列化(json字符串->对象)
    将生成的代码粘贴到dart源文件中后，便可以在任意地方导包使用，通常方法为(以http.get请求为例):linux

    var response = await HTTP.get(url);
var resp = BeanResp(response.body);
复制代码

    也就是说，将请求到的json内容做为参数传递给BeanResp的默认构造函数，这样生成的resp对象便是请求到内容的实体。 须要说明的是，默认构造既能够传入json的原始字符串，也能够传入已经用原生json.decode()方法解析过的json对象(这主要是为了照顾使用dio库进行数据请求时结果数据会被自动解析成json对象的状况)。 只有顶级对象拥有默认构造方法，而其余子层级对象将使用xxx.fromJson()的命名构造进行对象建立。android

  2. 序列化(对象->json字符串)
    与官方样例的处理方式不一样，直接调用对象的toString()方法便可获得json字符串完成序列化操做git

  3. 手动建立对象
    为了方便大部分使用场景下的便利性，bean的默认构造函数被用来实现反序列化，因此若是想要在代码中手动传参建立bean对象，可使用xxx.fromParams()命名构造来完成。github

简易运行方式：

在 Release 页面中，选择下载对应平台最新的二进制文件后——json

linux:

在程序目录打开终端后执行：chmod u+x Formatter_linux && ./Formatter_linuxwindows

mac：

在程序目录打开终端后执行：chmod u+x Formatter_mac && ./Formatter_mac数组

windows：

直接双击运行 Formatter_win.exebash

源码运行（以MAC为例）

没有python运行环境的用户须要先安装python

mac中可使用以下命令安装

brew install python3
brew install pip3
复制代码

pip3是python3的包管理工具

brew 能够参考下面的连接

brew.sh/index_zh-cn

运行库的时候会可能会提示

Traceback (most recent call last):
  File "formater.py", line 8, in <module>
    from mainwindow import *
  File "/Users/cjl/IdeaProjects/flutter/sxw-flutter-app/JSONFormat4Flutter/mainwindow.py", line 9, in <module>
    from PyQt5 import QtCore, QtGui, QtWidgets
ModuleNotFoundError: No module named 'PyQt5'

复制代码

这时候能够直接用 pip3 install PyQt5 pip3 install pyperclip 等待安装完成

（注：brew安装最新版python3可能会出现ssl模块丢失致使pip3没法正常使用，此时也能够考虑直接在python官网下载pkg包方式安装python）

后面使用就是在命令行敲入 python3 formatter.py

一些问题的说明

若是有什么问题，请在github上与我联系。下面列出几个已有的问题：

  1. 为何不作成AS/idea插件，而选择PyQt编写工具

    缘由其一是我曾写过简单的AS/idea插件，发现开发资料至关匮乏，调试也很麻烦，虽然也有一些现成的插件源码可供参考，可是开发这样一个工具的周期预计会大幅超过我当时容许的时间(本工具第一个可用版本的实际开发时间为3天多一点)；
    其二是因为Flutter既能够用AS/idea开发也能够用VSCode开发的特性(并且据我观察二者使用人数比例相仿)，两种IDE体系下开发插件的语言工具及流程都彻底不一样，一旦我选择了开发原生IDE插件，那么势必须要编写维护两份代码，成本过高；
    其三是由于python强大的文本处理能力使得它特别适合这种模板生成的工做，并且正巧以前的工做中就有利用python解析excel数据生成其余语言源代码的脚本，能够快速借用已有的代码逻辑来实现功能；
    其四是得益于PyQt强大的跨平台能力，能够方便快捷地打出三个桌面平台的应用包，从而达到接近原生插件的通用性(期待Flutter的桌面版项目早日成熟，这样之后开发桌面工具也多一种选择)
    另外，能够参考issue #9中的演示，将工具添加到IDE的外部工具中以方便打开，这样使用体验就与IDE插件更加类似了

  2. 生成的代码与官网上的样例风格不符

    由于我写这个玩意的时候官网文档尚未如今的样例模板(也可能单纯是我没注意到)，因此彻底是本身构思的方式来作的。后来看到样例后也想过仿照那个格式改一下，但转念一想其实也没什么本质区别，加上又忙就一直没动。我作这个工具主要仍是以可以处理各类奇怪json为目标的，好比为了处理多层list嵌套，顶级结构为list，list内部元素为基本数据类型等，这些花了很多精力……并且生成的代码里没用样例里类型转换，因此dart2升级强类型模式之后不少人根据那个样板写的json解析都报错的，而这个工具生成的却一直能用，既然可以保证功能，具体的风格方式问题应该也不必太过纠结了

  3. 如何实现经过泛型返回不一样的类型

    这主要是一些以前作android开发的同窗习惯于android开发中流行的’网络请求封装‘，就是假设后台返回的JSON拥有相同的一级结构，好比都是
    {"code":0,"msg":"success","data":{}}
    这种结构，全部的请求结果都须要先进行code和msg字段的判断处理，而后要使用的实际数据全在data字段中，因此但愿有一个统一的处理函数能够进行code和msg字段的处理，并经过指定泛型或class来返回指定类型的data内容对象。
    虽然我我的认为这只是个习惯问题，不必坚持，因为dart语法特性确实很差实现，那么不如换种形式同样能处理地很好，可是由于见到不止一我的有这种疑问，因此我试着用这种思路写了个dart版本的demo仅供参考，但愿有人能提供更好更优雅的方案：

Person接口返回的json： {"code":0,"msg":"success","data":{"name":"debuggerx","age":26}} Phone接口返回json： {"code":0,"msg":"success","data":{"model":"MI6X","price":1999}}

PersonResp.dart:

import 'dart:convert' show json;
class PersonResp {
  int code;
  String msg;
  Person data;

  PersonResp.fromParams({this.code, this.msg, this.data});

  factory PersonResp(jsonStr) => jsonStr is String ? PersonResp.fromJson(json.decode(jsonStr)) : PersonResp.fromJson(jsonStr);
  
  PersonResp.fromJson(jsonRes) {
    code = jsonRes['code'];
    msg = jsonRes['msg'];
    data = new Person.fromJson(jsonRes['data']);
  }

  @override
  String toString() {
    return '{"code": $code,"msg": ${msg != null?'${json.encode(msg)}':'null'},"data": $data}';
  }
}

class Person {
  int age;
  String name;
  
  Person.fromParams({this.age, this.name});
  
  Person.fromJson(jsonRes) {
    age = jsonRes['age'];
    name = jsonRes['name'];
  }

  @override
  String toString() {
    return '{"age": $age,"name": ${name != null?'${json.encode(name)}':'null'}}';
  }
}
复制代码

PhoneResp.dart:

import 'dart:convert' show json;
class PhoneResp {
  int code;
  String msg;
  Phone data;

  PhoneResp.fromParams({this.code, this.msg, this.data});

  factory PhoneResp(jsonStr) => jsonStr is String ? PhoneResp.fromJson(json.decode(jsonStr)) : PhoneResp.fromJson(jsonStr);
  
  PhoneResp.fromJson(jsonRes) {
    code = jsonRes['code'];
    msg = jsonRes['msg'];
    data = new Phone.fromJson(jsonRes['data']);
  }

  @override
  String toString() {
    return '{"code": $code,"msg": ${msg != null?'${json.encode(msg)}':'null'},"data": $data}';
  }
}

class Phone {
  int price;
  String model;

  Phone.fromParams({this.price, this.model});
  
  Phone.fromJson(jsonRes) {
    price = jsonRes['price'];
    model = jsonRes['model'];
  }

  @override
  String toString() {
    return '{"price": $price,"model": ${model != null?'${json.encode(model)}':'null'}}';
  }
}
复制代码

只须要编写一个BaseResp.dart以下：

import 'dart:convert' show json;

class BaseResp<T> {
  int code;
  String msg;
  T data;

  factory BaseResp(jsonStr, Function buildFun) =>
      jsonStr is String ? BaseResp.fromJson(json.decode(jsonStr), buildFun) : BaseResp.fromJson(jsonStr, buildFun);

  BaseResp.fromJson(jsonRes, Function buildFun) {
    code = jsonRes['code'];
    msg = jsonRes['msg'];
    /// 这里能够作code和msg的处理逻辑
    data = buildFun(jsonRes['data']);
  }
}
复制代码

那么在解析的位置能够写以下代码：

var response = await HTTP.get(url);
Person data = BaseResp<Person>(response.body, (res) => Person.fromJson(res)).data;
///或者
Phone data = BaseResp<Phone>(response.body, (res) => Phone.fromJson(res)).data;
复制代码

也就是说，经过构造BaseResp对象，指定data对象的泛型，并传入data对象特有的fromJson构造函数，便可实现对象的建立，最后经过'.data'取值，便可获得想要的特定类型的data。

固然，那一长串挺长的，每次写这么一大段也有点麻烦，能够把这一行代码作成代码模板，只留下泛型部分做为模板变量便可。

更新：

有小伙伴指出，上面的BaseResp并不能很好地处理json中data的类型为数组的状况，也就是是相似： {"code":0,"msg":"success","data":[{"name":"debuggerx","age":26},{"name":"dx","age":27}]} data的类型为List<Person>这种状况。此时能够参考issue 11扩充一个BaseRespList便可解决这个问题。

从 0 到 1：个人 Flutter 技术实践 | 掘金技术征文，征文活动正在进行中

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程