09-Flutter移动电商实战-移动商城数据请求实战
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移动电商实战-移动商城数据请求实战的更多相关文章
- Flutter移动电商实战 --(9)移动商城数据请求实战
1.URL接口管理文件建立 第一步需要在建立一个URL的管理文件,因为课程的接口会一直进行变化,所以单独拿出来会非常方便变化接口.当然工作中的URL管理也是需要这样配置的,以为我们会不断的切换好几个服 ...
- Java生鲜电商平台-统一异常处理及架构实战
Java生鲜电商平台-统一异常处理及架构实战 补充说明:本文讲得比较细,所以篇幅较长. 请认真读完,希望读完后能对统一异常处理有一个清晰的认识. 背景 软件开发过程中,不可避免的是需要处理各种异常,就 ...
- 谈B2B电商平台与大数据
数据为王,服务为本——谈B2B电商平台与大数据 2013-06-27 11:10:41 作者:B2B行业资讯 标签: 大数据 ...
- 电商网站垮IDC数据备份,MySql主从同步,图片及其它数据文件的同步
原文网址:http://www.bzfshop.net/article/180.html 对一个电子商务网站而言,最宝贵的资源就是数据.服务器是很廉价的东西,即使烧了好几个也问题不大,但是用户数据如果 ...
- Flutter移动电商实战 --(43)详细页_补充首页跳转到详细页
首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(co ...
- Flutter移动电商实战 --(30)列表页_商品列表UI界面布局
小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用ListView,我们把它布局成下图这种形式 ...
- Flutter移动电商实战 --(28)列表页_商品列表后台接口调试
主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceUrl='http://test.ba ...
- Flutter移动电商实战 --(21)分类页_类别信息接口调试
先解决一个坑 取消上面的GridVIew的回弹效果.就是在拖这个gridview的时候有一个滚动的效果 physics: NeverScrollableScrollPhysics(), 大R刷新后,点 ...
- Flutter移动电商实战 --(10)使用FlutterSwiper制作轮播效果
1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍 ...
随机推荐
- 快速排序(Quick Sort)C语言
已知数组 src 如下: [5, 3, 7, 6, 4, 1, 0, 2, 9, 10, 8] 快速排序1 在数组 src[low, high] 中,取 src[low] 作为 关键字(key) . ...
- Java8 集合相关操作
// java8 集合快速转成string List<String> cities; String citiesCommaSeparated = String.join(",&q ...
- git 学习笔记 --- Rebase
在上一节我们看到了,多人在同一个分支上协作时,很容易出现冲突.即使没有冲突,后push的童鞋不得不先pull,在本地合并,然后才能push成功. 每次合并再push后,分支变成了这样: $ git l ...
- Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度
原文:Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度 嫌项目编译太慢?不一定是 Visual Studio 的问题,有可能 ...
- DotNet Core 2.2 MVC Razor 页面编译为 View.dll 文件的解决方法
使用文本文件编辑器打开项目文件,找到: <PropertyGroup> <TargetFramework>netcoreapp2.0</TargetFramewo ...
- 表单提交学习笔记(一)—利用jquery.form提交表单(后台.net MVC)
起因:一开始想用MVC本身的Form提交方法,但是提交完之后想进行一些提示,MVC就稍显不足了,最后用jquery插件---jquery.form.js,完美解决了问题~~ 使用方法 一.下载jque ...
- Mycat使用--分库分表和读写分离
Mycat分库分表读写分离 1. 模拟多数据库节点 2. 配置文件 具体操作参看: https://blog.csdn.net/vbirdbest/article/details/83448757 写 ...
- Spring Security 解析(二) —— 认证过程
Spring Security 解析(二) -- 认证过程 在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因此决定先把Spring Security .S ...
- Java之路---Day04
2019-10-18-21:35:36 面向对象 学面向对象前要先知道什么叫面向过程,了解了什么叫面向过程才容易理解面向对象 面向过程(强调步骤) 概念:当需要实现一个功能的时候,每一个具体的步骤都要 ...
- Python进阶(十四)----空间角度研究类,类与类之间的关系
Python进阶(十四)----空间角度研究类,类与类之间的关系 一丶从空间角度研究类 对象操作对象属性 class A(): address = '沙河' def __init__(self, na ...