Flutter开发之JSON解析

时间 2019-11-05

原文原文链接

对于JSON格式的数据交互，想必你们不会陌生。JSON(全称JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式，JSON由于具备易于人阅读和编写，同时也易于机器解析和生成，并有效地提高网络传输效率等特性，一般被用在客户端与服务端的数据交互中。git

对于JSON的基本知识，本文不作详细介绍，读者能够自行搜索资料进行学习。github

手动解析

手动解析一般应用在一些基本简单的场合，即数据结构不是很复杂的场景，手动解析JSON是指使用Flutter提供的dart:convert中内置的JSON解码器。它可以将原始JSON字符串传递给json.decode() 方法，而后在返回的Map<String, dynamic>中查找所需的值。它不须要依赖任何第三方库，对于小项目来讲很方便。web

例如，有下面一个接口：jsonplaceholder.typicode.com/posts/1，它的数…json

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
复制代码

因为上面的数据格式比较简单，所以咱们可使用手动解析的方式来解析它。bash

final responseJson = json.decode(response.body);
Map<String, dynamic> newTitle = responseJson ;
print(newTitle['title']);//打印title的值
复制代码

固然，咱们也能够新建一个实体类，而后将它解析到实体类中。网络

final responseJson = json.decode(response.body);
print(responseJson.toString());
Post postBean = Post.fromJson(responseJson);    //Post为实体类
复制代码

对于数据结构不是很复杂的时候，使用fromJson来解析字段还好，可是若是数据结构比较复杂的话，手写fromJson、toJson就不太友好，而且容易出错。数据结构

借助工具解析

在Android原生开发中，咱们可使用诸如Gson、FastJson等第三方库来帮助咱们将JSON数据转成实体类。一样，在Flutter开发中，咱们也可使用插件或工具来一键生成实体类。async

例如，下面是豆瓣电影提供的获取电影列表的一个接口，数据返回的格式以下：ide

{
count: 10,
start: 25,
total: 250,
subjects: [
{
rating: {
max: 10,
average: 9.1,
details: {

},
stars: "45",
min: 0
},
genres: [
"剧情",
"动做",
"科幻"
],
title: "蝙蝠侠：黑暗骑士",
casts: [
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1004.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1004.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1004.webp"
},
name_en: "Christian Bale",
name: "克里斯蒂安·贝尔",
alt: "https://movie.douban.com/celebrity/1005773/",
id: "1005773"
},
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13801.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13801.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13801.webp"
},
name_en: "Heath Ledger",
name: "希斯·莱杰",
alt: "https://movie.douban.com/celebrity/1006957/",
id: "1006957"
},
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p522.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p522.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p522.webp"
},
name_en: "Aaron Eckhart",
name: "艾伦·艾克哈特",
alt: "https://movie.douban.com/celebrity/1053577/",
id: "1053577"
}
],
durations: [
"152分钟"
],
collect_count: 813292,
mainland_pubdate: "",
has_video: true,
original_title: "The Dark Knight",
subtype: "movie",
directors: [
{
avatars: {
small: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p673.webp",
large: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p673.webp",
medium: "http://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p673.webp"
},
name_en: "Christopher Nolan",
name: "克里斯托弗·诺兰",
alt: "https://movie.douban.com/celebrity/1054524/",
id: "1054524"
}
],
pubdates: [
"2008-07-14(纽约首映)",
"2008-07-18(美国)"
],
year: "2008",
images: {
small: "http://img1.doubanio.com/view/photo/s_ratio_poster/public/p462657443.webp",
large: "http://img1.doubanio.com/view/photo/s_ratio_poster/public/p462657443.webp",
medium: "http://img1.doubanio.com/view/photo/s_ratio_poster/public/p462657443.webp"
},
alt: "https://movie.douban.com/subject/1851857/",
id: "1851857"
},
title: "豆瓣电影Top250"
}
复制代码

若是咱们使用fromJson、toJson来进行解析的话，就比较麻烦，而且还容易出错，所以咱们使用一些工具来辅助进行JSON解析。工具

在线生成

首先，打开JSON to Dart，以下图所示。

而后，咱们将接口返回的JSON数据拷贝到输入框中，点击建立Dart类，而后右边就是生成好的Dart代码。

而后，建立一个Dart实体类，将上面生成的实体类代码拷贝过去便可。不过，我在使用此种方式进行JSON解析的时候，遇到一个问题，

Cannot generate dart code. Please check the project caveats.
复制代码

以下图：

至于产生的缘由我也不是很是清楚，有知道的能够解释下。

FlutterJsonBeanFactory插件

除了上面的方式外，咱们还可使用FlutterJsonBeanFactory插件来辅助生成Bean类。安装FlutterJsonBeanFactory插件很简单，以Android Studio为例，依次选择【Android Studio】->【Preferences…】->【Plugins】，而后搜索FlutterJsonBeanFactory插件安装便可，以下图所示。

安装成功以后重启Android Studio便可，重启以后在new 的时候就会多一个【 dart bean class File from Json】选项，以下图所示。

而后，在项目的lib目录下右键并选择【new】->【dart bean class File from JSON】来建立一个实体类，以下图。

而后，点击【Make】按钮就能够生成一个dart实体类，以下图。

能够发现，使用JSON转换插件来辅助开发，对于Flutter开发是很是方便的。除了FlutterJsonBeanFactory插件，另外一款FlutterJsonHelper也能够完成JSON转换为Entity实体类的任务。

须要说明的是，生成实体类时，类名后面的entity是自动加上去的，能够在设置中配置自定义名称，以下图。

而后，咱们就可使用dio库或者httpclient来请求接口，并将它转换到moviesentity实体类上，以下所示：

//获取电影列表
void getFilmList() async {
    Dio dio = new Dio();
    Response response=await dio.get(hotMovies);
    print('电影数据：'+response.toString());

    Map userMap = json.decode(response.toString());
    var movies = new MoviesEntity.fromJson(userMap);
  }
复制代码