利用php加js实时爬取数据

Posted 2021-03-31 FCC广州社区

一般我们做爬虫，都是用后端语言爬取数据之后存进数据库。
那我们前端是不是就不能玩爬虫了呢？NO，我们一起来看看这是什么奇技淫巧...
现在我们利用js来爬取，并实时使用这些数据，php仅仅把目标网页渲染后的html给转成字符串，并提供一个接口供我们调用以获取目标网页的html字符串。
至于为什么选php，那还用说吗，php不是世界上最好的语言吗？开玩笑的啦，不过php却是世界上部署最方便的后端语言，阿里云6块钱一年的虚拟主机丢进去就能跑起来。

先看一眼效果：

左边的是我写的，右边的是酷狗手机网页，除了换了层皮，是不是赶脚一毛一样？没错，数据全是爬取的，啦啦啦...
在线地址：http://www.xi-g.com/index

我们先新建一个php文件get_kugou.php：

<?php // 允许所有域访问header("Access-Control-Allow-Origin: *");// 接收一个参数，参数名叫url$url = $_GET['url'];// 酷狗的网址$crossUrl = 'http://m.kugou.com/'.$url;// 把这个网页读取后转成字符串$res = file_get_contents($crossUrl);// 输出这个字符串echo $res;?>

http://www.xi-g.com/get_kugou.php

我们可以先访问一下，然后再加个参数访问：

http://www.xi-g.com/get_kugou.php?url=/plist/index

是不是很神奇，通过参数可以间接访问酷狗任何一个页面...
接下来我们看怎么换皮，首先我们当然得把静态页面写好呀，我这里只演示怎么抓取数据：

// 调个ajax$.ajax({ 
    type:'get',    url: 'http://www.xi-g.com/get_kugou.php',    success: function(data) {        // 打印看看是个什么玩意
        console.log(data);
    }
});

打印一下：

我们已经把整个酷狗首页的html字符串拿到了，接下来是重点，怎么提取数据：

$.ajax({ 
    type:'get',
    url: 'http://www.xi-g.com/get_kugou.php',
    success: function(data) {        // 创建一个div的盒子存起来
        var div = document.createElement('div');        // 把整个html的字符串存到这个div节点里
        div.innerHTML = data;        // 分析html结构后，把类名为.panel-songslist-item的元素全部存到list变量里
        // querySelectorAll()以数组形式返回所有匹配节点
        var list = div.querySelectorAll('.panel-songslist-item');        // 定义一个空数组
        var songList = [];        // 遍历list提取歌单数据，整理格式
        for(var i = 0; i<list.length; i++){            // 定义空对象
            var song = {};            // 查找类名为.panel-songs-item-name的元素里的span节点里的文本存到song.title属性
            song.title = list[i].querySelector('.panel-songs-item-name span').textContent;            // 取到每个list元素的id值
            song.hash = list[i].id.substr(6);            // 把song对象推入songList数组
            songList.push(song);
        }        // 我们来打印songList这个对象数组看看
        console.log(songList);
    }
});

打印结果：

现在我们就把酷狗首页的歌单数据给拿到了，只要拿到数据就能构建我们的页面了，是不是十分神奇，关键点还是对querySelectorAll()和querySelector()这两个方法的运用，根据id名、class名、标签名来查找元素提取数据。
我们再来提取一下歌单页面的数据，还是老方法，但是需要仔细分析页面才能提取到我们想要的数据：

$.ajax({ 
    type:"get",
    url: "http://www.xi-g.com/get_kugou.php?url=plist/index",
    success: function(data) {        var div = document.createElement('div');
        div.innerHTML = data;        var list = div.querySelectorAll('.panel-img-list li');        var plistList = [];        for(var i = 0; i<list.length; i++){            var plist = {};
            plist.imgUrl = list[i].querySelector('.panel-img-left img').getAttribute('_src');
            plist.plistName = list[i].querySelector('.panel-img-content-first').textContent;
            plist.plistNum = list[i].querySelector('.panel-img-content-sub').textContent;
            plist.location = "plist/list/"+list[i].querySelector('a').href.substr(30);
            plistList.push(plist);
        }
        console.log(plistList);
     }
});

打印结果：

深圳新闻网：http://m.sznews.com/
每一条新闻都是带a标签链接的，根据这个链接我们可以进行二次爬取，即从列表页爬进详情页...