1、获取接口的方法

在service/service_method.dart里制作方法。我们先不接收参数,先把接口调通。

Future getHomePageBeloConten() async{

  try{
print('开始获取下拉列表数据.................');
Response response;
Dio dio = new Dio();
dio.options.contentType=ContentType.parse("application/x-www-form-urlencoded");
int page=1;
response = await dio.post(servicePath['homePageBelowConten'],data:page);
if(response.statusCode==200){
return response.data;
}else{
throw Exception('后端接口出现异常,请检测代码和服务器情况.........');
}
}catch(e){
return print('ERROR:======>${e}');
} }

简单说一下 Future,在我们平时开发中我们是这样用的,首先给我们的函数后面加上 async 关键字,表示异步操作,然后函数返回值写成 Future,然后我们可以 new 一个 Future,逻辑前面加上一个 await关键字,然后可以使用future.then 等操作。

2、进行调试接口

接口对接的方法写好了,然后我们进行测试一下接口是否可以读出数据,如果能读出数据,就说明接口已经调通,我们就可以搞事情了。

因为这个新的类是由下拉刷新的,也就是动态的类,所以需要使用StatefulWidget。

代码如下:

class HotGoods extends StatefulWidget {
_HotGoodsState createState() => _HotGoodsState();
} class _HotGoodsState extends State<HotGoods> { void initState() {
super.initState();
getHomePageBeloConten().then((val){
print(val);
});
} @override
Widget build(BuildContext context) {
return Container(
child:Text('1111'),
);
}
}

3、精简代码,来个通用接口

在写service_method.dart的时候,你会发现我们大部分的代码都是相同的,甚至复制一个方法后,通过简单的修改几个地方,就可以使用了。那就说明这个地方由优化的必要。让代码更通用更精简。

精简代码如下:

Future request(url,formData)async{
try{
print('开始获取数据...............');
Response response;
Dio dio = new Dio();
dio.options.contentType=ContentType.parse("application/x-www-form-urlencoded");
if(formData==null){
response = await dio.post(servicePath[url]);
}else{
response = await dio.post(servicePath[url],data:formData);
}
if(response.statusCode==200){
return response.data;
}else{
throw Exception('后端接口出现异常,请检测代码和服务器情况.........');
}
}catch(e){
return print('ERROR:======>${e}');
} }

使用也是非常简单的,只要传递一个接口名称和相对参数就可以了。

request('homePageBelowConten',1).then((val){
print(val);
});

.

Flutter移动电商实战 --(18)首页_火爆专区商品接口制作的更多相关文章

  1. Flutter移动电商实战 --(19)首页_火爆专区商品接口制作

    Dart中可选参数的设置 上节课在作通用方法的时候,我们的参数使用了一个必选参数,其实我们可以使用一个可选参数.Dart中的可选参数,直接使用“{}”(大括号)就可以了.可选参数在调用的时候必须使用p ...

  2. 18-Flutter移动电商实战-首页_火爆专区商品接口制作

    1.获取接口的方法 在service/service_method.dart里制作方法.我们先不接收参数,先把接口调通. Future getHomePageBeloConten() async{   ...

  3. Flutter实战视频-移动电商-18.首页_火爆专区后台接口调试

    18.首页_火爆专区后台接口调试 楼层结束之后有个火爆专区.到地图有个上拉加载的效果 lib/config/service_url.dart 首先找到我们的接口配置文件,增加接口的配置 lib/ser ...

  4. Flutter实战视频-移动电商-19.首页_火爆专区界面布局编写

    19.首页_火爆专区界面布局编写 看一下图片的效果 一个标题栏,下面是多行两列.里面可以用column布局,外面用Warp流式布局 有得小伙伴说这里可以用网格布局,网格布局的话还是有一定的效率问题.这 ...

  5. Flutter实战视频-移动电商-20.首页_火爆专区上拉加载效果

    20.首页_火爆专区上拉加载效果 上拉加载的插件比较都.没有一个一枝独秀的 可以自定义酷炫的header和footer 一直在更新 推荐使用这个插件: https://github.com/xuelo ...

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

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

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

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

  8. Flutter实战视频-移动电商-33.列表页_子类和商品列表交互效果

    33.列表页_子类和商品列表交互效果 主要实现点击小类下面的列表跟着切换 获取右侧下面的列表信息,即要传递大类的id也要传递小类的,所以需要把左侧的大类的id也要Provide化 可以看下网站上的接口 ...

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

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

随机推荐

  1. z-index和transform,你真的了解吗?

    z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上.事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读.因为阅读完了,你会有所收获的. ...

  2. S2-016、S2-017

    前言 由于S2-016.S2-017出现的原因时相同的,只是由于poc不一样,造成了不同的攻击.S2-016是RCE,S2-017是开发型重定向漏洞.这里将两个漏洞放一起分析.另外“Struts2系列 ...

  3. iOS圆弧渐变进度条的实现

    由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...

  4. Vue粒子特效(vue-particles插件)

    ` npm install vue-particles --save-dev ` ` import VueParticles from 'vue-particles' Vue.use(VueParti ...

  5. fcrackzip破解zip密码

    kail系统里有fcrackzip工具,可以对设置密码的压缩包zip直接进行破解,不用字典,直接进行暴力破解. fcrackzip 所用到的参数介绍如下:-b 表示暴力破解-c 表示暴力破解中使用的字 ...

  6. 【转】5种网络IO模型

    5种网络IO模型(有图,很清楚) IO多路复用—由Redis的IO多路复用yinch Linux中对文件描述符的操作(FD_ZERO.FD_SET.FD_CLR.FD_ISSET

  7. linux下setsockopt函数的使用

    1.closesocket(一般不会立即关闭而经历TIME_WAIT的过程)后想继续重用该socket:BOOL bReuseaddr=TRUE;setsockopt(s,SOL_SOCKET ,SO ...

  8. webstorm如何调试vue项目的js

    webstorm如何调试vue项目的js webstormvuewebstorm调试jsjs 1.编辑调试配置,新建JavaScript调试配置,并设置要访问的url地址,如下图所示: 在URL处填写 ...

  9. Thinkphp 两级联动

    <!-- 前端代码部分--><div class="pop-movegroup" id="salesmanBox"> <dl> ...

  10. Java&Selenium截图方法封装

    Java&Selenium截图方法封装 package util; import org.apache.commons.io.FileUtils; import org.openqa.sele ...