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. Java多线程编程(4)--线程同步机制

    一.锁 1.锁的概念   线程安全问题的产生是因为多个线程并发访问共享数据造成的,如果能将多个线程对共享数据的并发访问改为串行访问,即一个共享数据同一时刻只能被一个线程访问,就可以避免线程安全问题.锁 ...

  2. 基于Keras搭建MLP

    Keras是一套基于Tensorflow.Theano及CNTK后端的高层神经网络API,可以非常友好地支持快速实验,本文从零开始介绍了如何使用Keras搭建MLP并给出两个示例. 基于Ubuntu安 ...

  3. 【C++/C】指针基本用法简介-A Summary of basic usage of Pointers.

    基于谭浩强老师<C++程序设计(第三版)>做简要Summary.(2019-07-24) 一.数组与指针 1. 指针数组 一个数组,其元素均为指针类型数据,该数组称为指针数组.(type_ ...

  4. php mysql的储存过程 实现批量更新

    UPDATE newhouse_clicks SET clicks = CASE id WHEN 1 THEN 1000 WHEN 2 THEN 2000 WHEN 3 THEN 3000 END W ...

  5. java之spring mvc之helloworld

    这篇主要讲解springmvc的基本的使用,这里以helloworld项目为例. 目录结构: 1. 新建 web 项目 :springmvc_helloworld 2. 在 WebRoot\WEB-I ...

  6. [golang]svg图片默认按照左上角旋转,改为按中心旋转,重新计算中心偏移量

    1 前言 svg图片默认按照左上角旋转,改为按中心旋转,重新计算中心偏移量 2 代码 type Point struct { X float64 Y float64 } func GetOffsetX ...

  7. Gson含抽象类的反序列化

    Gson含抽象类的反序列化 场景描述: 反序列化A类的时候,这个类里面有一个抽象类属性B,B的实现类C里面又有一个抽象类属性D,D的实现类是E 实体类准备 public class A impleme ...

  8. Docker 基础篇 入门篇

    1.Docker入门 1.为什么要用docker? 相比于传统: 部署非常慢 成本非常高 资源浪费 难于迁移和扩展 可能会被限定硬件厂商 由于物理机的诸多问题,后来出现了虚拟机 一个物理机可以部署多个 ...

  9. 设置vue-quill-editor禁止输入或编辑

    <quill-editor class="ql-editor" v-model="form.content" ref="myQuillEdito ...

  10. PL/SQL的结构

    PL/SQL Developer是一个集成开发环境,专门开发面向Oracle数据库的应用.PL/SQL也是一种程序语言,叫做过程化SQL语言(Procedural Language/SQL).PL/S ...