随诊医生社区医生版极速开发直播1.5

在这一节里，我们将讲述前后端集成技术，就是通过客户端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字节表示，这样就不会出现乱码了。运行后界面如下所示：

显示HTTP请求结果

如果服务器发回的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();
              },
            )
        )
    );
  }

我们现在终于实现了前后端的集成，可以向后台服务器发送请求并接收结果了，但是这里的请求还是固定在服务器端的代码，在下一节中，我们将改造服务器端代码，从数据库中读出日程列表信息，然后在手机页面上显示出来，待续！

随诊医生社区医生版极速开发直播1.5