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复制代码