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

我最近开始使用 dart & flutter 为动物收容所开发应用程序,但遇到了问题。

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

我按照 flutter.io 上的教程进行操作,但问题是 http.get 返回站点的整个代码,而不仅仅是我指定的部分(description_tab)。我尝试检查 async & dart:convert 文档,但到目前为止,我还没有找到任何可以帮助使用 div 标签从 HTML 站点抓取特定内容的内容。

完整的代码可以在这里找到: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 代码,但找不到任何可以使用的东西。尝试通过子字符串对其进行切片也不起作用。

提前感谢您的帮助!

最佳答案

根据 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 只返回“11499”),我建议将其作为一个参数该应用程序可以检索您可以更新的内容(如果您绝对希望它自动完成,请每天在服务器上运行一次以检索最新价格的任务)。另外,我不知道您所在的避难所是如何运作的,但是在我住的地方,他们倾向于大量购买大量食品或在打折时购买,因此一袋食品的价格有些无关紧要-那时您可能还有一个捐赠按钮,上面有一个包的图片和一个任意价格,因为你可能会得到同样多的捐赠,而且比应用程序出现问题时更多。

https://stackoverflow.com/questions/49409611/

相关文章:

dart - Flutter - 动态构建小部件

dart - Flutter:从 Activity 上下文外部调用 startActivity()

flutter - 根据另一个小部件的位置/大小定位/调整小部件的大小

dart - 为什么 cupertino_icons 中的图标很少?

dart - Flutter.io (dart) - 如何创建左填充覆盖?

dart - Flutter - 在底部绘制一个矩形

android-studio - flutter :发布失败

dart - 如何在 flutter 搜索页面小部件中消除搜索建议?

dart - setState Dart/Flutter 中带有花括号的胖箭头符号

dart - flutter 构造函数错误