Vue.JS开源：github-ranking - GitHub不同语言热门项目排行

   <h2>预览地址</h2>    <p>在线效果预览地址： <a href="/misc/goto?guid=4959747025401299505" rel="nofollow,noindex">https://microzz.com/github-ranking/</a></p>    <h2>技术栈</h2>    <ul>     <li><strong>Vue2.0</strong> ：前端页面展示。</li>     <li><strong>axios</strong> ：一个基于 Promise 的 HTTP 库，向后端发起请求。</li>     <li><strong>Express</strong> 、 <strong>Koa2</strong> ：因为vue-cli生成的项目是基于 <strong>express</strong> 的，所以在开发阶段我使用的是它，但是真正上线生产环境我换成了 <strong>Koa2</strong> 。</li>     <li><strong>request</strong> 、 <strong>request-promise</strong> ：没有用Node.js原生的 http/https 模块是因为不喜欢回调函数式的异步，可读性和可维护性很差。所以选择了 <strong>request</strong> + <strong>request-promise</strong> ，让异步更为优雅一点。</li>     <li><strong>cheerio</strong> ：服务器特别定制的，快速、灵活、实施的jQuery核心实现，抓取页面内容很方便。</li>     <li><strong>SASS</strong> ( <strong>SCSS</strong> )：用SCSS做CSS预处理语言，有些地方很方便，个人很喜欢用。(详看:point_right:SASS用法指南)</li>     <li><strong>ES6</strong> 、 <strong>ES7</strong> ：采用ES6语法，这是以后的趋势。自己上线的生产环境后端增加了 Async/await ，使异步更加优雅。</li>     <li>Webpack：vue-cli自带Webpack，但是需要自己改造一下，比如要对 build/dev-server.js 扩展express，增加后端请求路由(上线版本用的是Koa2)。此外需要安装sass相关loader，vue-cli已经配置好了webpack，你只需要安装依赖就可以，使用的时候只需要 <style lang="scss"></style> 。</li>     <li><strong>flex</strong> ：flex弹性布局。</li>     <li><strong>CSS3</strong> ：CSS3过渡动画及样式。</li>    </ul>    <h2>遇到的问题</h2>    <ol>     <li>异步操作很容易出问题，异步处理一定要小心！要熟练掌握 Promise 、 Async/await 、 Generator 等方法。(详看:point_right:异步操作和Async函数、 Promise对象 、 Generator 函数 )</li>     <li>因为访问每次爬取GitHub速度慢，性能差，所以建议使用缓存，把爬取到的数据保存为json文件或者其他缓存方式，我在上线的正式版是保存为json文件。那么这个时候就要有一个定时爬取的工具了，这里推荐 node-schedule 模块，很方便就能实现定时任务，查看官方文档就能简单上手了。上线版本我是每隔几个小时就爬取一次，然后保存数据，这样减轻了服务器压力，前端访问速度也大大加快。</li>     <li>GitHub貌似最多只能有10个并发，我尝试9个是正常的，10个就会报错，刚好我一次性爬取的语言数目超过数目，一看报错信息是 <strong>429</strong> 状态码。查信息发现：</li>    </ol>    <p>429 Too Many Requests (太多请求)</p>    <p>当你需要限制客户端请求某个服务的数量，也就是限制请求速度时，该状态码就会非常有用。在此之前，有一些类似的状态码。例如“509 Bandwidth Limit Exceeded”。</p>    <p>所以一定好处理好这些异步请求，不然就爬取不到信息缓存了。</p>    <h2>Build Setup</h2>    <pre>  <code class="language-javascript"># 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>    <p> </p>    <p>项目主页：<a href="http://www.open-open.com/lib/view/home/1491891586794">http://www.open-open.com/lib/view/home/1491891586794</a></p>    <p> </p>