Vue 做一個 GitHub 專案排行榜

microzz發表於2017-04-10
VueGithub

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複製程式碼

相關文章