Vue 作一個 GitHub 項目排行榜

Vue作一個GitHub項目排行榜

GitHub不一樣語言熱門項目排行，Vue作頁面展現。

源代碼

源代碼地址：🔗 GitHub
歡迎你們 star和fork😄

預覽地址

在線效果預覽地址：microzz.com/github-rank…

技術棧

• 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預處理語言，有些地方很方便，我的很喜歡用。(詳看👉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等方法。(詳看👉異步操做和Async函數、Promise對象、Generator 函數)
2. 由於訪問每次爬取GitHub速度慢，性能差，因此建議使用緩存，把爬取到的數據保存爲json文件或者其餘緩存方式，我在上線的正式版是保存爲json文件。那麼這個時候就要有一個定時爬取的工具了，這裏推薦node-schedule模塊，很方便就能實現定時任務，查看官方文檔就能簡單上手了。上線版本我是每隔幾個小時就爬取一次，而後保存數據，這樣減輕了服務器壓力，前端訪問速度也大大加快。
3. GitHub貌似最多隻能有10個併發，我嘗試9個是正常的，10個就會報錯，恰好我一次性爬取的語言數目超過數目，一看報錯信息是429狀態碼。查信息發現：

    429 Too Many Requests (太多請求)
當你須要限制客戶端請求某個服務的數量，也就是限制請求速度時，該狀態碼就會很是有用。在此以前，有一些相似的狀態碼。例如「509 Bandwidth Limit Exceeded」。

因此必定好處理好這些異步請求，否則就爬取不到信息緩存了。

About

源代碼地址：👉 GitHub

我的網站：🔗 microzz.com/

GitHub：🔗github.com/microzz

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複製代碼