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

本节总结

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

09-Flutter移动电商实战-移动商城数据请求实战的更多相关文章

  1. Flutter移动电商实战 --(9)移动商城数据请求实战

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

  2. Java生鲜电商平台-统一异常处理及架构实战

    Java生鲜电商平台-统一异常处理及架构实战 补充说明:本文讲得比较细,所以篇幅较长. 请认真读完,希望读完后能对统一异常处理有一个清晰的认识. 背景 软件开发过程中,不可避免的是需要处理各种异常,就 ...

  3. 谈B2B电商平台与大数据

    数据为王,服务为本——谈B2B电商平台与大数据 2013-06-27 11:10:41 作者:B2B行业资讯 标签:                             大数据           ...

  4. 电商网站垮IDC数据备份,MySql主从同步,图片及其它数据文件的同步

    原文网址:http://www.bzfshop.net/article/180.html 对一个电子商务网站而言,最宝贵的资源就是数据.服务器是很廉价的东西,即使烧了好几个也问题不大,但是用户数据如果 ...

  5. Flutter移动电商实战 --(43)详细页_补充首页跳转到详细页

    首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(co ...

  6. Flutter移动电商实战 --(30)列表页_商品列表UI界面布局

    小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用ListView,我们把它布局成下图这种形式 ...

  7. Flutter移动电商实战 --(28)列表页_商品列表后台接口调试

    主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceUrl='http://test.ba ...

  8. Flutter移动电商实战 --(21)分类页_类别信息接口调试

    先解决一个坑 取消上面的GridVIew的回弹效果.就是在拖这个gridview的时候有一个滚动的效果 physics: NeverScrollableScrollPhysics(), 大R刷新后,点 ...

  9. Flutter移动电商实战 --(10)使用FlutterSwiper制作轮播效果

    1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍 ...

随机推荐

  1. 快速排序(Quick Sort)C语言

    已知数组 src 如下: [5, 3, 7, 6, 4, 1, 0, 2, 9, 10, 8] 快速排序1 在数组 src[low, high] 中,取 src[low] 作为 关键字(key) . ...

  2. Java8 集合相关操作

    // java8 集合快速转成string List<String> cities; String citiesCommaSeparated = String.join(",&q ...

  3. git 学习笔记 --- Rebase

    在上一节我们看到了,多人在同一个分支上协作时,很容易出现冲突.即使没有冲突,后push的童鞋不得不先pull,在本地合并,然后才能push成功. 每次合并再push后,分支变成了这样: $ git l ...

  4. Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度

    原文:Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度 嫌项目编译太慢?不一定是 Visual Studio 的问题,有可能 ...

  5. DotNet Core 2.2 MVC Razor 页面编译为 View.dll 文件的解决方法

    使用文本文件编辑器打开项目文件,找到: <PropertyGroup>     <TargetFramework>netcoreapp2.0</TargetFramewo ...

  6. 表单提交学习笔记(一)—利用jquery.form提交表单(后台.net MVC)

    起因:一开始想用MVC本身的Form提交方法,但是提交完之后想进行一些提示,MVC就稍显不足了,最后用jquery插件---jquery.form.js,完美解决了问题~~ 使用方法 一.下载jque ...

  7. Mycat使用--分库分表和读写分离

    Mycat分库分表读写分离 1. 模拟多数据库节点 2. 配置文件 具体操作参看: https://blog.csdn.net/vbirdbest/article/details/83448757 写 ...

  8. Spring Security 解析(二) —— 认证过程

    Spring Security 解析(二) -- 认证过程   在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因此决定先把Spring Security .S ...

  9. Java之路---Day04

    2019-10-18-21:35:36 面向对象 学面向对象前要先知道什么叫面向过程,了解了什么叫面向过程才容易理解面向对象 面向过程(强调步骤) 概念:当需要实现一个功能的时候,每一个具体的步骤都要 ...

  10. Python进阶(十四)----空间角度研究类,类与类之间的关系

    Python进阶(十四)----空间角度研究类,类与类之间的关系 一丶从空间角度研究类 对象操作对象属性 class A(): address = '沙河' def __init__(self, na ...