在这一节里，我们将讲述前后端集成技术，就是通过客户端Flutter发起HTTPS请求，调用服务器端的服务，由服务器端返回JSON数据，Flutter接收到并解析JSON数据，并显示到界面中。
添加依赖库
首先我们需要向项目中加入http库，编辑pubspec.yaml文件，在dependencies下面添加http库的引用：
cupertino_icons: ^0.1.2
http: ^0.11.3+16
在这里要讲一下，由于在中国，dart网站的访问是受限的，使用翻墙软件也没有效果，所以经常会遇到get packages失败的情况，这里我们需要添加两个环境变量，在Windows中使用编辑系统环境变量添加即可：
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
生命周期事件
一个Flutter的Widget组件，其也有生命周期事件，例如我们以“我的”页面为例，可以向其中加入每次页面加载或刷新前均会调用的didUpdage方法，如下所示：
class MinePageState extends State<MinePage> {
@override
void didUpdateWidget(MinePage oldWidget) {
// TODO: implement didUpdateWidget
super.didUpdateWidget(oldWidget);
}
......
}
其实该类中的build方法，也是每次在加载和刷新时均会调用的方法，我们这里将网络请求会放在build方法中。
HTTP请求类
由于Flutter同样不支持开发证书，因此我们这里只好用HTTP协议来代替，不过我们只需要更改一下URL，就可以切换到HTTPS服务，这也是比较方便的。
我们首先在lib目录下创建nets目录，同时添加新的dart文件GetServerDefault.dart：
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
Future<GetServerDefaultResp> fetchPost() async {
// https://192.168.0.102:9443/getServerDefault?v=1&hosptialId=11&deptId=101&doctorId=1001&msg=Hello
final response =
await http.get('http://192.168.0.102:8443/getServerDefault?v=1&hosptialId=11&deptId=101&doctorId=1001&msg=Hello');
if (response.statusCode == 200) {
// If the call to the server was successful, parse the JSON
return GetServerDefaultResp.fromJson(json.decode(response.body));
//return json.decode(response.body);
} else {
// If that call was not successful, throw an error.
throw Exception('Failed to load post');
}
}
class GetServerDefaultResp {
final int total;
final String version;
final String build;
final List<String> freqDepts;
GetServerDefaultResp({this.total, this.version, this.build, this.freqDepts});
factory GetServerDefaultResp.fromJson(Map<String, dynamic> json) {
return GetServerDefaultResp(
total: json['total'],
version: json['version'],
build: json['build'],
freqDepts: new List<String>.from(json['freqDepts']),
);
}
}
在上面的代码中，fetchPost方法是实际发起HTTP请求并获取响应的类，注意到Flutter的HTTP请求是异步方式处理的。
在下面我们定义了GetServerDefault请求的返回值所对应的值对象，直接将响应中的JSON内容转变为对应的属性信息。对于响应中freqDepts是一个数组，我们需要将其从List<Object>转变为List<String>。
HTTP请求处理
我们在“我的”页面加载时，就发起HTTP请求，然后将响应结果显示到界面中，代码如下所示：
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:szys/nets/GetServerDefault.dart' as GetServerDefault;
class MinePage extends StatefulWidget {
......
class MinePageState extends State<MinePage> {
......
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('我的')
),
body: new Center(
child: FutureBuilder<GetServerDefault.GetServerDefaultResp>(
future: GetServerDefault.fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
String msg = '';
//msg += 'total=' + snapshot.data.total;
for (final dept in snapshot.data.freqDepts) {
msg += utf8.decode(dept.codeUnits) + '\r\n';
}
return Text(snapshot.data.version + ':\r\n' + msg);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner
return CircularProgressIndicator();
},
)
)
);
}
}
我们采用FutureBuilder来构造一个HTTP请求，将响应中的版本和科室列表显示到界面中。在上面的代码中，需要请大家注意的是utf8.decode(dept.codeUnits) ，因为此时中文信息是有3个字节组成的字符串，在有些手机上，由于不能自动将其变为2字节表示的汉字，因此会出现乱码，这句话就是显示将汉字由3字节表示，转变为2字节表示，这样就不会出现乱码了。运行后界面如下所示：
如果服务器发回的freqDepts不是['内科', '外科'...]，而是[{'deptId': 1001, 'deptName': '内科'}, {'deptId': 1001, 'deptName': '内科'}, ...]时，我们在GetServerDefault中将响应的JSON转变为值对象时，应采用如下方法：
class GetServerDefaultResp {
final int total;
final String version;
final String build;
final List<Map<String, dynamic>> freqDepts;
GetServerDefaultResp({this.total, this.version, this.build, this.freqDepts});
factory GetServerDefaultResp.fromJson(Map<String, dynamic> json) {
return GetServerDefaultResp(
total: json['total'],
version: json['version'],
build: json['build'],
freqDepts: new List<Map<String, dynamic>>.from(json['freqDepts']),
);
}
而在页面中获取结果时，就需要将MinePage.build改成如下形式：
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('我的')
),
body: new Center(
child: FutureBuilder<GetServerDefault.GetServerDefaultResp>(
future: GetServerDefault.fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
String msg = '';
//msg += 'total=' + snapshot.data.total;
for (final dept in snapshot.data.freqDepts) {
msg += dept['deptId'].toString() + '---' + utf8.decode(dept['deptName'].codeUnits) + '\r\n';
}
return Text(snapshot.data.version + '\r\n' + msg);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner
return CircularProgressIndicator();
},
)
)
);
}
我们现在终于实现了前后端的集成，可以向后台服务器发送请求并接收结果了，但是这里的请求还是固定在服务器端的代码，在下一节中，我们将改造服务器端代码，从数据库中读出日程列表信息，然后在手机页面上显示出来，待续！
