Flutter移动电商实战 --(9)移动商城数据请求实战
2023-09-11 14:15:29 时间
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进行测试了。如果能读取远程数据,说明我们编写成功。
本节总结
- 和后端接口对接的一些实战技巧,这些技巧可以大大增加项目的灵活性和减少维护成本。
- 真实项目接口数据的获取,为我们的项目提供后端数据支持。
相关文章
- Flutter 在mixin中使用setState
- Flutter 创建dashboard页面
- Flutter笔记 - 布局类组件
- Flutter 陈航 20-通讯 数据传递 Notification EventBus
- [Flutter] Style a message chat style-ish bubble
- [Flutter] lib/main.dart:1: Warning: Interpreting this as package URI, 'package:flutter_app/main.dart'.
- Flutter功能 中ListView和GridView嵌套报错?【教你一步搞定】
- Flutter学习 — 用占位符淡入淡出的显示图片
- Flutter进阶第4篇: 实现简单的新闻系统渲染新闻详情数据以及用flutter_html解析html
- Flutter进阶第12篇: 检测应用版本号、服务器下载文件以及实现App自动升级、安装
- Flutter学习 — 实现滑动关闭、删除item
- flutter 空数据有可能是null,“null“,““
- flutter 瀑布式布局
- flutter 可以用的数据保存方式
- flutter 服务器返回数据判断是否为空
- flutter空安全问题,平时用到的数据一定要注意
- Flutter 列表点击一个item时改变样式
- Flutter之Key简析
- Flutter之跨组件共享状态Provider原理剖析
- Flutter 开发环境搭建Unable to ‘pub upgrade‘ flutter tool. Retrying in five seconds...
- Flutter之Dialog 简单使用
- Flutter实战之AS快键键