Flutter:获取HTML页面的某些元素

时间:2018-03-21 14:55:21

标签: dart flutter

我最近开始使用dart& amp;开发一个动物收容所应用程序。扑了一下,遇到了问题。

这个想法是有一个捐赠页面,用户可以选择为狗狗购买食物。开放式脚手架将显示食物的图片,并从销售所述食物的网站和当前价格中获取一些数据。图像作为资产存储在本地,但我想从网站上获取至少价格,因此它始终是最新的。

我按照flutter.io上的教程,但问题是http.get返回网站的整个代码,而不仅仅是我指定的部分(description_tab)。我试过检查异步和放大器dart:转换文档,但到目前为止,我还没有找到任何可以帮助从HTML网站抓取特定内容的东西,使用div标签。

完整代码可在此处找到:https://github.com/kergefarkas/osszefogasaszanhuzokert

这就是我能够获取网站的整个HTML代码的方式:

Future<JoseraAdultActive> fetchPost() async {
  final response = await http.get(
      'https://www.petissimo.hu/kutyaknak/szarazeledelek/josera/josera-active.html');
  final json = JSON.decode(response.body);

  return new JoseraAdultActive.fromJson(json);
}

class JoseraAdultActive {
  final String description;
  final String price;

  JoseraAdultActive({this.description, this.price});

  factory JoseraAdultActive.fromJson(Map<String, dynamic> json) {
    return new JoseraAdultActive(
        description: json['description_tab'],
        price: json['product_price_from']);
  }
}

这是我显示提取信息的地方:

new Container(
                    padding: const EdgeInsets.only(top: 10.0, right: 5.0),
                    child: new FutureBuilder<JoseraAdultActive>(
                        future: fetchPost(),
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {

                            return new Text('');
                          } else if (snapshot.hasError) {
                            return new Text('Error');
                          }
                          return new CircularProgressIndicator();
                        })),

我还认为JSON.decode不能用于HTML代码,但找不到任何可以使用的东西。试图通过子串切片它也不起作用。

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:5)

进一步发表Seth的评论,你应该能够使用html库。

这应该是这样的:

import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart';

var document = parse(response.body);
var priceElement = document.getElementsByClassName("product_price_from");
// priceElement may have weird formatting (I see &nbsp;) so you might need to do some parsing
// here to solve that

我还建议学习正则表达式(RegEx),因为它们可以用来解决这个问题,并且对各种编程问题都很有用。这是a link to dart's regex documentation和一般RegEx tutorial

话虽如此,此代码将依赖于URL更改,网站更改或关闭,特定产品不再销售,并将使用用户的数据,以及许多其他因素可能或可能不在你的控制范围之内 - 所以即使它仅仅是一个用于避难所的应用程序,我也会对将其放入生产代码感到有点怀疑。至少要确保它有一个安全的后备(即回落到11500英尺的当前价格)。

我很好地考虑这是否真的有必要,而不是每年只在价格变化时自己更新一次。或者,如果您的应用程序有服务器后端(甚至可以访问庇护所的网站 - 您可以将页面放在shelter.com/donationprices/joseraadultactive,只需&#34; 11499&#34;被退回),我建议这只是一个应用程序可以检索的参数,你可以更新(如果你绝对希望它自动完成,有一个任务在服务器上运行一天一次,以检索最新的价格)。此外,我不知道庇护所在哪里工作,但在我居住的地方,他们倾向于大批量购买食品或者当它在销售时,所以一袋食品的价格有点无关紧要 - 此时你可能只是有一个捐赠按钮,上面有一个袋子和任意价格的图片,因为你可能会得到尽可能多的捐款,而且比应用程序出现问题还要多。 / p>