預覽地址

在線效果預覽地址： https://microzz.com/github-ranking/

技術棧

• Vue2.0 ：前端頁面展示。
• axios ：一個基于 Promise 的 HTTP 庫，向后端發起請求。
• Express 、 Koa2 ：因為vue-cli生成的項目是基于 express 的，所以在開發階段我使用的是它，但是真正上線生產環境我換成了 Koa2 。
• request 、 request-promise ：沒有用Node.js原生的 http/https 模塊是因為不喜歡回調函數式的異步，可讀性和可維護性很差。所以選擇了 request + request-promise ，讓異步更為優雅一點。
• cheerio ：服務器特別定制的，快速、靈活、實施的jQuery核心實現，抓取頁面內容很方便。
• SASS ( SCSS )：用SCSS做CSS預處理語言，有些地方很方便，個人很喜歡用。(詳看:point_right:SASS用法指南)
• ES6 、 ES7 ：采用ES6語法，這是以后的趨勢。自己上線的生產環境后端增加了 Async/await ，使異步更加優雅。
• Webpack：vue-cli自帶Webpack，但是需要自己改造一下，比如要對 build/dev-server.js 擴展express，增加后端請求路由(上線版本用的是Koa2)。此外需要安裝sass相關loader，vue-cli已經配置好了webpack，你只需要安裝依賴就可以，使用的時候只需要 <style lang="scss"></style> 。
• flex ：flex彈性布局。
• CSS3 ：CSS3過渡動畫及樣式。

遇到的問題

1. 異步操作很容易出問題，異步處理一定要小心！要熟練掌握 Promise 、 Async/await 、 Generator 等方法。(詳看:point_right:異步操作和Async函數、 Promise對象 、 Generator 函數 )
2. 因為訪問每次爬取GitHub速度慢，性能差，所以建議使用緩存，把爬取到的數據保存為json文件或者其他緩存方式，我在上線的正式版是保存為json文件。那么這個時候就要有一個定時爬取的工具了，這里推薦 node-schedule 模塊，很方便就能實現定時任務，查看官方文檔就能簡單上手了。上線版本我是每隔幾個小時就爬取一次，然后保存數據，這樣減輕了服務器壓力，前端訪問速度也大大加快。
3. GitHub貌似最多只能有10個并發，我嘗試9個是正常的，10個就會報錯，剛好我一次性爬取的語言數目超過數目，一看報錯信息是 429 狀態碼。查信息發現：

429 Too Many Requests (太多請求)

當你需要限制客戶端請求某個服務的數量，也就是限制請求速度時，該狀態碼就會非常有用。在此之前，有一些類似的狀態碼。例如“509 Bandwidth Limit Exceeded”。

所以一定好處理好這些異步請求，不然就爬取不到信息緩存了。

Build Setup

# install dependencies
npm install

serve with hot reload at localhost:8080
npm run dev
build for production with minification
npm run build
build for production and view the bundle analyzer report
npm run build --report
</code></pre> 
  
 
 
  
項目主頁：http://www.baiduhome.net/lib/view/home/1491891586794