溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用nodejs怎么抓取頁(yè)面的始末

發(fā)布時(shí)間：2021-06-21 14:18:48 來(lái)源：億速云 閱讀：174 作者：Leah 欄目：web開(kāi)發(fā)

使用nodejs怎么抓取頁(yè)面的始末，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

事由以及動(dòng)機(jī)

2015年9月份全國(guó)研究生數(shù)學(xué)建模競(jìng)賽的F題，旅游線路規(guī)劃問(wèn)題。其中需要自己去查很多數(shù)據(jù)。例如所給201個(gè)***級(jí)景區(qū)的位置，以及景區(qū)距離所 在省會(huì)距離等等～開(kāi)始隊(duì)友小伙伴準(zhǔn)備從百度手動(dòng)去一個(gè)一個(gè)查詢，但是效率極低，在這么短的時(shí)間內(nèi)，需要收集這么多數(shù)據(jù)是多么的耗時(shí)，并且也不能把大把時(shí)間 花費(fèi)在查資料上，雖然說(shuō)查資料是必須的，題目也鼓勵(lì)我們從網(wǎng)上查詢相關(guān)數(shù)據(jù)，因此在團(tuán)隊(duì)中的我就想到了讓計(jì)算機(jī)幫我們?nèi)プ鲞@件事。

***步，確定想要抓取的信息，獲取數(shù)據(jù)服務(wù)api

以查詢個(gè)兩地的行車時(shí)間為例，我們以百度地圖為例，見(jiàn)下圖

使用nodejs怎么抓取頁(yè)面的始末

先打開(kāi)需要去請(qǐng)求數(shù)據(jù)的網(wǎng)頁(yè)，打開(kāi)開(kāi)發(fā)人員工具（我用的是chrome），選擇Network選項(xiàng)卡，輸入需要查詢的內(nèi)容（tips：先清除掉之前的網(wǎng)絡(luò)獲取紀(jì)錄，以方便接下來(lái)的借接口分析）。

點(diǎn)擊“查詢”，并監(jiān)控網(wǎng)絡(luò)數(shù)據(jù)流，會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)發(fā)起了很多的http請(qǐng)求，并返回了結(jié)果。

使用nodejs怎么抓取頁(yè)面的始末

通過(guò)分析所有請(qǐng)求，拿到想要的請(qǐng)求接口（一般情況下，都不會(huì)是Type為圖片類型的，并且耗時(shí)較長(zhǎng)的）。

點(diǎn)擊某個(gè)請(qǐng)求時(shí)能看到該請(qǐng)求的詳細(xì)信息

使用nodejs怎么抓取頁(yè)面的始末

查看請(qǐng)求的頭部信息Headers

使用nodejs怎么抓取頁(yè)面的始末

拿到請(qǐng)求的地 址：requestURL，例如：http://map.baidu.com/?newmap=1&reqflag=pcmap& biz=1&pcevaname=pc2&da_par=direct&from=webmap&qt=nav&da_src=pcmappg.searchBox.button&c=289&sn=2$$$$$$%E4%B8%8A%E6%B5%B7%E5%B8%82$$0$$$$&en=2$$$$$$%E5%8C%97%E4%BA%AC%E5%B8%82$$0$$$$&sc=289&ec=289&rn=5&extinfo=63&tn=B_NORMAL_MAP&nn=0&ie=utf-8&l=12&b=(13503777.31,3639994.64;13542753.31,3642234.64)&t=1443022534161

并分析，一般我們要看的是URL中的querey部分，也就是？后面的內(nèi)容，一般來(lái)說(shuō)由很多（字母＋百分號(hào)）構(gòu)成的為中文字符，是漢字被url轉(zhuǎn)碼獲得?？梢园言摰刂纺玫降刂窓诓樵円幌拢瑵h字的內(nèi)容

使用nodejs怎么抓取頁(yè)面的始末

那我們的數(shù)據(jù)服務(wù)API就拿到了

編寫數(shù)據(jù)訪問(wèn)頁(yè)面

接下來(lái)就是利用XMLHTTPRequerst來(lái)調(diào)取他人的服務(wù)了

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>getData</title> </head> <body>     <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>     <script>         var sn="北京市";         var en="上海市";         var url="http://map.baidu.com/?newmap=1&reqflag=pcmap&biz=1&pcevaname=pc2&da_par=direct&from=webmap&qt=nav&da_src=pcmappg.searchBox.button&c=289&sn=2$$$$$$"+         sn+"$$0$$$$&en=2$$$$$$"+         en+"$$0$$$$&sc=289&ec=289&rn=5&extinfo=63&tn=B_NORMAL_MAP&nn=0&ie=utf-8&l=12&b=(13503777.31,3639994.64;13542753.31,3642234.64)&t=1443022534161";          $.ajax({             url:url,             type:"get",             success:function(res){                 console.log(res)             },             error:function(e){                 console.log(e)             }         })     </script> </body> </html>  html

使用nodejs怎么抓取頁(yè)面的始末

運(yùn)行察看結(jié)果：

使用nodejs怎么抓取頁(yè)面的始末

跨域提示錯(cuò)誤，跨域（見(jiàn)為什么瀏覽器不能跨域http://www.cnblogs.com/alvinwei1024/p/4626054.html）是瀏覽器的行為。

方法1: 通過(guò)jsonp的方法

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>getData</title> </head> <body>     <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>     <script>         var sn="北京市";         var en="上海市";         var url="http://map.baidu.com/?newmap=1&reqflag=pcmap&biz=1&pcevaname=pc2&da_par=direct&from=webmap&qt=nav&da_src=pcmappg.searchBox.button&c=289&sn=2$$$$$$"+         sn+"$$0$$$$&en=2$$$$$$"+         en+"$$0$$$$&sc=289&ec=289&rn=5&extinfo=63&tn=B_NORMAL_MAP&nn=0&ie=utf-8&l=12&b=(13503777.31,3639994.64;13542753.31,3642234.64)&t=1443022534161";          $.ajax({             url:url,             type:"get",             dataType:"jsonp",              jsonp:"callback",             success:function(res){                 console.log(res)             },             error:function(e){                 console.log(e)             }         })     </script> </body> </html>  html

使用nodejs怎么抓取頁(yè)面的始末

運(yùn)行結(jié)果：獲取到想要的數(shù)據(jù)

使用nodejs怎么抓取頁(yè)面的始末

可以拿到，北京到上海的距離1208548，時(shí)間48617以及距離等。

  1. dis: 1208548

  2. kps: Array[38]

  3. rss: Array[38]

  4. taxi: Object

  5. time: 48617

  6. toll: 580

方法二：CORS

除了方法以利用jsonp跨域外，還可以通過(guò)服務(wù)器做一個(gè)代理，通過(guò)cors繞過(guò)原來(lái)資源不允許跨域的限制。

本文利用node來(lái)做服務(wù)器，原因很簡(jiǎn)單，最方便，幾句代碼就能搞定，方便又快捷。

var http = require('http'); var request_ = require('request'); var urlencode2=require("urlencode2"); var url=require('url') http.createServer(function (request, response) {      var arg1 = url.parse(request.url, true).query;      var sn=arg1.sn;     var en=arg1.en;     var req_url="http://api.map.baidu.com/?qt=nav&c=131&sn=2%24%24%24%24%24%24%20"+           urlencode2(sn,'gbk')+"%24%240%24%24%24%24&en=2%24%24%24%24%24%24"+           urlencode2(en,'gbk')+"%24%240%24%24%24%24&sy=0&ie=utf-8&oue=1&fromproduct=jsapi&res=api&callback=BMap._rd._cbk54249";       request_.get({             url:req_url,             json:true         },         function(error, response_, body) {           if (!error && response_.statusCode == 200) {             var res=-1;             if(body){               res=body.split(',"toll":')[0];//time  s               res=res.split('"time":')[2];               console.log(res)               if(!res){                 res=-1;               }               else{                 res=res/60;               }             }             response.writeHead(200, {                 "Content-Type": "text/html; charset=UTF-8",                 'Access-Control-Allow-Origin':request.headers.origin             });             response.end(res+'\n');           }           else{             // console.log(error)           }         }     ) }).listen(8888); // 終端打印如下信息 console.log('Server running at http://127.0.0.1:8888/');  nodejs

使用nodejs怎么抓取頁(yè)面的始末

其中，本文用到了request（用于發(fā)起http請(qǐng)求）模塊和urlencode2（主要用于URLEncode）模塊

request安裝：

npm install request

詳見(jiàn)：https://github.com/request/request

urlencode2安裝：

詳見(jiàn)：https://github.com/node-modules/urlencode

1 var http = require('http');
2 http.createServer(function (request, response) {
3 //...
4 response.end('welcome baby');
5 }).listen(8888);

這幾句簡(jiǎn)單的代碼就搭建了一個(gè)web服務(wù)，端口號(hào)是8888

$ node 文件名.js

在終端輸入以上指令即可允許該服務(wù)。

1 var arg1 = url.parse(request.url, true).query;
2     var sn=arg1.sn;
3     var en=arg1.en;
4     var req_url="http://api.map.baidu.com/?qt=nav&c=131&sn=2%24%24%24%24%24%24%20"+ 5           urlencode2(sn,'gbk')+"%24%240%24%24%24%24&en=2%24%24%24%24%24%24"+ 6           urlencode2(en,'gbk')+"%24%240%24%24%24%24&sy=0&ie=utf-8&oue=1&fromproduct=jsapi&res=api&callback=BMap._rd._cbk54249";

以上是獲取查詢參數(shù)并拼接請(qǐng)求字符串

然后利用request向目標(biāo)服務(wù)器發(fā)送請(qǐng)求，并解析出需要的信息

最重要的是以下代碼：

1  response.writeHead(200, {
2       "Content-Type": "text/html; charset=UTF-8", 3       'Access-Control-Allow-Origin':request.headers.origin 4 }); 5 response.end(res+'\n');

允許所有用戶跨域訪問(wèn)，因此我們就能訪問(wèn)自己搭建的web服務(wù)了。

我在前端頁(yè)面只需，請(qǐng)求我們的地址http://localhost:8888

并且指定sn（start node）與 en（end node）一并發(fā)送到服務(wù)器即可。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手