Vue做一个GitHub项目排行榜

GitHub不同语言热门项目排行,Vue做页面展示。

源代码

源代码地址:🔗 GitHub
欢迎大家 star和fork😄

预览地址

在线效果预览地址:https://microzz.com/github-ranking/

技术栈

  • Vue2.0:前端页面展示。
  • axios:一个基于 Promise 的 HTTP 库,向后端发起请求。
  • ExpressKoa2:因为vue-cli生成的项目是基于express的,所以在开发阶段我使用的是它,但是真正上线生产环境我换成了Koa2
  • requestrequest-promise:没有用Node.js原生的http/https模块是因为不喜欢回调函数式的异步,可读性和可维护性很差。所以选择了request+request-promise,让异步更为优雅一点。
  • cheerio:服务器特别定制的,快速、灵活、实施的jQuery核心实现,抓取页面内容很方便。
  • SASS(SCSS):用SCSS做CSS预处理语言,有些地方很方便,个人很喜欢用。(详看👉SASS用法指南)
  • ES6ES7:采用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. 异步操作很容易出问题,异步处理一定要小心!要熟练掌握PromiseAsync/awaitGenerator等方法。(详看👉异步操作和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-IT技术分享

GitHub:🔗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