Flutter爬取网页数据App

介绍

在本文中，我们将构建一个Movies应用程序。 用户打开它后，该应用程序将显示电影院中即将上映的电影列表。 用户还可以在同一屏幕上按标题搜索电影，如下所示：

如果他们点击其中一部电影，则该应用将显示第二个屏幕，该屏幕是电影的更详细视图，具有较大的图像和概述：

为了检索数据，该应用程序将使用一个开放的Web服务，即电影数据库API。

连接到Web服务并使用HTTP检索数据

很少有移动应用程序完全独立于外部数据：想想您用于天气预报，听音乐，阅读书籍，新闻或电子邮件的应用程序。 它们都有一个共同点：它们依赖于从外部来源获取的数据。 从移动（或任何客户端）应用程序获取数据的最常见来源称为Web服务或Web API。

发生的情况是，客户端应用程序连接到Web服务，发出获取数据的请求，如果请求是合法的，则Web服务通过将数据发送到该应用程序进行响应，然后该应用程序将解析数据以了解其功能。 这种方法的优势在于，开发人员只需要创建和维护一个数据源，即可拥有所需数量的客户端。 实际上，这种模式（客户端/服务器）并不是什么新鲜事物，但在设计应用程序时极为常见。

在下面，您可以看到显示此模式的图。 在中心，您有一个远程服务器，它是数据源，它周围是连接到服务器以检索数据的客户端，例如您的移动应用程序：

Web服务通常以两种格式公开数据：JSON或XML。 它们都是文本格式，几乎可以表示相同类型的数据，但是由于JSON更为紧凑，因此使用Web服务时，您可能会经常发现该格式。

在以下屏幕截图中，您可以看到每种格式的示例：

在这两种格式中，您都可以看到电影的示例，其中包括标题，电影的制作年份，类型和演员。 我们不需要深入研究这些格式； 请注意，两种格式都可以表达复杂的数据，在Flutter中，您可以轻松地检索和解析JSON和XML。 我们将在本章中使用的服务提供JSON。

特别是，我们将使用电影数据库API（https://www.themoviedb.org）。 这是一个由社区构建的数据库，其中包含大量数据，可提供多种语言的电影和电视信息。

首次连接数据库之前，您需要获取一个API密钥。 您可以通过在https://www.themoviedb.org/上创建一个帐户，然后单击帐户页面左侧栏中的API链接来获取API密钥。 这是免费的，但需要有效的电子邮件来激活帐户。 还需要具有API密钥才能遵循本章中的示例。

创建应用程序并使用HTTP库连接到API

要做的第一件事是打开pubspec.yaml文件，并向HTTP库添加一个依赖关系，我们将使用该依赖关系进行HTTP请求。 请通过https://pub.dev/packages/http查看最新的可用版本。 在flutter依赖项下添加http库，如下所示：

dependencies:
 flutter:
 sdk: flutter
 http: ^0.12.0+4

然后，我们创建一个名为http_helper.dart的新文件，该文件将用于创建用于连接到Web服务的设置和方法。 在新文件中，让我们导入HTTP库：

import 'package:http/http.dart' as http;

使用as http命令，我们给库命名，因此，我们将通过http名称使用HTTP库的所有函数和类。

然后，我们创建一个新类，我们将其称为HttpHelper：

class HttpHelper {}

下一步是创建地址URL以连接到服务。 这将需要一些字符串，我们将根据需要将其连接起来以从服务中检索数据。 在HttpHelper类的顶部添加以下声明：

 final String urlKey = 'api_key=YOUR API KEY HERE';
 final String urlBase = 'https://api.themoviedb.org/3/movie';
 final String urlUpcoming = '/upcoming?';
 final String urlLanguage = '&language=en-US';

为了更轻松地检索这些字符串的值，它们都以url前缀开头。 第一个字符串urlKey包含值api_key =和您从电影数据库服务获得的API密钥。 urlBase字符串是我们将要使用的每个地址的开头。 urlUpcoming是特定于即将上映电影的URL的一部分。 最后，urlLanguage包含一个可选参数，该参数允许您指定要用于查询结果的语言

现在，我们准备编写此类的第一个方法，该方法将用于检索20部即将上映的电影的列表：

Future<String> getUpcoming() async { }

您可能会在这里注意到一个不熟悉的语法。 getUpcoming（）函数返回一个future并被签名为异步。 这两个元素都与异步编程有关。

让我们从Web服务检索一些数据：

在getUpcoming方法中，让我们添加一个字符串来创建将在连接期间使用的URL：

final String upcoming = urlBase + urlUpcoming + urlKey +urlLanguage;

接下来，让我们使用HTTP库来创建到我们已建立的URL的连接：

http.Response result = await http.get(upcoming);

http类的get方法返回一个包含Response的Future。 http.Response类包含从成功的HTTP调用接收到的数据。

await关键字仅在标记为异步的函数中起作用，它等待Future完成。 在完成这一行之前，它不会转到线程的下一行，其行为类似于同步代码，但是请记住，这发生在执行的第二行上，因此不会停止UI线程。

现在，我们如何阅读响应？ 让我们编写以下代码：

if (result.statusCode == HttpStatus.ok) {
 String responseBody = result.body;
 return responseBody;
}
else {
 return null;
}

HttpStatus类需要dart:io库。 在http_helper.dart文件的顶部，添加所需的导入：

import 'dart:io';

响应具有statusCode和body属性。 状态代码可以表示成功的响应，它是HttpStatus.ok的代码200或错误。 您可能熟悉错误404； 在Dart中，您只需使用HttpStatus.notFound来表达它。

在前面的代码中，如果响应具有有效的状态码，我们将读取响应的主体，该主体是一个字符串，其中包含通过http.get方法检索的所有数据，并将其返回给调用方。

总结起来，我们现在有了一个异步函数，该函数发出一个HTTP请求并返回一个包含字符串的Future。 现在我们需要从main方法调用此函数，并将结果显示给用户。 接下来，让我们开始。

解析JSON数据并将其转换为模型对象

添加模型类

添加列表数据显示

显示尾随图标

显示详细信息屏幕并传递数据

添加搜索功能

详情参阅 - 亚图跨际