Flutter 小说爬虫Demo

·  阅读 3111

Flutter 尽管没有 Python 那样有强大的爬虫框架,但本身自己却是有一套自己解析 HTML5 语言的插件。我们可以用他解析一些网页,也算是简易版的爬虫吧。

我就用笔趣阁的网站介绍一下这个框架,我们需要在 pubspec.yaml 中添加引用:

html: ^0.14.0+3
复制代码

分析网站

以笔趣阁搜索"元尊"为例。

从上图中,我们可以看出,很多信息,我们想要爬取的网站域名,关键字,以及网址。

  • 域名
static const String baseImgUrl = "http://www.xbiqige.com";
static const String baseUrl = "http://www.xbiqige.com/";
复制代码
  • 网址
 //搜索小说的接口
static const searchBook = "search.html?searchtype=novelname&searchkey=";

复制代码
  • 我们要展示的实体类信息

假如我们要在 App 中显示网页搜索条目结果,我们可以根据网页上的信息构造我们自己的实体类。

class BookSearchItem {
  //书名
  final String bookName;

  //图书地址
  final String bookUrl;
  //作者
  final String author;

  //最新章节url
  final String lastUrl;

  //最新章节标题
  final String lastTitle;

  //文章类型
  final String type;

  //图书封面
  final String bookCover;

  BookSearchItem(
      this.author, this.lastUrl, this.lastTitle, this.type, this.bookCover, this.bookName, this.bookUrl);

  @override
  String toString() {
    return 'BookSearchItem{bookName: $bookName, bookUrl: $bookUrl, author: $author, lastUrl: $lastUrl, lastTitle: $lastTitle, type: $type, bookCover: $bookCover}';
  }
}

复制代码

解析网页

鼠标右键,查看源码,书读百遍其义自见,就一直看,虽然不能背下来,但也能看出一点端倪吧,嘿嘿,说不定你就把它背下来了。。。

网络请求类

万丈高楼,始于基地,数据的请求一直都是基层工作。下面构造我们的网络请求类。

请记得引入 dio 框架。


import 'package:dio/dio.dart';

class DioFactory {
  static DioFactory get instance => _getInstance();

  static DioFactory _instance;

  Dio _dio;

  BaseOptions _baseOptions;

  DioFactory._internal(
      {String basUrl = Config.baseUrl,
      Map<String, dynamic> header = Config.headers}) {
    _baseOptions = new BaseOptions(
      baseUrl: basUrl,
      connectTimeout: Config.connectTimeout,
      responseType: ResponseType.json,
      receiveTimeout: Config.receiveTimeout,
      //headers: header
    );
    _dio = new Dio(_baseOptions);
  }

  static _getInstance() {
    if (null == _instance) {
      _instance = new DioFactory._internal();
    }

    return _instance;
  }


  /**
   * 新添加,只用于返回字符串,而不是map类型
   *
   */
  Future<String> getString(url, {options, cancelToken, data}) async {
    print("get==>:$url,body:$data");

    Response response;
    try {
      response = await _dio.get(url, cancelToken: cancelToken);
    } on DioError catch (e) {
      if (CancelToken.isCancel(e)) {
        print('get请求取消! ' + e.message);
      } else {
        print('get请求发生错误:$e');
      }
    }
    //print(response.data.toString());
    return response == null ? "" : response.data.toString();
  }

}

class Config {
  static const String baseImgUrl = "http://www.xbiqige.com";
  static const String baseUrl = "http://www.xbiqige.com/";

  ///链接超时时间
  static const int connectTimeout = 8000;

  ///  响应流上前后两次接受到数据的间隔,单位为毫秒。如果两次间隔超过[receiveTimeout],
  ///  [Dio] 将会抛出一个[DioErrorType.RECEIVE_TIMEOUT]的异常.
  ///  注意: 这并不是接收数据的总时限.
  static const int receiveTimeout = 3000;

  ///普通格式的header
  static const Map<String, dynamic> headers = {
    "Accept": "application/json",
  };

  ///json格式的header
  static const Map<String, dynamic> headersJson = {
    "Accept": "application/json",
    "Content-Type": "application/json; charset=UTF-8",
  };
}

复制代码

html 插件解析代码

我们首先应该分析一下页面上的代码,看有没有什么逻辑可循。

 //搜索书籍的接口,为List赋值
  Future<List<BookSearchItem>> fetchSearchBook(String bookName) async {
    var response;
    List<BookSearchItem> books = new List();
    try {
      //获取到整个网页的代码数据
      response = await net.getString("${StringApi.searchBook}$bookName");
      var document = parse(response);//将String 转换为document对象
      var content = document.querySelector(".librarylist");//找到标签中librarylist的节点,类选择器节点的查找前面要加个.
      var lefts = content.querySelectorAll(".pt-ll-l");//找到所有pt-ll-l节点
      var rights = content.querySelectorAll(".pt-ll-r");//找到所有pt-ll-r 节点
      int count = lefts.length > rights.length ? rights.length : lefts.length;//取最短数据,这里是为了保险,防止数组越界
      for (int i = 0; i < count; i++) {
        //在pt-ll-l,pt-ll-r 节点下找到目标数据
        BookSearchItem item = new BookSearchItem(
            rights[i].querySelectorAll(".info>span")[1].text.trim(),//第二个span元素值,获取作者
            rights[i].querySelector(".last>a").attributes["href"].trim(),//href 属性值,最后一章的Url
            rights[i].querySelector(".last>a").text.trim(),//元素值,获取标题
            rights[i].querySelectorAll(".info>span")[2].text.trim(),//第三个span元素值,获取小说分类
            lefts[i].querySelector("div>a>img").attributes['src'].trim(),//获取小说图片
            lefts[i].querySelector("div>a>img").attributes['alt'].trim(),//获取书名
            lefts[i].querySelector("div>a").attributes['href'].trim());//获取书URL
        books.add(item);
        print(item.toString());
      }
      return books;
    } catch (e) {
      print(e);
    }

    return books;
  }

复制代码

页面展示

class DemoBiqugePage extends StatefulWidget {
  @override
  _DemoBiqugePageState createState() => _DemoBiqugePageState();
}

class _DemoBiqugePageState extends State<DemoBiqugePage> {
  Api _api = new Api();

  List<BookSearchItem> _books = new List();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _api.fetchSearchBook("元尊").then((data) {
      setState(() {
        _books.clear();
        _books.addAll(data);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("笔趣阁爬虫示例"),
      ),
      body: _books.length == 0
          ? Center(
              child: Text("正在加载数据..."),
            )
          : Container(
              margin: EdgeInsets.all(10),
              child: ListView.separated(
                  itemBuilder: (BuildContext context, int index) {
                    return item_book_search(context, _books[index]);
                  },
                  separatorBuilder: (BuildContext context, int index) {
                    return Divider(
                      height: 2,
                      color: Theme.of(context).primaryColor,
                    );
                  },
                  itemCount: _books.length),
            ),
    );
  }
}

Widget item_book_search(BuildContext context, BookSearchItem book) {
  return Container(
      margin: EdgeInsets.only(left: 10, right: 10, top: 10),
      child: InkWell(
        borderRadius: BorderRadius.circular(20),
        onTap: () {},
        child: Container(
          child: Container(
              height: 140,
              margin: EdgeInsets.all(10),
              child: Row(
                children: <Widget>[
                  Container(
                    height: 120,
                    width: 80,
                    child: CachedNetworkImage(
                        imageUrl: Config.baseImgUrl + book.bookCover),
                  ),
                  Expanded(
                      child: Container(
                    margin: EdgeInsets.only(left: 30),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.only(bottom: 20),
                          child: Text(
                            book.bookName,
                            style: TextStyle(
                                fontWeight: FontWeight.w500,
                                color: Colors.black,
                                fontSize: 18.0),
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                          ),
                        ),
                        Row(
                          children: <Widget>[
                            Container(
                              margin: EdgeInsets.only(top: 0),
                              child: Text(
                                "类型:" + book.type.split(':')[1],
                                style: TextStyle(
                                    fontWeight: FontWeight.w300,
                                    color: Colors.black,
                                    fontSize: 12.0),
                                overflow: TextOverflow.ellipsis,
                                maxLines: 1,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(left: 20),
                              child: Text(
                                book.author,
                                style: TextStyle(
                                    fontWeight: FontWeight.w300,
                                    color: Colors.black,
                                    fontSize: 12.0),
                                overflow: TextOverflow.ellipsis,
                                maxLines: 2,
                              ),
                            )
                          ],
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 20),
                          child: Text(
                            book.lastTitle,
                            style: TextStyle(
                                fontWeight: FontWeight.w400,
                                color: Colors.black,
                                fontSize: 16.0),
                            overflow: TextOverflow.ellipsis,
                            maxLines: 2,
                          ),
                        ),
                      ],
                    ),
                  ))
                ],
              )),
        ),
      ));
}

复制代码

效果图

总结

以上用到的插件有:

  dio: ^2.1.10
  cached_network_image: ^2.0.0
  html: ^0.14.0+3
复制代码

以上的代码直接复制,粘贴到自己的 Demo 中即可运行,如果你对比着笔趣阁网站页面的 H5 代码看,效果会更好。Flutter 的解析框架肯定没有 Python 的强大,但是用来用来匹配字符串的最要还是正则表达式,要从茫茫码海中提取出自己想要的数据,还是不容易。且行且珍惜。

分类:
Android
标签:
分类:
Android
标签: