09-Flutter移動電商實戰-移動商城數據請求實戰

一、URL接口管理文件創建

第一步須要在創建一個URL的管理文件，由於課程的接口會一直進行變化，因此單獨拿出來會很是方便變化接口。固然工做中的URL管理也是須要這樣配置的，覺得咱們會不斷的切換好幾個服務器，組內服務器，測試服務器，內測服務器，公測上線服務器。

因此說必定要單獨把這個文件配置出來，這也算是一個開發經驗之談吧。

在/lib/config文件夾下，創建一個service_url.dart文件，而後寫入以下代碼：

#此端口針對於正版用戶開放，可自行fiddle獲取。
const serviceUrl= 'xxxxxx';
const servicePath={
  'homePageContext': serviceUrl+'wxmini/homePageContent', // 商家首頁信息
};

二、接口讀取文件和方法的創建

URL的配置管理文件創建好了，接下來須要創建一個數據接口讀取的文件，之後全部跟後臺請求數據接口的方法，都會放到這個文件裏。

有小夥伴會問了，爲何不耦合在UI頁面裏？這樣看起來更直觀。其實若是公司人少，耦合在頁面裏是能夠的，並且效率會更高。可是大公司一個項目會有不少人蔘與，有時候對接後臺接口的是專門一我的或者幾我的，那這時候把文件單獨出來，效率就更高。

那咱們盡力貼合大公司的開放流程，因此把這個文件也單獨拿出來，便於之後擴展。 新建一個service文件夾，而後創建一個service_method.dart文件。

首先咱們引入三個要使用的包和上邊寫的一個文件文件，代碼以下：

import "package:dio/dio.dart";
import 'dart:async';
import 'dart:io';
import '../config/service_url.dart';

而後編寫一個getHomePageContent方法，方法返回一個Future對象。具體代碼以下：

import "package:dio/dio.dart";
import 'dart:async';
import 'dart:io';
import '../config/service_url.dart';

Future getHomePageContent() async{

  try{
    print('開始獲取首頁數據...............');
    Response response;
    Dio dio = new Dio();
    dio.options.contentType=ContentType.parse("application/x-www-form-urlencoded");
    var formData = {'lon':'115.02932','lat':'35.76189'};
    response = await dio.post(servicePath['homePageContext'],data:formData);
    if(response.statusCode==200){
      return response.data;
    }else{
      throw Exception('後端接口出現異常，請檢測代碼和服務器狀況.........');
    }
  }catch(e){
    return print('ERROR:======>${e}');
  }

}

這個就是咱們於後端對接的接口，通常在公司須要一個既會前端有懂後端的人來做，這也是爲何好多公司招聘前端時，須要你懂一個後端語言的主要緣由(小公司既做前端又做後端的忽略)。 這個文件完成，就能夠回答home_page.dart，來獲取數據了。

三、home_page.dart 獲取首頁數據

刪除學基礎知識的全部代碼，在home_page.dart裏編寫真正的項目代碼。代碼以下：

import 'package:flutter/material.dart';
import '../service/service_method.dart';


class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {
  String homePageContent='正在獲取數據';
  @override
  void initState() {
    getHomePageContent().then((val){
      setState(() {
           homePageContent=val.toString();
      });

    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('百姓生活+'),
      ),
      body:SingleChildScrollView(
        child:  Text(homePageContent) ,
      )


    );
  }
}

寫完後，就可使用flutter run進行測試了。若是能讀取遠程數據，說明咱們編寫成功。

本節總結

• 和後端接口對接的一些實戰技巧，這些技巧能夠大大增長項目的靈活性和減小維護成本。
• 真實項目接口數據的獲取，爲咱們的項目提供後端數據支持。