网站案例库,比较好的wordpress主题,小说网站开发需求分析,智能平台开发是干什么的09-Flutter移动电商实战-移动商城数据请求实战
1、URL接口管理文件建立
第一步需要在建立一个URL的管理文件#xff0c;因为课程的接口会一直进行变化#xff0c;所以单独拿出来会非常方便变化接口。当然工作中的URL管理也是需要这样配置的#xff0c;以为我们会不断的切换…09-Flutter移动电商实战-移动商城数据请求实战
1、URL接口管理文件建立
第一步需要在建立一个URL的管理文件因为课程的接口会一直进行变化所以单独拿出来会非常方便变化接口。当然工作中的URL管理也是需要这样配置的以为我们会不断的切换好几个服务器组内服务器测试服务器内测服务器公测上线服务器。
所以说一定要单独把这个文件配置出来这也算是一个开发经验之谈吧。
在/lib/config文件夹下建立一个service_url.dart文件然后写入如下代码 #此端口针对于正版用户开放可自行fiddle获取。
const serviceUrl xxxxxx;
const servicePath{homePageContext: serviceUrlwxmini/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.contentTypeContentType.parse(application/x-www-form-urlencoded);var formData {lon:115.02932,lat:35.76189};response await dio.post(servicePath[homePageContext],data:formData);if(response.statusCode200){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 StateHomePage {String homePageContent正在获取数据;overridevoid initState() {getHomePageContent().then((val){setState(() {homePageContentval.toString();});});super.initState();}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(百姓生活),),body:SingleChildScrollView(child: Text(homePageContent) ,));}
}写完后就可以使用flutter run进行测试了。如果能读取远程数据说明我们编写成功。
本节总结
和后端接口对接的一些实战技巧这些技巧可以大大增加项目的灵活性和减少维护成本。真实项目接口数据的获取为我们的项目提供后端数据支持。
posted 2019-06-15 22:34 niceyoo 阅读(...) 评论(...) 编辑 收藏
