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

gu623901 4年前
   <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>