Flutter移动电商实战 --（9）移动商城数据请求实战

系统管理员 2023-06-01 05:57 160阅读 0赞

#### 1、URL接口管理文件建立 ####

第一步需要在建立一个URL的管理文件，因为课程的接口会一直进行变化，所以单独拿出来会非常方便变化接口。当然工作中的URL管理也是需要这样配置的，以为我们会不断的切换好几个服务器，组内服务器，测试服务器，内测服务器，公测上线服务器。

所以说一定要单独把这个文件配置出来，这也算是一个开发经验之谈吧。

在/lib/config文件夹下，建立一个service\_url.dart文件，然后写入如下代码：

![1090399-20190811220320085-1923992401.png][]

#此端口针对于正版用户开放，可自行fiddle获取。
    const serviceUrl= 'xxxxxx';
    const servicePath={
      'homePageContext': serviceUrl+'wxmini/homePageContent', // 商家首页信息
    };

#### 2、接口读取文件和方法的建立 ####

URL的配置管理文件建立好了，接下来需要建立一个数据接口读取的文件，以后所有跟后台请求数据接口的方法，都会放到这个文件里。

有小伙伴会问了，为什么不耦合在UI页面里？这样看起来更直观。其实如果公司人少，耦合在页面里是可以的，而且效率会更高。但是大公司一个项目会有很多人参与，有时候对接后台接口的是专门一个人或者几个人，那这时候把文件单独出来，效率就更高。

那我们尽力贴合大公司的开放流程，所以把这个文件也单独拿出来，便于以后扩展。 新建一个service文件夹，然后建立一个service\_method.dart文件。

![1090399-20190811220416801-1927628521.png][]

首先我们引入三个要使用的包和上边写的一个文件文件，代码如下：

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

#### 本节总结 ####

*  和后端接口对接的一些实战技巧，这些技巧可以大大增加项目的灵活性和减少维护成本。
 *  真实项目接口数据的获取，为我们的项目提供后端数据支持。

转载于:https://www.cnblogs.com/crazycode2/p/11267104.html

[1090399-20190811220320085-1923992401.png]: /images/20230601/b6d6c8035d1f499ab95b538975f936cc.png
[1090399-20190811220416801-1927628521.png]: /images/20230601/5712671a900044b4b6af68a4ffa74636.png