一个星期使用三种不同的开发模式完成资讯类App——《听风资讯》

迷南。 2023-02-20 02:51 2阅读 0赞

### 文章目录 ###

*  1.引言
 *  2.App开发模式的主要区别
 *  3.App开发模式在开发项目时所使用到的技术栈
 *  4.App开发时的感想
 *   *  4.1 Native App（原生App）
     *   *  4.1.1 Material Design的设计
         *   *  4.1.1.1 BottomNavigationView
             *  4.1.1.2 Toolbar
             *  4.1.1.3 SwipeRefreshLayout
             *  4.1.1.4 RecyclerView
             *  4.1.1.5 TabLayout
         *  4.1.2 Gson的解析
         *   *  4.1.2.1 Gson在遇到类型错误时的处理
             *  4.1.2.2 Gson和缓存
         *  4.1.3 ViewPager的懒加载
         *  4.1.4 Glide的占位图
     *  4.2 Web App（WebApp）
     *  4.3 HyBird App（混合App）
     *   *  4.3.1 使用setState()刷新界面
         *  4.3.2 使用FlutterJsonBeanFactory来解析Json数据
         *  4.3.3 使用Future完成异步操作
         *  4.3.4 使用compute()完成线程隔离
 *  5.总结

# 1.引言 #

最近一段时间由于毕设以及答辩等一系列的事情，已经很久没有更新博客了。在月初立下的Flag——[每天学习一个Android中的常用框架][Android]，也没能坚持下去。当然，作者并不是一个半途而废的人。等到最近的事情完成得差不多了，还是会继续更新这个系列的博文。  
事实上，在处理事情的同时，我研究了App的几种开发模式，并且尝试学习并运用其中的一些主流的技术栈。目前来说，App的开发模式主要分为**Native App**（原生App）、**Web App**（WebApp）、**HyBird App**（混合App）。这三种App的开发模式在网上都有具体的介绍，感兴趣的读者可以查找一下相关的资料。  
通过一段时间内对这三种开发模式的学习，为了加深自己的印象，本着实践出真知的想法，作者产生了使用这三种开发模式分别开发一个App的想法。一来是可以巩固自己的基础，二来也是提升自己的实践运用能力。  
经过一周的时间，作者成功根据三种App的开发模式开发出了文章名所说的资讯类App——《听风资讯》。由于作者本人的不熟练，项目里还存在相当多的可优化处。也因为项目的不成熟，该项目的源码就不公开放在码云上了，对项目感兴趣的读者可以私下联系我，QQ：545646733。

无图无真相，接下来把分别通过这三种App开发模式的App运行效果及其目录结构展示出来：

*  **Native App**（原生App）

![在这里插入图片描述][20200622165647321.gif_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70_pic_center]

*  **Web App**（WebApp）  
    ![在这里插入图片描述][20200622165821309.gif_pic_center]  
    ![在这里插入图片描述][20200623155248648.png_pic_center]
 *  **HyBird App**（混合App）  
    ![在这里插入图片描述][20200622165924209.gif_pic_center]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70_pic_center 1]  
    该App的功能比较简单，基本上就是仿照世面上常见的资讯类App。通过成果展示也可以看出，它们之间的共同功能有：
 *  网络访问接口数据（Json格式）；
 *  解析Json格式的数据，并且渲染到列表上；
 *  对图片加载的优化；
 *  下拉刷新；
 *  底部的导航栏；
 *  点击某条新闻时，进入该新闻对应的网页；
 *  循环展示的轮播图；
 *  页面中的导航栏；
 *  均实现了异步调用（即数据的获取和UI的渲染是分开的）
 *  沉浸式状态栏

接下来会介绍项目里这三种App开发模式的异同，以及作者开发过程中的一些感想。

# 2.App开发模式的主要区别 #

根据网络上查询的资料，三种App开发模式的主要区别如下：

# 3.App开发模式在开发项目时所使用到的技术栈 #

在资讯类App《听风资讯》中，针对三种App开发模式的特点，分别选用了如下所示的技术栈来进行设计：

<table> 
 <thead> 
  <tr> 
   <th align="center">性质/App类型</th> 
   <th align="center">Native App（原生App）</th> 
   <th align="center">Web App（WebApp）</th> 
   <th align="center">HyBird App（混合App）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">技术栈</td> 
   <td align="center">Android</td> 
   <td align="center">UniApp</td> 
   <td align="center">Flutter</td> 
  </tr> 
  <tr> 
   <td align="center">语言</td> 
   <td align="center">Java</td> 
   <td align="center">Vue.js</td> 
   <td align="center">Dart</td> 
  </tr> 
  <tr> 
   <td align="center">网络访问</td> 
   <td align="center">OkHttp</td> 
   <td align="center">Promise</td> 
   <td align="center">Dio</td> 
  </tr> 
  <tr> 
   <td align="center">图片加载</td> 
   <td align="center">Glide</td> 
   <td align="center">Image</td> 
   <td align="center">Image</td> 
  </tr> 
  <tr> 
   <td align="center">数据解析</td> 
   <td align="center">Gson</td> 
   <td align="center">/</td> 
   <td align="center">FlutterJsonBeanFactory</td> 
  </tr> 
  <tr> 
   <td align="center">侧拉栏</td> 
   <td align="center">DrawerLayout、NavigationView</td> 
   <td align="center">Drawer</td> 
   <td align="center">Drawer</td> 
  </tr> 
  <tr> 
   <td align="center">列表</td> 
   <td align="center">RecycleView、ViewPager</td> 
   <td align="center">V-for</td> 
   <td align="center">ListView、ListTitle</td> 
  </tr> 
  <tr> 
   <td align="center">状态栏</td> 
   <td align="center">Toolbar</td> 
   <td align="center">TitleNView</td> 
   <td align="center">AppBar</td> 
  </tr> 
  <tr> 
   <td align="center">轮播图</td> 
   <td align="center">Banner</td> 
   <td align="center">Swiper</td> 
   <td align="center">Swiper</td> 
  </tr> 
  <tr> 
   <td align="center">底部标签</td> 
   <td align="center">BottomNavigationView</td> 
   <td align="center">TabBar</td> 
   <td align="center">BottomNavigationBar</td> 
  </tr> 
  <tr> 
   <td align="center">导航栏</td> 
   <td align="center">TabHost</td> 
   <td align="center">/</td> 
   <td align="center">TabBarView</td> 
  </tr> 
  <tr> 
   <td align="center">下拉刷新</td> 
   <td align="center">SwiperRefreshLayout</td> 
   <td align="center">PullDownRefresh</td> 
   <td align="center">RefreshIndicator</td> 
  </tr> 
  <tr> 
   <td align="center">异步模型</td> 
   <td align="center">Handler、AsyncTask</td> 
   <td align="center">Await、Async</td> 
   <td align="center">Future、Isolate</td> 
  </tr> 
 </tbody> 
</table>

没有列出具体选项（即“/”）的格子即表示实现该功能还没有较好的技术手段或者本身就支持了，其余基本上都是当下较为流行的框架，版本号也是各代码仓库（GitHub、DCloud、Pub等）里最新（2020.6.22）的。

接下来，将会介绍作者在进行App开发时遇到的几个难点。

# 4.App开发时的感想 #

## 4.1 Native App（原生App） ##

原生App，即使用Java或者Kotlin语言进行实现的Android应用。最早入坑Android时，接触的基本上都是原生App。由于技术栈的原因，可以让熟悉Java/Kotlin语言的人很快就学会Android的很多特性，从而开始Android应用的研发。  
当然，作为高度可定制并且兼容性最佳的开发模式，原生App基本上作为当下Android应用的主流。但与此同时，也产生了诸如屏幕适配，大图加载，资源装载等许多细节问题。幸而目前原生App已经发展很成熟了，有许多好用的工具可以解决这些问题。  
作为Android工程师，最需要熟悉的App开发模式就是原生App了。记录完这篇博客后，作者将会研究一个更为成熟、好用的原生App脚手架，并通过另一篇博客进行记录（立下flag）。

接下来，谈谈作者在进行原生App开发时遇到的一些主要难点：

### 4.1.1 Material Design的设计 ###

#### 4.1.1.1 BottomNavigationView ####

BottomNavigationView是Google官方提供的一种实现**底部标签**切换的控件，在Android Studio 3.0之后就可以通过创建Activity中的`Bottom Navigation Activity`，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]  
最开始做项目时，要实现**底部标签**需要使用RadioGroup + RadioButton来实现这部分的功能，RadioButton还需要编写一个Selector来满足图标在点击时显示不同的图样，而使用BottomNavigationView似乎就能很好地解决这块的问题。

当然，使用BottomNavigationView时，需要注意几个要点：

1.  在初始化BottomNavigationView管理着的Fragment时，如果你的项目中使用到了Toolbar，则需要**先绑定Toolbar**，否则会报空指针异常，代码如下：
    
        // 初始化ToolBar，注意要在Fragment初始化之前调用，不然会报空指针异常，这里踩过坑！
        setSupportActionBar(tb_title);
        // 初始化Fragment
        initFragment();
2.  id的对应。`<menu>`标签和`<item>`标签中控件的id要对应，不然会不显示内容。
3.  另外，若使用BottomNavigationView，布局则推荐使用ConstraintLayout，即约束布局，这样会比较好控制控件的摆放（这个控件作者本人用的也不是很熟练，在使用时遇到了BottomNavigationView遮挡RecyclerView的情况，导致内容显示不全，最后作者用了很笨的方法才调整成功，希望有比较了解这块内容的读者能够在评论区不吝赐教，作者将感激不尽）

#### 4.1.1.2 Toolbar ####

Toolbar是Google官方提供的一种实现**状态栏**切换的控件，作为替换Actionbar的状态栏，功能要更为强大。

使用Toolbar时，需要注意几个要点：

1.  Android应用默认使用的是Actionbar，要使用Toolbar，记得在values/style.xml中声明Android应用的样式，即`NoActionBar`代码如下：
    
        
        	<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  <item name="colorPrimary">@color/colorRed</item> <item name="colorPrimaryDark">@color/colorRed</item> <item name="colorAccent">@color/colorAccent</item> </style>
2.  要通过Toolbar实现沉浸式状态栏，只需要修改values/style.xml中的配置颜色，并且让Toolbar的颜色也对应即可，代码如下：
    
        <item name="colorPrimary">@color/colorRed</item>
            <item name="colorPrimaryDark">@color/colorRed</item>
    
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tb_title"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
        </androidx.appcompat.widget.Toolbar>
3.  Toolbar的标题默认是显示在左边的，要想显示在正中，常见的做法是在Toolbar中嵌套一个居中显示的TextView，这里也可以使用一个工具类来调整Toolbar中标题的摆放，代码如下：
    
        public class ToolBarUtils { 
        
        public static void setTitleCenter(Toolbar toolbar) { 
            String title = "title";
            final CharSequence originalTitle = toolbar.getTitle();
            toolbar.setTitle(title);
            for (int i = 0; i < toolbar.getChildCount(); i++) { 
                View view = toolbar.getChildAt(i);
                if (view instanceof TextView) { 
                    TextView textView = (TextView) view;
                    if (title.equals(textView.getText())) { 
                        textView.setGravity(Gravity.CENTER);
                        Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.MATCH_PARENT);
                        params.gravity = Gravity.CENTER;
                        textView.setLayoutParams(params);
                    }
                }
                toolbar.setTitle(originalTitle);
            }
        	}
        }
4.  Toolbar默认是没有返回按钮的，若想开启需要先调用`getSupportActionBar().setDisplayHomeAsUpEnabled(true);`，然后实现其点击方法，代码如下：
    
        /** * 点击Toolbar上的“回退”按钮时触发的逻辑 * @param item * @return */
        @Override
        public boolean onOptionsItemSelected(MenuItem item) { 
            if(item.getItemId() == android.R.id.home)
            { 
                finish();
                return true;
            }
            return super.onOptionsItemSelected(item);
        }
5.  可以在设定Toolbar时用`?attr/actionBarSize`来界定其高度，代表之前应用还拥有Actionbr控件时的高度，控件整体代码如下：
    
        <androidx.appcompat.widget.Toolbar android:id="@+id/tb_title" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent">
        </androidx.appcompat.widget.Toolbar>

#### 4.1.1.3 SwipeRefreshLayout ####

SwipeRefreshLayout是Google官方提供的一种实现**下拉刷新**的控件，作为替换pullToRefresh的下拉刷新控件，使用和集成要相对简单一些。

使用SwipeRefreshLayout时，需要注意几个要点：

1.  在使用SwipeRefreshLayout时，建议只包裹一个List类型的控件即可，代码如下：
    
        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:id="@+id/srl_head" android:layout_width="match_parent" android:layout_height="match_parent">
        
            <androidx.recyclerview.widget.RecyclerView android:id="@+id/rl_head" android:layout_width="match_parent" android:layout_height="match_parent" />
        
        
        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
2.  在实现SwipeRefreshLayout的监听器`onRefresh()`方法后，下拉刷新时会循环展示刷新的动画，需要在数据显示完毕后手动调用`setRefreshing(false)`来关闭动画

#### 4.1.1.4 RecyclerView ####

RecyclerView是Google官方提供的一种实现**数据列表**的控件，作为替换ListView的数据列表控件，样式和使用都要相对好一些。（可能是作者使用ListView比较久了，觉得RecyclerView的布局适配比较难实现）

使用RecyclerView时，需要注意几个要点：

1.  RecyclerView的适配器需要继承`RecyclerView.Adapter<NewsDetailAdapter.ViewHolder>`，可以实现默认的ViewHolder优化；
2.  RecyclerView的适配器的构造方法所接受的**数据集合只有发生变动**了，RecyclerView的数据刷新方法才会生效，因此若单独写了其适配器类，则需要在获取到数据的时候配置RecyclerView以及其适配器；

#### 4.1.1.5 TabLayout ####

TabLayout是Google官方提供的一种实现**导航栏**的控件，作为替换ViewPagerIndicator的导航栏，样式和使用都要相对好一些。一般使用TabLayout都是需要搭配ViewPager的，因此可以使用官方提供的`setupWithViewPager`来绑定TabLayout和ViewPager，并且在ViewPager注册适配器时重写`getPageTitle`方法，以此来获取由ViewPager所管理着的Fragment所对应的碎片（如果想要保证顺序一致则需要在创建集合时调整插入的数据）

### 4.1.2 Gson的解析 ###

#### 4.1.2.1 Gson在遇到类型错误时的处理 ####

Gson是Google官网提供用来解析Json数据的工具，只需要将Json数据转化成实体类，就可以通过Gson将其转化成对象的形式。  
然而，有一种情况——平常解析的Json数据中的某个字段平时是一个对象类型，而在网络不佳的情况下则会传回一个空字符串("")，也就是说Json数据同一个字段同时出现了两种类型的情况。在这样的情形下，Gson会解析失败，并且会直接抛出异常，导致App闪退。  
为了解决这个问题，Gson提供了JsonDeserializer接口来让某个类自定义其反序列化的过程，具体操作可参照此篇博客：  
[  
JsonDeserializer——Gson自定义解析类型错误的字段][JsonDeserializer_Gson]

这篇博客很好地总结了Gson在解析Json同字段不同类型时的对策，事实上Gson还有许多使用方法，等待我们去学习。

#### 4.1.2.2 Gson和缓存 ####

为了避免Gson在解析失败等问题上抛出异常导致整个应用崩溃，可以在每次使用Gson解析数据之后将数据写入缓存（文件、Sp和数据库均可），这样可以保证在异常情况下（没有网络，Gson解析失效，网络传输慢）依然可以获得之前解析好的数据。作者使用Sp作为读写缓存，实现了一个简单的缓存工具类jsonCache，代码如下：

public class jsonCache { 
    
        // 设置缓存
        public static void setCache(Context context, String key,String value) { 
            SharedPreferencesUtils.putString(context,key,value);
        }
    
        // 读取缓存
        public static String getCache(Context context, String key,String defvalue) { 
            String string = SharedPreferencesUtils.getString(context, key, defvalue);
            return string;
        }
    }

### 4.1.3 ViewPager的懒加载 ###

使用ViewPager来管理Fragment，会同时导致这些Fragment执行`onCreateView`，即提前加载好所有的数据，这会让应用接收庞大的数据导致卡顿。为了解决这个问题，需要实现ViewPager的懒加载，即切换到这个Fragment时再获取其数据，保证应用的流畅度。说来惭愧，这项优化其实作者还没有进行落实，还在研究当中，力求寻找最优的方法，感兴趣的读者也可以查询相应资料。

### 4.1.4 Glide的占位图 ###

Glide是比较常用的图片加载工具，底部封装了三级缓存等大量图片加载优化。Glide还提供了大量的工具方法，其中包括有占位图的设置，即在图片还未加载出来时先放置占位图，这样可以提高用户的体验度，提高了应用的可用性。

## 4.2 Web App（WebApp） ##

WebbApp，即使用Html、Css、JavaScript等前端语言进行实现的Android应用。中间因为学习了一段时间的Java服务器的开发，自然而然也会接触到这些前端语言的学习。由于技术栈的原因，可以让熟悉前端的人在不熟悉后端语言的基础上，开始Android应用的研发。  
WebApp的开发相对其他两种App开发模式要更为迅速，因为所有代码基本上都是基于前端代码来实现，并且WebApp对应的并非只有Android一个平台，还支持IOS、Web等平台。但与此同时，WebApp对于Android系统底层驱动的调用略显乏力，尤其是不支持访问本地数据库的特性使其不支持作为主流App的开发方向。另外WebApp的大部分功能都需要依据网络，若失去网络的支持，WebApp可能只形如空壳，很多开发者会戏称WebApp为“手机上的PPT”。  
当然，作为能够快速开发并且UI设计较佳的开发模式，WebApp适合作为资讯类等App的开发模式。WebApp仰仗于前端编程语言，具有控件丰富的组件市场，这也算是WebApp相较于其他开发模式较为优势的地方。

在开发WebApp时，使用的主要技术栈为Uniapp，其主体语言为Vue.js，若熟悉此技术栈会很快上手其开发。除了一些ES6语法之外，Uniapp也支持Scss等样式，生态圈也较为成熟，基本上可以做到大部分组件“拿来即用”，所以大致上没有遇到什么难点，就暂且略过这部分了。

## 4.3 HyBird App（混合App） ##

混合App，即混合使用几种语言进行实现的Android应用，最典型的混合App技术栈就是React Native和Flutter。在学习了一段时间的原生App后，为了让App能够同时支持Android和IOS端，避免一种App因为平台的不同而需要开发两套项目的成本花销，混合App应运而生。混合App拥有原生App的性能快和兼容性强等特性，还拥有WebApp的跨平台运行和界面优美的特点，更像是这两者App取长补短之后的产物。  
当然，作为Android开发方向的崭新产物，混合App的生态圈还尚未完备，一些细节性的东西可能还是没有原生App的实现要好，而兼容性方面或许还是WebApp要更胜一筹。由于React Native的配置需要使用npm，WebPack等前端工具来配置，步骤较为繁琐，所以这里还是采用较新的Flutter来完成混合App的开发。

Flutter主要采用了Dart语言进行开发，Dart语言有点类似于Java语言，如果对Java比较熟悉的话会很快上手Dart语言。Flutter提供了比较方便的MaterialApp布局，可以快速实现一个标准App的大概样式。

接下来，谈谈作者在进行混合App开发时遇到的一些主要难点：

### 4.3.1 使用setState()刷新界面 ###

在进行操作时，若界面上没有显示出来对应的数据，多半是没有调用setState()来进行刷新，这是由于Flutter的特性所致。例如在点击底部导航栏时，由于数据没有发生变化，界面同样也不会发生变化，就不会产生界面切换的效果，这时候就需要调用动态调用setState()，来通知这个Widget状态已经发生了改变，需要重绘界面。

### 4.3.2 使用FlutterJsonBeanFactory来解析Json数据 ###

在Flutter中，由于没有FastJson、JackSon、Gson等Json解析工具，解析Json变得异常麻烦。使用Flutter原生的Convert虽然也可以解析Json，但是遇到格式复杂的Json数据时，实现庞大的Json实体类是很痛苦的事情。这时候就可以使用FlutterJsonBeanFactory来进行Json数据的解析，并自动生成实体类。在获取数据时，只需要像使用Json解析工具时一样即可，代码如下：

// 使用FlutterJsonBeanFactory进行解析
          Map jsonMap = json.decode(response.toString());
          NewsEntity newsEntity = newsEntityFromJson(new NewsEntity(),jsonMap);
          NewsResult result = newsEntity.result;
          _newsDataList = result.xList;

### 4.3.3 使用Future完成异步操作 ###

由于获取网络数据并解析之后放入列表中是耗时操作，需要将该操作放入异步模型中执行，防止阻塞主线程。Flutter的异步操作主要通过Future、Async、Await来实现，在获取数据时，调用`Future.builder()`，既可以获取对应Future方法中的数据，并且可以监听数据获得的实时性，在未获取到数据时播放环形进度条，代码如下：

FutureBuilder<List<NewsResultList>>(
                  future: fetchNews(newsType),
                  builder: (context, snapshot){ 
                    if(snapshot.hasError) print(snapshot.error);
                    return snapshot.hasData ? NewsListItem(news: snapshot.data,scrollController: _scrollController) : Center(child: CircularProgressIndicator());
                  },

### 4.3.4 使用compute()完成线程隔离 ###

尽管使用了Future来完成异步操作，在数据读取的同时还是会导致主界面卡顿，这将会降低应用的使用感，Flutter提供了computer()来实现将操作的线程进行隔离的操作，与之对应的还有`isolate`。但是isolate要相对重量级一些，这里使用computer()即可达到目标。

# 5.总结 #

经过一周对三种App开发模式的学习并实践，作为Android开发人员，作者认为原生App开发的基础还是必要的，其中涉及了许多高深的原理需要去理解。如果对前端语言有些基础的话，可以尝试WebApp。而对于混合App，由于需要一定的学习成本，建议对原生App的开发相当熟悉之后再去尝试，不然会对其中的许多概念感到模糊。

[Android]: https://blog.csdn.net/qq_41151659/article/details/105881421
[20200622165647321.gif_pic_center]: https://img-blog.csdnimg.cn/20200622165647321.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200623155157486.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70#pic_center
[20200622165821309.gif_pic_center]: https://img-blog.csdnimg.cn/20200622165821309.gif#pic_center
[20200623155248648.png_pic_center]: https://img-blog.csdnimg.cn/20200623155248648.png#pic_center
[20200622165924209.gif_pic_center]: https://img-blog.csdnimg.cn/20200622165924209.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200623155032133.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200622172830608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70
[JsonDeserializer_Gson]: https://blog.csdn.net/recordgrowth/article/details/70338227