1、URL接口管理文件建立
第一步需要在建立一個URL的管理文件，因為課程的接口會一直進行變化，所以單獨拿出來會非常方便變化接口。當然工作中的URL管理也是需要這樣配置的，以為我們會不斷的切換好幾個服務器，組內服務器，測試服務器，內測服務器，公測上線服務器。
所以說一定要單獨把這個文件配置出來，這也算是一個開發經驗之談吧。
在/lib/config文件夾下，建立一個service_url.dart文件，然后寫入如下代碼：
#此端口針對於正版用戶開放，可自行fiddle獲取。
const serviceUrl= 'xxxxxx';
const servicePath={
'homePageContext': serviceUrl+'wxmini/homePageContent', // 商家首頁信息
};
2、接口讀取文件和方法的建立
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，來獲取數據了。
3、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進行測試了。如果能讀取遠程數據，說明我們編寫成功。
本節總結
- 和后端接口對接的一些實戰技巧，這些技巧可以大大增加項目的靈活性和減少維護成本。
- 真實項目接口數據的獲取，為我們的項目提供后端數據支持。