Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/microzz/github-ranking
🔍GitHub不同语言热门项目排行,Vue.js做页面展示
https://github.com/microzz/github-ranking
axios css3 express html5 koa koa2 request vue vue-cli vue2 vuejs vuejs2 webpack
Last synced: about 2 months ago
JSON representation
🔍GitHub不同语言热门项目排行,Vue.js做页面展示
- Host: GitHub
- URL: https://github.com/microzz/github-ranking
- Owner: microzz
- Created: 2017-04-09T01:40:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-04-10T16:33:04.000Z (over 7 years ago)
- Last Synced: 2024-10-31T08:42:18.554Z (about 2 months ago)
- Topics: axios, css3, express, html5, koa, koa2, request, vue, vue-cli, vue2, vuejs, vuejs2, webpack
- Language: JavaScript
- Homepage: https://microzz.com/github-ranking/
- Size: 193 KB
- Stars: 160
- Watchers: 11
- Forks: 30
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue GitHub排行榜
GitHub不同语言热门项目排行,Vue做页面展示。## 源代码
源代码地址:🔗 [GitHub](https://github.com/microzz/github-ranking)
欢迎大家 star和fork😄
## 预览地址
在线效果预览地址:https://microzz.com/github-ranking/## 技术栈
* **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用法指南](https://microzz.com/2017/03/18/sass/))
* **ES6**、**ES7**:采用ES6语法,这是以后的趋势。自己上线的生产环境后端增加了`Async/await`,使异步更加优雅。
* Webpack:vue-cli自带Webpack,但是需要自己改造一下,比如要对 `build/dev-server.js`扩展express,增加后端请求路由(上线版本用的是Koa2)。此外需要安装sass相关loader,vue-cli已经配置好了webpack,你只需要安装依赖就可以,使用的时候只需要``。
* **flex**:flex弹性布局。
* **CSS3**:CSS3过渡动画及样式。## 遇到的问题
1. 异步操作很容易出问题,异步处理一定要小心!要熟练掌握`Promise`、`Async/await`、`Generator`等方法。(详看👉[异步操作和Async函数](https://microzz.com/2017/01/15/async/)、[Promise对象](https://microzz.com/2017/01/14/promise/)、[Generator 函数](https://microzz.com/2017/01/13/generator/))
2. 因为访问每次爬取GitHub速度慢,性能差,所以建议使用缓存,把爬取到的数据保存为json文件或者其他缓存方式,我在上线的正式版是保存为json文件。那么这个时候就要有一个定时爬取的工具了,这里推荐[node-schedule](https://github.com/node-schedule/node-schedule)模块,很方便就能实现定时任务,查看官方文档就能简单上手了。上线版本我是每隔几个小时就爬取一次,然后保存数据,这样减轻了服务器压力,前端访问速度也大大加快。
3. GitHub貌似最多只能有10个并发,我尝试9个是正常的,10个就会报错,刚好我一次性爬取的语言数目超过数目,一看报错信息是**429**状态码。查信息发现:> 429 Too Many Requests (太多请求)
> 当你需要限制客户端请求某个服务的数量,也就是限制请求速度时,该状态码就会非常有用。在此之前,有一些类似的状态码。例如“509 Bandwidth Limit Exceeded”。所以一定好处理好这些异步请求,不然就爬取不到信息缓存了。
## About
源代码地址:👉 [GitHub](https://github.com/microzz/github-ranking)个人网站:🔗[microzz-IT技术分享](https://microzz.com/)
GitHub:🔗[microzz](https://github.com/microzz)
## Build Setup
``` bash
# 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
```