Vue.js+Node.js爬蟲開發一個Github排行榜

前言

以前使用Node.js開發一個小爬蟲，算是初步對爬蟲有了必定的瞭解，但爬取的數據沒什麼意義。最近使用Github的頻率比較高，因此準備爬取一些Github的數據玩下。目前爬取了中國區followers排名前100的大神，以及各個編程語言stars大於1000的開源項目。

源碼

Talk is cheap. Show me the code.

訪問地址

• 訪問地址：http://www.qdnote.com/vue-github-rank/（pc端開啓手機模式瀏覽效果更佳）
• 掃描二維碼

如何使用

git clone https://github.com/XNAL/vue-github-rank

// 須要先安裝mysql，並建立數據庫，可參考源碼中的`github_rank.sql`

cd vue-github-rank
npm init

// 啓動node服務
gulp nodemon 

// 本地運行需另開一個終端框口並執行如下命令，而後訪問`http://localhost:8080/`
npm run dev

技術棧

• vue.js： 前端頁面展現。
• axios: vue官方推薦HTTP庫，請求後端數據。
• 阿里巴巴的矢量圖標庫Iconfont: 頁面圖標，我的項目中使用起來比較方便。
• node.js + Koa2： 後臺服務器搭架，（Koa2須要node v7.6以上）。
• ES6/ES7： 後臺開發以ES6語法爲主，並使用了ES7中的async/await。
• gulp： 後臺服務器使用，自動化構建工具。
• webpack： vue-cli自帶的。須要配置本地代理proxyTable，以及配置SCSS的相關loader。
• MySql: 數據保存。
• superagent: 比node.js原生http模塊更好用的客戶端請求代理模塊。
• cheerio：服務端jQuery，分析網頁內容。
• node-schedule: node.js定時執行模塊。

說明

1. 關於爬蟲爬取數據的說明：目前是每2個小時去Github官網爬取數據，取到的數據會存入數據庫中。在爬取的過程當中可能會出現單個頁面一直沒法取到數據的狀況，爲避免程序一直卡在此步驟，目前是單個頁面數據循環請求50次，若是仍取不到數據則跳過此項數據的爬取，等待下一次再進行爬取。
2. 數據庫字符集須要設置爲utf8mb4，由於須要存取emoji表情。

項目截圖

關於（首頁）

中國區前100大神

目錄

項目