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进行测试了。若是能读取远程数据，说明咱们编写成功。

本节总结

• 和后端接口对接的一些实战技巧，这些技巧能够大大增长项目的灵活性和减小维护成本。
• 真实项目接口数据的获取，为咱们的项目提供后端数据支持。