Osheep

时光不回头,当下最重要。

RE:利用爬虫技术制作一个看动漫新番的APP

作者:hwj3747
转载请注明

简介

在看动漫追番的时候,发现每一季度的新番都是被优酷,爱奇艺,哔哩哔哩,PPTV等各大视频厂商买了版权,导致我在手机上要装各种软件,并且很多番更是直接被广电禁掉了,很烦。于是乎,我找到了一个山寨的网站:风车动漫,里面资源倒是挺多,(当然,广告弹窗什么的也很多)可惜没有APP端。刚好最近学习了爬虫技术,于是我就想,能不能用爬虫技术帮他搞一个APP端呢?说干就干,刚好好久没写代码了,就当是练练手,于是我制作了一个简易版的APP,不会设计界面,界面有点丑,并且还是有很多问题没解决就是了。
目前完成了新番展示页面,即展示周一到周日每日新番表,番剧详情页面,播放页面效果如下:

《RE:利用爬虫技术制作一个看动漫新番的APP》

ezgif-2-b3fd223a68.gif

基本功能算是实现了,但是还有很多问题,能力有限,还没解决。

前期准备

  • 技术准备:需要掌握Android开发技术,以及一点点的前端HTML,CSS,JS技术。
  • 基本框架就是我以前写过的[Android MVP+Retrofit+dagger2+RxAndroid框架整合])(其实这么小的项目,根本不需要这么重的框架,但是拿过来练手,熟悉下框架还是不错的)
  • jsoup:好像Java做爬虫都是用的这个包。
  • contextmenu:就是右边周一到周日的选择菜单,看他动效还不错就拿过来用了,详细使用方法点进去GitHub就看得到了。
  • glide :这个没什么好说的,就是加载图片的库了。
  • 谷歌浏览器 :因为要做爬虫,所以分析前端的HTML代码的工具也要有,这里推荐Chrome浏览器,好用!
  • 注意,本文主要讲述爬虫方面如何爬数据,至于Android端的实现都只是一些基本的页面,所以就不一一赘述了。

番剧列表页面

首先进入风车动漫这个网站,找到这个地方,我们只需要获取周一到周日的番剧列表就行了。

《RE:利用爬虫技术制作一个看动漫新番的APP》

5.PNG

然后用谷歌浏览器F12查看源代码,得到:

《RE:利用爬虫技术制作一个看动漫新番的APP》

6.PNG

我们发现它的结构是这样的:最上层一个div标签 class为tists,包含7个ul标签,每个u标签l包含若干个li标签,这个li标签里面就是每个番剧里的信息了,只包含番剧名,番剧链接以及当前第几话的信息。
知道这些后,我们就可以用爬虫来获取这些数据了。
首先我们建立一个用来存放番剧简要信息的实体类:

public class BangumiEntity {
    String title;//番剧标题
    String number;//当前是第几话
    String url;//番剧的链接
}

然后初始化,用Jsoup获取网站连接:

            String url = "http://www.fengchedm.com/";
            Connection conn = Jsoup.connect(url);
            // 修改http包中的header,伪装成浏览器进行抓取
            conn.header("User-Agent", "Mozilla/5.0 (X11; Linux x86_64; rv:32.0) Gecko/    20100101 Firefox/32.0");
            Document doc = null;
            try {
                doc = conn.get();
            } catch (IOException e) {
                e.printStackTrace();
            }

先获取最上层class为tists的这个div标签

Elements noteList = doc.select("div.tists");

然后获取其下的ul标签列表

 Elements ul = noteList.select("ul");

然后用同样的方法遍历ul标签下的li标签,获取其中的数据,因为这里只有两个a标签,第一个是第几话,第二个是番剧名,所以我就用first和last获取了,没在用数组了。.而attr方法可以用来获取标签内的某个属性,比如这里的a标签里的href属性,并且加上abs:可以取得到完整的路径,因为很多网站写路径的时候都是用的相对路径,最后,用二维数组保存这个信息:

ArrayList<ArrayList<BangumiEntity>> arrayList=new ArrayList<ArrayList<BangumiEntity>>();
for (Element ulElement : ul) {
                Elements li=ulElement.select("li");
                ArrayList<BangumiEntity> bangumiEntities=new ArrayList<BangumiEntity>();
                for (Element liElement : li) {
                    BangumiEntity bangumiEntity=new BangumiEntity();
                    bangumiEntity.setNumber(liElement.select("a").first().text());
                    bangumiEntity.setTitle(liElement.select("a").last().text());
                    bangumiEntity.setUrl(liElement.select("a").last().attr("abs:href"));
                    bangumiEntities.add(bangumiEntity);
                }
                arrayList.add(bangumiEntities);
            }

接下来要做的就是把这个arrayList的数据展示到页面上了,页面我是用的RecycleView+CarView实现,具体见源码。

番剧详情页面(1)

在前面的页面上,我们点击某一番剧进入页面,如下:

《RE:利用爬虫技术制作一个看动漫新番的APP》

1.PNG

用F12查看源代码,得到这一部分的HTML代码:

《RE:利用爬虫技术制作一个看动漫新番的APP》

2.PNG

接下来分析一下,这段HTML的结构是这样的:

  • 番剧名:class为spay的div标签,里面的a标签
  • 封面链接:class为tpic l的div标签下的img标签
  • 作者,状态等详细信息: class为alex的div标签下的span标签数组
    同样先新建一个实体对象用来保存这些信息:
    public class BangumiInfoEntity {
      String name;//名字
      String cover;//封面
      String all;//全集
      String autor;//作者
      String type;//类型
      String state;//状态
      String version;//版本
    }

    用前面得到的URL访问这个页面:

    getItemInfo(String url){
    Connection conn = Jsoup.connect(url);
              // 修改http包中的header,伪装成浏览器进行抓取
              conn.header("User-Agent", "Mozilla/5.0 (X11; Linux x86_64; rv:32.0) Gecko/    20100101 Firefox/32.0");
              Document doc = null;
              try {
                  doc = conn.get();
              } catch (IOException e) {
                  e.printStackTrace();
              }
    }

    然后就可以用爬虫来解析的这段代码了,还是和上面一样,先是获取spay div下的a标签得到番剧名,然后获取tpic l div(注意:这里两个class用.链接)下的img标签用attr方法获取src属性得到封面图片链接最后获取alex div 下的span数组,遍历得到番剧的详情信息。

    BangumiInfoEntity bangumiInfoEntity =new BangumiInfoEntity();
    bangumiInfoEntity.setName(doc.select("div.spay").select("a").text());
    bangumiInfoEntity.setCover(doc.select("div.tpic.l").select("img").attr("src"));
    Elements noteList = doc.select("div.alex").select("span");
    bangumiInfoEntity.setAll(noteList.get(0).text());
    bangumiInfoEntity.setState(noteList.get(1).text());
    bangumiInfoEntity.setAutor(noteList.get(2).text());
    bangumiInfoEntity.setVersion(noteList.get(3).text());
    bangumiInfoEntity.setType(noteList.get(4).text());

    番剧详情页面(2)

    我们已经获取到了番剧的详细信息,接下来,我们要获取的就是番剧下的资源信息了,页面如下:

《RE:利用爬虫技术制作一个看动漫新番的APP》

3.PNG

用F12查看源代码,得到这一部分的HTML代码:

《RE:利用爬虫技术制作一个看动漫新番的APP》

4.PNG

接下来分析一下,这段HTML的结构是这样的:所有的资源都是在tabs的div下,在其下面,资源来源在menu0的ul标签下,资源的集数在main0的div标签下,一一对应。并且,main0的div下用若干的li标签,每个li标签用a标签包裹每集的集数以及链接。
新建一个实体类,用来保存集数以及链接的信息:

public class BangumiEpisodeEntity {
    String num;//第几话
    String url;//地址
}

同样的,用番剧列表页面得到的链接访问这个页面:

getItemList(String url){
Connection conn = Jsoup.connect(url);
          // 修改http包中的header,伪装成浏览器进行抓取
          conn.header("User-Agent", "Mozilla/5.0 (X11; Linux x86_64; rv:32.0) Gecko/    20100101 Firefox/32.0");
          Document doc = null;
          try {
              doc = conn.get();
          } catch (IOException e) {
              e.printStackTrace();
          }
}

最后,用一个title的一维数组保存资源来源信息,用一个child的二维数组保存资源每一集的信息。先获取class为menu0下的ul标签数组,遍历将里面class为on的li标签存入title数组。然后获取class为main0下的div数组,再遍历下面的li标签,分别获取li标签下的a标签的text以及href属性,得到剧集名,以及剧集链接。

ArrayList<String> title=new ArrayList();
ArrayList<ArrayList<BangumiEpisodeEntity>> child=new ArrayList<ArrayList<BangumiEpisodeEntity>>();
            Elements noteList = doc.select("div.tabs");
            Elements ul = noteList.select("ul.menu0");
            Elements div = noteList.select("div.main0");
            for (Element ulElement : ul) {
                title.add(ulElement.select("li.on").text());
            }
            for(Element divElement:div){
                Elements li=divElement.select("li");
                ArrayList<BangumiEpisodeEntity> bangumiEpisodeEntities=new ArrayList<BangumiEpisodeEntity>();
                for (Element liElement : li) {
                    BangumiEpisodeEntity bangumiEpisodeEntity=new BangumiEpisodeEntity();
                    bangumiEpisodeEntity.setNum(liElement.select("a").text());
                    bangumiEpisodeEntity.setUrl(liElement.select("a").attr("abs:href"));
                    bangumiEpisodeEntities.add(bangumiEpisodeEntity);
                }
                child.add(bangumiEpisodeEntities);
            }

番剧详情页面的UI部分,上半部分用的是glide加载图片,下半部分用的是ExpandableListView展示各个资源来源下的番剧信息。

播放页面

这个部分就比较头大了,我原本的想法是获取视频的真实地址,然后直接用播放器播放,岂不是美滋滋。然而,我仔细研究了一下他的html页面,发现他视频播放时这样做的:

《RE:利用爬虫技术制作一个看动漫新番的APP》

5.PNG

就是说他的视频播放使用js代码动态注入的,然后用flash播放的,对于我这个对JS只了解皮毛的来说研究不透。对于如何获取视频的真实地址,希望有大佬能讲一下这方面的思路。
最后我就只能用webview直接加载视频播放页面了,但是新的问题就又来了,用webview倒是能加载,但是因为是山寨网站,网站下面一堆广告,看起来很不爽。我就又研究了一下,他的广告加载方式。。结果广告也是用js动态注入的,看不明白。于是我就用了一个很挫的方法解决了这个广告问题,因为广告都是在页面的上方,所以我只保留播放器上面的div不就得了。具体实现是这样的

WebView wv;
wv.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                                view.loadUrl("javascript:function setTop(){var x=document.getElementsByTagName(\"div\");" +
                        "for (var i=8;i<x.length;i++){x[i].style.display=\"none\";}}setTop();");
            }
        });
wv.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                view.loadUrl("javascript:function setTop(){var x=document.getElementsByTagName(\"div\");" +
                        "for (var i=8;i<x.length;i++){x[i].style.display=\"none\";}}setTop();");
            }
        });

在webview加载过程和加载完成后注入js代码,查找所有div标签,然后把播放器一下所有的div标签都屏蔽掉。

最后附上项目github地址:github

点赞