從0開始寫一個基於Flutter的開源中國客戶端（7）——App網絡請求和數據存儲

上一篇中我記錄了基於Flutter的開源中國客戶端各個靜態頁面的實現，主要是UI的實現，沒有涉及到任何網絡請求，數據加載、存儲等方面。本篇記錄的是該項目中的網絡請求和數據存儲、加載的方式，但願本身在溫故知新的同時能給Flutter初學者帶來幫助。

索引	文章
1	從0開始寫一個基於Flutter的開源中國客戶端（1） Flutter簡介及開發環境搭建 | 掘金技術徵文
2	從0開始寫一個基於Flutter的開源中國客戶端（2） Dart語法基礎
3	從0開始寫一個基於Flutter的開源中國客戶端（3） 初識Flutter & 經常使用的Widgets
4	從0開始寫一個基於Flutter的開源中國客戶端（4） Flutter佈局基礎
5	從0開始寫一個基於Flutter的開源中國客戶端（5） App總體佈局框架搭建
6	從0開始寫一個基於Flutter的開源中國客戶端（6） 各個靜態頁面的實現
👉7	從0開始寫一個基於Flutter的開源中國客戶端（7） App網絡請求和數據存儲
8	從0開始寫一個基於Flutter的開源中國客戶端（8） 插件的使用

Flutter中的網絡請求

Flutter中已內置了網絡請求庫，可直接導入使用：

import 'package:http/http.dart' as http;
複製代碼

一個最簡單的get請求代碼以下：

import 'package:http/http.dart' as http;

main() async {
  http.Response res = await http.get("https://cn.bing.com");
  print(res.body); // 打印出get請求返回的字符串數據
}
複製代碼

控制檯中會打印出請求返回的字符串數據。

另外也有一些開源的網絡請求庫，因爲筆者暫時沒有用過，因此在本篇中不詳細說了。

在基於Flutter的開源中國客戶端中，使用的也是Flutter內置的網絡請求庫，可是作了一些簡單的封裝，主要代碼在lib/util/NetUtils.dart文件中，代碼以下：

import 'dart:async';
import 'package:http/http.dart' as http;

class NetUtils {
  // get請求的封裝，傳入的兩個參數分別是請求URL和請求參數，請求參數以map的形式傳入，會在方法體中自動拼接到URL後面
  static Future<String> get(String url, {Map<String, String> params}) async {
    if (params != null && params.isNotEmpty) {
      // 若是參數不爲空，則將參數拼接到URL後面
      StringBuffer sb = new StringBuffer("?");
      params.forEach((key, value) {
        sb.write("$key" + "=" + "$value" + "&");
      });
      String paramStr = sb.toString();
      paramStr = paramStr.substring(0, paramStr.length - 1);
      url += paramStr;
    }
    http.Response res = await http.get(url);
    return res.body;
  }
  
  // post請求
  static Future<String> post(String url, {Map<String, String> params}) async {
    http.Response res = await http.post(url, body: params);
    return res.body;
  }
}
複製代碼

使用該工具類的方法也很簡單，以下代碼所示：

import 'util/NetUtils.dart';

main() {
  Map<String, String> map = new Map();
  map['name'] = 'zhangsan';
  map['age'] = '20';
  NetUtils.get("http://www.baidu.com", params: map).then((res) {
    print(res);
  });
}
複製代碼

Flutter中的數據存儲

通常移動應用開發中的數據存儲基本上都是文件、數據庫等方式。Flutter沒有提供直接操做數據庫的API，可是有第三方的插件能夠用，好比sqflite，關於這個插件的使用方法，能夠查看這裏，因爲在基於Flutter的開源中國客戶端項目中沒有用到數據庫，因此這幾也不作詳細說明了。

本項目中針對token，用戶信息的存儲，使用的是Flutter提供的相似於Android的SharedPreferences，這個庫是以插件的形式提供的，並無內置到Flutter中，因此咱們須要爲項目配置插件，在pubspec.yaml文件中，加入以下配置：

dependencies:
  flutter:
    sdk: flutter
    
  shared_preferences: "^0.4.1"
複製代碼

而後執行flutter packages get命令便可自動安裝插件，若是你使用AndroidStudio做爲開發工具，當pubspec.yaml文件作了修改後，頁面上方會自動出現提示，點擊Packages get便可。

插件安裝成功後，使用起來很容易，以下代碼所示：

import 'package:shared_preferences/shared_preferences.dart';

main() async {
  SharedPreferences sp = await SharedPreferences.getInstance();
  sp.setString("name", "zhangsan");
  sp.setInt("age", 20);
  sp.setBool("isLogin", false);
  sp.setDouble("price", 100.5);
}
複製代碼

要獲取存儲的某個數據，只須要使用sp.get(key)便可。shared_preferences插件的主頁在這裏。

關於插件的使用方法，這裏說明一下：pub.flutter-io.cn/是Flutter提供的一個插件倉庫，能夠發佈有關dart或flutter的插件。若是咱們須要實現某個功能，而flutter又沒有提供相似的功能時，能夠上這個網站上搜索相關關鍵字，也許就有人已經發布了他寫的庫，正好能夠實現咱們須要的功能。

上面簡要說明了Flutter中的網絡請求和數據存儲，下面結合項目來講明如何加載網絡數據，如何保存用戶信息等數據。

從網絡加載資訊列表並顯示

上一篇中我記錄瞭如何顯示資訊列表，可是徹底是一個靜態的資訊列表，裏面的數據都是測試的假數據，這一篇就記錄下如何從接口獲取真實的資訊數據並顯示出來。

在基於Flutter的開源中國客戶端項目中，因爲開源中國官方的openapi提供的數據比較少，故資訊列表沒有使用開源中國官方提供的接口，是筆者用python抓的網站數據，接口部署在香港的雲服務器上，如有訪問較慢的狀況，請諒解。另外，接口沒有作任何認證，請不要頻繁請求接口。

顯示加載中的Loading

既然是從網絡上加載數據，那必然會有一個耗時的等待期，須要給加載過程展現一個Loading，這裏咱們爲NewsListPage添加一個listData變量，若是該變量爲null，則顯示Loading，不然就顯示列表數據，顯示Loading的同時從網絡上請求數據，一旦有數據後，就經過setState更新listData，主要代碼以下(NewsListPage.dart文件)：

@override
  Widget build(BuildContext context) {
    // 無數據時，顯示Loading
    if (listData == null) {
      return new Center(
        // CircularProgressIndicator是一個圓形的Loading進度條
        child: new CircularProgressIndicator(),
      );
    } else {
      // 有數據，顯示ListView
      Widget listView = new ListView.builder(
        itemCount: listData.length * 2,
        itemBuilder: (context, i) => renderRow(i),
        controller: _controller,
      );
      // RefreshIndicator爲ListView增長了下拉刷新能力，onRefresh參數傳入一個方法，在下拉刷新時調用
      return new RefreshIndicator(child: listView, onRefresh: _pullToRefresh);
    }
  }
  
  @override
  void initState() {
    super.initState();
    getNewsList(false);
  }
  
  // 從網絡獲取數據，isLoadMore表示是不是加載更多數據
  getNewsList(bool isLoadMore) {
    String url = Api.NEWS_LIST;
    // curPage是定義在NewsListPageState中的成員變量，表示當前加載的頁面索引
    url += "?pageIndex=$curPage&pageSize=10";
    NetUtils.get(url).then((data) {
      if (data != null) {
        // 將接口返回的json字符串解析爲map類型，須要導入包：import 'dart:convert';
        Map<String, dynamic> map = json.decode(data);
        if (map['code'] == 0) {
          // code=0表示請求成功
          var msg = map['msg'];
          // total表示資訊總條數
          listTotalSize = msg['news']['total'];
          // data爲數據內容，其中包含slide和news兩部分，分別表示頭部輪播圖數據，和下面的列表數據
          var _listData = msg['news']['data'];
          var _slideData = msg['slide'];
          setState(() {
            if (!isLoadMore) {
              // 不是加載更多，則直接爲變量賦值
              listData = _listData;
              slideData = _slideData;
            } else {
              // 是加載更多，則須要將取到的news數據追加到原來的數據後面
              List list1 = new List();
              // 添加原來的數據
              list1.addAll(listData);
              // 添加新取到的數據
              list1.addAll(_listData);
              // 判斷是否獲取了全部的數據，若是是，則須要顯示底部的"我也是有底線的"佈局
              if (list1.length >= listTotalSize) {
                list1.add(Constants.END_LINE_TAG);
              }
              // 給列表數據賦值
              listData = list1;
              // 輪播圖數據
              slideData = _slideData;
            }
          });
        }
      }
    });
  }
複製代碼

上面的代碼中是處理顯示Loading和顯示數據列表的不一樣邏輯，而後還有加載更多的邏輯處理，可是何時去加載更多數據呢？很顯然，應該監聽列表的滾動，當列表滾動到底時，主動去加載下一頁數據。

加載下一頁數據

在上面的代碼中，咱們在建立ListView時，傳入了一個controller參數，這個controller就是爲了監聽列表滾動事件而傳入的，它是一個ScrollController對象，咱們在NewsListPageState類中定義這個變量並初始化：

ScrollController _controller = new ScrollController();
複製代碼

要監聽列表是否滾動到底的事件，還須要給這個controller添加Listener，在NewsListPageState類的構造方法中添加以下代碼：

NewsListPageState() {
    _controller.addListener(() {
      // 表示列表的最大滾動距離 
      var maxScroll = _controller.position.maxScrollExtent;
      // 表示當前列表已向下滾動的距離
      var pixels = _controller.position.pixels;
      // 若是兩個值相等，表示滾動到底，而且若是列表沒有加載完全部數據
      if (maxScroll == pixels && listData.length < listTotalSize) {
        // scroll to bottom, get next page data
        curPage++; // 當前頁索引加1
        getNewsList(true); // 獲取下一頁數據
      }
    });
  }
複製代碼

給ListView加入下拉刷新能力

其實在上面的代碼中已經爲ListView添加了下拉刷新的能力，就是build方法返回時，爲ListView包裹了一層RefreshIndicator：

return new RefreshIndicator(child: listView, onRefresh: _pullToRefresh);
複製代碼

_pullToRefresh方法會在下拉刷新的時候調用，由於是下拉刷新，因此取的是第一頁數據，而且不是加載更多，因此方法體以下：

Future<Null> _pullToRefresh() async {
    curPage = 1;
    getNewsList(false);
    return null;
  }
複製代碼

須要注意的是，onRefresh參數須要一個Future<Null>類型的數據，因此上面的_pullToRefresh纔會返回Future<Null>。

改造事後的資訊列表以下gif圖所示（圖比較大，加載會有點慢）：

保存登陸後的用戶數據

因爲獲取動彈信息，評論動彈等，都須要調用開源中國的openapi，而這些接口都是須要AccessToken和用戶id的，因此咱們必須把用戶登陸後的數據保存下來，以便在須要用到這些數據時能獲取到。具體的如何實現登陸將會放在下一篇——Flutter插件的使用中說明。本篇暫時忽略登陸的過程，只說明登陸後如何保存用戶信息。

爲了統一管理SharedPreferences，這裏咱們新建一個工具類DataUtils，文件目錄在lib/util/DataUtils.dart。開源中國openapi調用接口成功登陸後，會返回如下信息：

字段名	字段類型	說明
access_token	String	access_token值
refresh_token	String	refresh_token值
uid	int	受權用戶的uid
tokenType	String	access_token類型
expires_in	int	超時時間(單位秒)

爲了在SharedPreferences中保存以上信息，先在DataUtils中聲明每一個字段對應的key，代碼以下：

static final String SP_AC_TOKEN = "accessToken";
  static final String SP_RE_TOKEN = "refreshToken";
  static final String SP_UID = "uid";
  static final String SP_IS_LOGIN = "isLogin"; // SP_IS_LOGIN標記是否登陸
  static final String SP_EXPIRES_IN = "expiresIn";
  static final String SP_TOKEN_TYPE = "tokenType";
複製代碼

而後提供一個靜態方法用於一次性保存這些信息：

// 保存用戶登陸信息，data中包含了token等信息
  static saveLoginInfo(Map data) async {
    if (data != null) {
      SharedPreferences sp = await SharedPreferences.getInstance();
      String accessToken = data['access_token'];
      await sp.setString(SP_AC_TOKEN, accessToken);
      String refreshToken = data['refresh_token'];
      await sp.setString(SP_RE_TOKEN, refreshToken);
      num uid = data['uid'];
      await sp.setInt(SP_UID, uid);
      String tokenType = data['tokenType'];
      await sp.setString(SP_TOKEN_TYPE, tokenType);
      num expiresIn = data['expires_in'];
      await sp.setInt(SP_EXPIRES_IN, expiresIn);

      await sp.setBool(SP_IS_LOGIN, true); // SP_IS_LOGIN標記是否登陸
    }
  }
複製代碼

登陸成功後就能夠調用開源中國的openapi獲取用戶信息了，跟上面相似，先定義用戶信息每一個字段對應的key：

static final String SP_USER_NAME = "name";
  static final String SP_USER_ID = "id";
  static final String SP_USER_LOC = "location";
  static final String SP_USER_GENDER = "gender";
  static final String SP_USER_AVATAR = "avatar";
  static final String SP_USER_EMAIL = "email";
  static final String SP_USER_URL = "url";
複製代碼

根據命名就知道每一個字段表明的什麼含義，這裏就不細說了，而後仍是提供一個靜態方法，用於一次性保存用戶信息：

// 保存用戶我的信息
  static Future<UserInfo> saveUserInfo(Map data) async {
    if (data != null) {
      SharedPreferences sp = await SharedPreferences.getInstance();
      String name = data['name'];
      num id = data['id'];
      String gender = data['gender'];
      String location = data['location'];
      String avatar = data['avatar'];
      String email = data['email'];
      String url = data['url'];
      await sp.setString(SP_USER_NAME, name);
      await sp.setInt(SP_USER_ID, id);
      await sp.setString(SP_USER_GENDER, gender);
      await sp.setString(SP_USER_AVATAR, avatar);
      await sp.setString(SP_USER_LOC, location);
      await sp.setString(SP_USER_EMAIL, email);
      await sp.setString(SP_USER_URL, url);
      UserInfo userInfo = new UserInfo(
        id: id,
        name: name,
        gender: gender,
        avatar: avatar,
        email: email,
        location: location,
        url: url
      );
      return userInfo;
    }
    return null;
  }
複製代碼

保存用戶信息是一個異步的過程，其中UserInfo是定義在lib/model/下的一個實體類，代碼以下：

// 用戶信息
class UserInfo {

  String gender;
  String name;
  String location;
  num id;
  String avatar;
  String email;
  String url;

  UserInfo({this.id, this.name, this.gender, this.avatar, this.email, this.location, this.url});

}
複製代碼

爲了方便的拿到保存的用戶信息和AccessToken數據，以及判斷當前是否登陸，爲DataUtils提供三個靜態方法：

// 獲取用戶信息
  static Future<UserInfo> getUserInfo() async {
    SharedPreferences sp = await SharedPreferences.getInstance();
    bool isLogin = sp.getBool(SP_IS_LOGIN);
    if (isLogin == null || !isLogin) {
      return null;
    }
    UserInfo userInfo = new UserInfo();
    userInfo.id = sp.getInt(SP_USER_ID);
    userInfo.name = sp.getString(SP_USER_NAME);
    userInfo.avatar = sp.getString(SP_USER_AVATAR);
    userInfo.email = sp.getString(SP_USER_EMAIL);
    userInfo.location = sp.getString(SP_USER_LOC);
    userInfo.gender = sp.getString(SP_USER_GENDER);
    userInfo.url = sp.getString(SP_USER_URL);
    return userInfo;
  }

  // 是否登陸
  static Future<bool> isLogin() async {
    SharedPreferences sp = await SharedPreferences.getInstance();
    bool b = sp.getBool(SP_IS_LOGIN);
    return b != null && b;
  }

  // 獲取accesstoken
  static Future<String> getAccessToken() async {
    SharedPreferences sp = await SharedPreferences.getInstance();
    return sp.getString(SP_AC_TOKEN);
  }
複製代碼

若是用戶註銷登陸，須要清除已保存的用戶信息：

// 清除登陸信息
  static clearLoginInfo() async {
    SharedPreferences sp = await SharedPreferences.getInstance();
    await sp.setString(SP_AC_TOKEN, "");
    await sp.setString(SP_RE_TOKEN, "");
    await sp.setInt(SP_UID, -1);
    await sp.setString(SP_TOKEN_TYPE, "");
    await sp.setInt(SP_EXPIRES_IN, -1);
    await sp.setBool(SP_IS_LOGIN, false);
  }
複製代碼

源碼

本篇相關的全部源碼都在GitHub上demo-flutter-osc項目的v0.3分支。

後記

本篇主要記錄的是基於Flutter的開源中國客戶端app中的網絡請求和數據存儲方式，寫得不清楚的地方請多包涵，有問題能夠留言告訴筆者。下一篇將記錄Flutter中的插件使用。

個人開源項目

1. 基於Google Flutter的開源中國客戶端，但願你們給個Star支持一下，源碼：

• GitHub
• 碼雲

2. 基於Flutter的俄羅斯方塊小遊戲，但願你們給個Star支持一下，源碼：

• GitHub
• 碼雲

上一篇	下一篇
從0開始寫一個基於Flutter的開源中國客戶端（6） ——各個靜態頁面的實現	從0開始寫一個基於Flutter的開源中國客戶端（8）——插件的使用