使用JavaScript寫爬蟲

比Python，JavaScript才是更適合寫爬蟲的語言。原因有如下三個方面：

JavaScript異步IO機制適用于爬蟲這種IO密集型任務。JavaScript中的回調非常自然，使用異步網絡請求能夠充分利用CPU。
JavaScript中的jQuery毫無疑問是最強悍的HTML解析工具，使用JavaScript寫爬蟲能夠減少學習負擔和記憶負擔。雖然Python中有PyQuery，但終究還是比不上jQuery自然。
爬取結果多為JSON，JavaScript是最適合處理JSON的語言。

一、任務：爬取用戶在Github上的repo信息

通過實例的方式學習爬蟲是最好的方法，先定一個小目標：爬取github repo信息。入口URL如下，我們只需要一直點擊next按鈕就能夠遍歷到用戶的所有repo。

https://github.com/{{username}}?tab=repositories

獲取repo之后，可以做什么？

統計用戶最常使用的語言，統計用戶語言使用分布情況統計用戶所獲取的star數，fork數

二、爬蟲雙股劍：axios和jQuery

axios是JavaScript中很常用的異步網絡請求庫，相比jQuery，它更輕量、更專業。既能夠用于瀏覽器端，也可以用于Node。它的語法風格是promise形式的。在本任務中，只需要了解如下用法就足夠了：

axios.get(url).then((resp) => {
 請求成功，處理resp.data中的html數據
}).catch((err) => {
 請求失敗，錯誤處理
})

請求之后需要處理回復結果，處理回復結果的庫當然是用jQuery。實際上，我們有更好的選擇：cheerio。

在node下，使用jQuery，需要使用jsdom庫模擬一個window對象，這種方法效率較低，四個字形容就是：笨重穩妥。

如下代碼使用jQuery解析haha.html文件

fs = require("fs")
jquery=require('jquery')
jsdom=require('jsdom') //fs.readFileSync()返回結果是一個buffer，相當于byte[] 
html = fs.readFileSync('haha.html').toString('utf8') 
dom= new jsdom.JSDOM(html) 
$=jquery(dom.window) console.log($('h1'))

cheerio只實現了jQuery中的DOM部分，相當于jQuery的一個子集。cheerio的語法和jQuery完全一致，在使用cheerio時，幾乎感覺不到它和jQuery的差異。在解析HTML方面，毫無疑問，cheerio是更好的選擇。如下代碼使用cheerio解析haha.html文件。

cheerio=require('cheerio')
html=require('fs').readFileSync("haha.html").toString('utf8')
$=cheerio.load(html)
console.log($('h1'))

只需20余行，便可實現簡單的github爬蟲，此爬蟲只爬取了一頁repo列表。

var axios = require("axios")
var cheerio = require("cheerio")
axios.get("https://github.com/weiyinfu?tab=repositories").then(resp => {
 var $ = cheerio.load(resp.data)
 var lis = $("#user-repositories-list li")
 var repos = []
 for (var i = 0; i < lis.length; i++) {
 var li = lis.eq(i)
 var repo = {
 repoName: li.find("h3").text().trim(),
 repoUrl: li.find("h3 a").attr("href").trim(),
 repoDesc: li.find("p").text().trim(),
 language: li.find("[itemprop=programmingLanguage]").text().trim(),
 star: li.find(".muted-link.mr-3").eq(0).text().trim(),
 fork: li.find(".muted-link.mr-3").eq(1).text().trim(),
 forkedFrom: li.find(".f6.text-gray.mb-1 a").text().trim()
 }
 repos.push(repo)
 }
 console.log(repos)
})

三、更豐富的功能

爬蟲不是目的，而是達成目的的一種手段。獲取數據也不是目的，從數據中提取統計信息并呈現給人才是最終目的。

在github爬蟲的基礎上，我們可以擴展出更加豐富的功能：使用echarts等圖表展示結果。

要想讓更多人使用此爬蟲工具獲取自己的github統計信息，就需要將做成一個網站的形式，通過搜索頁面輸入用戶名，啟動爬蟲立即爬取github信息，然后使用echarts進行統計展示。網站肯定也要用js作為后端，這樣才能和js爬蟲無縫銜接，不然還要考慮跨語言調用。js后端有兩大web框架express和koa，二者API非常相似，并無優劣之分，但express更加流行。

如上設計有一處用戶體驗不佳的地方：當啟動爬蟲爬取github信息時，用戶可能需要等待好幾秒，這個過程不能讓用戶干等著。一種解決思路是：讓用戶看到爬蟲爬取的進度或者爬取過程?？梢酝ㄟ^websocket向用戶推送爬取過程信息并在前端進行展示。展示時，使用類似控制臺的界面進行展示。

如何存儲爬取到的數據呢？使用MongoDB或者文件都可以，最好實現兩種存儲方式，讓系統的存儲方式變得可配置。使用MongoDB時，用到js中的連接池框架generic-pool。

整個項目用到的庫包括：

express：后端框架
cheerio+axios：爬蟲
ws：websocket展示爬取過程
webpack：打包工具
less：樣式語言
echarts：圖表展示
vue：模板渲染
jquery：DOM操作
mongodb：存儲數據
generic-pool：數據庫連接池

試用地址：

https://weiyinfu.cn/githubstatistic/search.html?

案例地址：https://github.com/weiyinfu/GithubStatistic

原文鏈接：https://zhuanlan.zhihu.com/p/53763115

剛，記者從杭州市發改委獲悉，2022年春節期間留杭省外員工電子消費券申報工作，將于明天（1月18日）8:00開始，至1月24日21:00截止；異議處理申請于1月25日12:00截止。

申報通道根據員工參保情況，分為2個：

用人單位申報：職工社保或工程建設項目工傷保險的參保人員，由用人單位通過PC端在“親清在線”平臺申報。

靈活就業個人申報：靈活就業參保人員由個人通過手機端在浙里辦APP“親清在線”應用申報。

具體怎么申報？一起來看！

1.登錄親清在線

路徑1：在“浙江省政務服務網”（https://www.zjzwfw.gov.cn）首頁“親清在線”欄目進入；

路徑二：瀏覽器直接訪問https://qinqing.hangzhou.gov.cn，進入親清在線。

打開“親清在線”首頁，在右上角按【登錄】，選擇【法人登錄】，使用浙江政務網高級實名認證賬號、法人數字證書、電子營業執照等方式登錄。

2.進入政策

登錄后，在“惠企政策”頁，找到置頂政策“春節期間留杭省外員工電子消費券發放”，點擊【兌現】。

如跳出“賬號等級不夠或未授權”提示框，說明當前賬號不符合申報要求，請根據提示提升賬號等級或由更高賬號進行授權操作。

3.查閱政策

進入政策后可查閱政策內容，點擊【申報】進入政策申報頁面。

以下申報單位將無法進入申報頁面，如與事實不符可聯系親清D小二：

①申報單位是國企、事業單位和非杭州企業；

②申報單位無法判斷是否在杭（企業、個體工商戶、社會組織）；

③申報單位未在杭納稅。

4.政策申報

第一步：確認企業信息無誤后，可直接添加申領補貼的員工。

添加員工支持單條錄入和批量錄入兩種方式：

①單條錄入：點擊【添加員工】進行添加?！締T工姓名】框支持使用姓名模糊查詢滿足參保和非浙條件的參保員工信息，選中后將自動補全對應信息，填報人員補充員工手機號即可完成填報；也可直接手動錄入員工信息。

②批量錄入：【下載待申報數據】Excel電子表格（名單中包含滿足參保和非浙條件的員工信息），根據員工留杭情況對表格人員進行增刪處理，并補充員工手機號碼。確保表格內只保留需申報的員工信息，點擊【批量導入】上傳表格。（批量導入數據單次最大支持200條，支持連續上傳多個表格）

添加成功后，員工將展示在下方申報列表中。

注：個人證件類型支持以下幾種，填報須使用與繳納社保時使用的證件類型一致，否則存在社保無記錄的問題：

（1）身份證；

（2）護照；

（3）其他：含港澳臺居民來往內地通行證、港澳臺居民居住證、外國人永久居留證、護照等

第二步：在申報列表勾選員工，點擊【閱讀并簽署《承諾函》】。

第三步：點擊頁面上方的【提交兌現】，即完成申報操作。

5.申報記錄查看

點擊【兌現記錄】，可查看申報記錄的進度及狀態。

6.申報成功

申報單狀態為“申報成功”，即表示該員工已通過審核。員工會收到通過審核的短信通知。

***，感謝您積極響應杭州市委市政府的倡議，將最好的時光留在杭州。請您于1月28日-2月6日期間，使用尾號“***”的證件號碼實名登錄“云閃付”APP領取新春留杭消費券（下載APP：app.95516.com；操作說明：https://article.95516.com/eq/ls/H9aryasG.html）?！坝H清在線”預祝您在杭州度過一個平安幸福年！

7.異議申請

申報單狀態未通過的，可點擊【查看詳情】查看不通過的原因。

不通過原因有兩種：

（1）未查到2021年12月度當前員工在杭社?；蚬U繳納記錄。

（2）當前員工不符合非浙戶籍。

若是因為員工信息填寫錯誤造成未通過，可以點擊【修改員工信息】更正員工姓名和手機號。

若對不通過原因有異議，可點擊【提交異議】上傳證明材料發起異議申請（異議處理不通過后不能再發起，還未處理的異議申報人可撤銷）。

8.處理記錄

異議經政府端審批后返回審批結果，可在處理記錄里查看詳細說明。

9.親清攻略

親清在線在頁面頂端的“親清攻略”可查閱操作手冊和常見問題。

?下載與登錄

通過應用市場或政務服務網（www.zjzwfw.gov.cn/zjzw/zj/zw_pc_download）下載浙里辦APP。個人實名登錄浙里辦后，在“杭州市本級”站點首頁腰線處可見“親清在線”入口或直接搜索“親清在線”。

本端提供：

①靈活就業參保人員申報；

②企業員工查看本人是否通過審核。

? 查看政策

進入置頂政策“春節期間留杭省外員工電子消費券發放”，查看閱讀政策內容，系統根據當前用戶自動顯示不同功能。靈活就業參保人員顯示【申報】按鈕，可進入申報；單位參保員工顯示【查看】按鈕，可查閱審批通過情況。

? 申報政策

如當前用戶符合靈活就業參保、非浙戶籍（2021年12月31日）、有效在杭居住證等條件，將顯示以下頁面，個人選中承諾事項后，提交申報即可完成申報。

如不符合以上條件，系統將根據情況返回以下三種提示：

? 異議申請

不符合2021年12月份靈活就業參保條件的需上傳個人參保證明、非浙戶籍證明、在杭居住證等掃描件或清晰照片。

提出異議經人工審批后將返回結果。

? 查看申報結果

如完成申報的，可查看申報記錄。單位申報和個人申報結果都在此處展示。

用人單位為員工申報的狀態

個人申報的狀態

? 申報關閉

1月24日21點后申報將關閉；1月25日12點后異議申請將關閉。

如申報中還遇到其他問題

咨詢服務看這里

NO.1 線上咨詢

本政策頁面右側設置D小二咨詢圖標。點擊開啟后，申報單位可通過即時對話方式在線與親清D小二進行互動交流，支持發送圖文信息、在線查看常見問題等服務。

本次電子消費券咨詢開通時間為1月18-25日，其中人工客服時間：1月18日-21日8:00-21:00，1月22日-23日為8:00-19:00，1月24日-25日為8:00-21:00。D小二響應時間在3分鐘以內。若D小二因過于忙碌無法及時回復消息，申報單位可以選擇留言，留言將生成工單由D小二處理。

NO.2 熱線咨詢

政策咨詢熱線：96345。提供政策申報方面問題咨詢。服務時間從2022年1月12日起至活動結束。
消費券客服熱線：銀聯7×24小時專屬客服熱線95516。服務時間從1月28日至2月底。提供消費券領取、使用、退款等相關問題的咨詢和處理。

常見問題

1.登錄賬號等級無法辦理

本政策需要具備二級以上實名認證賬號進行操作，對應經辦人認證等級2級以上，即1級、2級賬號可以直接申報本政策。如出現登錄賬號等級無法辦理的提示，可進入右上角【我的企業】【我的信息】-【經辦人授權】查看賬號等級。

1級經辦人指通過電子數字證書及電子營業執照登錄的企業賬號。2級經辦人指在浙江政務服務網完成高級實名認證的賬號。

如需要使用3級賬號申報，可通過1級或2級賬號給3級賬號單獨授權本政策申報權限。選中經辦人給您的賬號授權。

2.經辦人信息不完善

使用數字證書或電子營業執照登錄親清平臺，在事項辦理中，可能會出現經辦人信息不完善的提示：

可點擊“我的企業”“修改手機號”補全經辦人手機號信息。

3.批量導入失敗/添加失敗

通過【批量導入】導入Excel表格，員工信息出現缺失字段或人員重復等問題將會跳出以下提示。

4.港澳臺、外籍靈活就業參保人員

無法登錄浙里辦申報的

港澳臺、外籍在杭參加靈活就業社保的，如無法正常使用浙里辦，請往電子郵箱bgs@fzw.hz.gov.cn寄送本人簽名的留杭承諾函照片進行報名，審核情況將以郵箱回復。承諾函模板可點擊此鏈接下載：《港澳臺及外籍在杭靈活就業參保人員春節期間個人留杭承諾函》。

天我們繼續看看html的學習筆記。

文本標簽

標題標簽<hn>

將文本設置為標題顯示的標簽對。設定標題字體大小，n=1（大）~6（?。瑯祟}大小一共有6種，也就是從<h1>……</h1>到<h6>……</h6>

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<h1>我是菜鳥小白</h1>
<h2>你們的好朋友</h2>
<h3>  讓我們一起學習吧?。。?lt;/h3>
</body>
</html>

顯示效果如下：

字體修飾標簽

對文字的格式做相應的變化，如粗體、斜體、底線、上標、下標等。常用的字體修飾標簽有以下幾種。

<b>……</b>:指定文字為粗體字
<i>……</i>:指定文字為斜體字
<u>……</u>:指定文字為帶有下劃線
<tt>……</tt>:指定文字為打字機效果
<sup>……</sup>:指定文字為上標
<sub>……</sub>:指定文字為小標
<em>……</em>:對某段文字進行強調，通常用斜體字顯示出來
<strong>……</strong>:對文本進行強調，通常用粗體字顯示出來我們看下加粗前后對比，其它效果類似方式

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<b>我是菜鳥小白呀</b>
我是菜鳥小白呀
</body>
</html>

顯示效果如下：

字體標簽<font>

設置文檔的字體，改變其屬性，對文本進行不同的設置，包含字體、大小、顏色等

size
face
color

我們看看大小的對比區別

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
我是菜鳥小白
<font size="20px">我是菜鳥小白呀</font>
</body>
</html>

顯示效果如下：

超鏈接標簽

超鏈接的定義

在不同文檔、同一個文檔的不同段落之前相互跳轉。html鏈接包含兩部分：錨標和目標點。錨標就是鏈接的源點，當鼠標被移動到錨標處時會變成小手狀。此時，用戶通過點擊鼠標就可以到達鏈接的目標點。目標點可以是一張圖片、一個網絡文件、一個多媒體文件等。

屬性href（hypertext reference）

用于設定鏈接地址，其鏈接地址必須是URL地址，必須給出具體的路徑。其中URL地址可以為下面內容：

網站：可以設置ip地址或者是網站的網址。

<a href="http://www.baidu.com">百度地址</a>

點擊頁面的百度地址可直接跳轉到百度頁面

網頁：鏈接到本機的網頁。

<a href="cainiao-跳轉后頁面.html">跳轉</a>

跳轉前頁面

點擊跳轉后直接跳轉到新的本機頁面

可執行文件：當文件擴展名不是html、asp等時，會將鏈接到的文件下載到本地計算機或直接執行。如果是文本文件（如word格式），則在瀏覽器中打開文件并進行編輯。

<a href="index.txt">txt文件，打開進行編輯</a>
<a href="index.wav">播放聲音</a>

網頁上的書簽：通常使用在網頁的長度超過屏幕時，可以使用書簽直接跳轉到該書簽指向的具體內容，節省移動滾動條的時間。

屬性target

屬性值分別為_blank、_self、_parent、_top。
target=_blank：在新的瀏覽器窗口中打開連接的文檔，同時保持當前窗口不變
target=_self：將鏈接的文檔載入鏈接所在的同一框架或窗口，默認設置為_self
target=_parent：將鏈接的文檔載入該鏈接所在框架的父框架或父窗口。如果包含鏈接的框架不是嵌套框架，則所鏈接的文檔載入整個瀏覽器窗口。
target=_top：將鏈接的文檔載入整個瀏覽器窗口，從而刪除所有框架我們以“_blank”為例，可以按照如下方式編寫：

<!--在新的窗口中打開百度首頁-->
<a href="http://www.baidu.com" target=_blank>百度地址</a>

屬性title

瀏覽器會以浮動提示的方式顯示解釋信息

<a href="http://www.baidu.com" target=_blank title="百度歡迎你">百度地址</a>

實際效果展示：

屬性name

利用name屬性作為錨定位，可以實現文檔內部的定位。這個需要我們在兩個<a>標簽中，一個寫明name，作為一個錨點；另外一個寫明herf，用于指向錨點。如下面的示例，點擊“百度地址”會跳轉到“這是測試跳轉處”（當頁面超過一頁長度時，測試效果更明顯）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>

<body bgcolor="11ffff" text="000000">
<a name=ceshi>這是測試跳轉</a>
<a href="#ceshi" title="百度歡迎你">百度地址</a>
?
</body>
</html>

圖像標簽

圖片標簽<img 屬性=“屬性值”>

屬性src：來定義圖片的URL（統一資源定位符）地址，是圖片必不可少的屬性。用法形如：<img src="url">

<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

屬性height和width：規定圖片的大小。屬性值都是數字，表示圖像寬度和高度所占的像素點數。默認是瀏覽器窗口將自動調整圖像顯示尺寸

<img heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

屬性align：設置圖片對齊方式，垂直對齊（居上、居中和居下）和水平對齊（居左、居中和居右）。

<img align="right" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

屬性border：默認圖片是沒有邊框的，可以利用border屬性添加邊框。

<img border="20px" align="rows" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

表格標簽

表<table>

創建一個表格，有屬性width（寬度）、height（高度）、border（邊框）、bordercolor（邊框顏色）、cellspacing、cellpadding

行<tr>

創建表格中的每一行，有屬性align、valign、bgcolor

列<td>

創建表格的中每一列，有屬性

表頭<th>

設置表頭

我們現在建造一個表

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<body bgcolor="11ffff" text="000000">
?
<table border>
<th>測試表頭</th>
?
<tr>
<td>這是第一行第一列</td>
<td>這是第一行第二列</td>
<td>這是第一行第三列</td>
</tr>
<tr>
<td>這是第二行第一列</td>
<td>這是第二行第二列</td>
<td>這是第二行第三列</td>
</tr>
</table>

</body>
</html>

顯示如下：

框架標簽

框架<frame>

一個瀏覽器文檔窗口一般只能顯示一個網頁文件，但是使用框架標簽就可以將一個瀏覽器文檔窗口分割成多個子窗口，每個子窗口中都可以顯示一個獨立的網頁文件。

框架集<frameset>

多個框架組成了一個框架集（Frameset），定義了各個框架如何排列的。有屬性rows和cols，兩個屬性至少選擇一個，否則瀏覽器只顯示第一個定義的框架。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<frameset cols="25%,50%,25%">
<frame src="https://www.baidu.com"></frame>
<frame src="https://www.qq.com"></frame>
<frame src="https://www.sina.com"></frame>
</frameset>
?
</html>

最終我們將三個頁面在同一個web窗口展示出來了

表單標簽

表單標簽<form>

主要用于采集和提交用戶輸入的信息，使網頁具有交互功能。有屬性：

action（處理提交數據的頁面）
method（提交方式（get、post、request））
target（）

用戶輸入區域標簽<input type="">

這個標簽必須放在<form>……</form>標簽之間。有屬性type，具體參數值有：

text（單行文本輸入框）
textarea（多行輸入框）
password（密碼輸入框）
radio（單選框）
checkbox（復選框）
select（下拉框）
submit（提交）
reset（重置）
image（圖片提交）
file（上傳文件）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<body>
<p>用戶名<input type="text"></input></p>
<p>多行輸入框<textarea></textarea></p>
<p>密  碼<input type="password"></input></p>
<p>單選框<input type="radio"></input></p>
<p>復選框<input type="checkbox"></input></p>
<p>下拉框<input type="select"></input></p>
<p>提交<input type="submit"></input></p>
<p>重置<input type="reset"></input></p>
<p>圖片提交<input type="image"></input></p>
<p>文件提交<input type="file"></input></p>
?
</body>
</html>

實現效果：

好了，今天的內容就分享完了，如有什么意見和建議可以私信菜鳥小白哦，我們下期再會~

在線咨詢

上一篇：這 12 個實用的 HTML標簽（組件）建議盡早用上
下一篇：springboot2整合vue開發在線音樂網站「源碼開源」

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

使用JavaScript寫爬蟲

文本標簽

標題標簽<hn>

字體修飾標簽

字體標簽<font>

超鏈接標簽

超鏈接的定義

屬性href（hypertext reference）

屬性target

屬性title

屬性name

圖像標簽

圖片標簽<img 屬性=“屬性值”>

表格標簽

表<table>

行<tr>

列<td>

表頭<th>

框架標簽

框架<frame>

框架集<frameset>

表單標簽

表單標簽<form>

用戶輸入區域標簽<input type="">

您的項目需求