{"id":14989382,"url":"https://github.com/microzz/github-ranking","last_synced_at":"2025-04-12T00:31:27.372Z","repository":{"id":202365252,"uuid":"87675224","full_name":"microzz/github-ranking","owner":"microzz","description":"🔍GitHub不同语言热门项目排行，Vue.js做页面展示","archived":false,"fork":false,"pushed_at":"2017-04-10T16:33:04.000Z","size":198,"stargazers_count":160,"open_issues_count":1,"forks_count":30,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-25T20:51:12.471Z","etag":null,"topics":["axios","css3","express","html5","koa","koa2","request","vue","vue-cli","vue2","vuejs","vuejs2","webpack"],"latest_commit_sha":null,"homepage":"https://microzz.com/github-ranking/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microzz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-04-09T01:40:49.000Z","updated_at":"2024-08-12T07:56:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"ba8af0a2-7f81-4dbd-8c81-d5c854d7ae05","html_url":"https://github.com/microzz/github-ranking","commit_stats":null,"previous_names":["microzz/github-ranking"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fgithub-ranking","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fgithub-ranking/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fgithub-ranking/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fgithub-ranking/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microzz","download_url":"https://codeload.github.com/microzz/github-ranking/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248501233,"owners_count":21114635,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","css3","express","html5","koa","koa2","request","vue","vue-cli","vue2","vuejs","vuejs2","webpack"],"created_at":"2024-09-24T14:18:16.678Z","updated_at":"2025-04-12T00:31:26.816Z","avatar_url":"https://github.com/microzz.png","language":"JavaScript","readme":"# Vue GitHub排行榜\nGitHub不同语言热门项目排行，Vue做页面展示。\n\n## 源代码\n源代码地址：🔗 [GitHub](https://github.com/microzz/github-ranking) \n欢迎大家 star和fork😄\n## 预览地址\n在线效果预览地址：https://microzz.com/github-ranking/\n\n## 技术栈\n* **Vue2.0**：前端页面展示。\n* **axios**：一个基于 `Promise` 的 HTTP 库，向后端发起请求。\n* **Express**、**Koa2**：因为vue-cli生成的项目是基于**express**的，所以在开发阶段我使用的是它，但是真正上线生产环境我换成了**Koa2**。\n* **request**、**request-promise**：没有用Node.js原生的`http/https`模块是因为不喜欢回调函数式的异步，可读性和可维护性很差。所以选择了**request**+**request-promise**，让异步更为优雅一点。\n* **cheerio**：服务器特别定制的，快速、灵活、实施的jQuery核心实现，抓取页面内容很方便。\n* **SASS**(**SCSS**)：用SCSS做CSS预处理语言，有些地方很方便，个人很喜欢用。(详看👉[SASS用法指南](https://microzz.com/2017/03/18/sass/))\n* **ES6**、**ES7**：采用ES6语法，这是以后的趋势。自己上线的生产环境后端增加了`Async/await`，使异步更加优雅。\n* Webpack：vue-cli自带Webpack，但是需要自己改造一下，比如要对 `build/dev-server.js`扩展express，增加后端请求路由(上线版本用的是Koa2)。此外需要安装sass相关loader，vue-cli已经配置好了webpack，你只需要安装依赖就可以，使用的时候只需要`\u003cstyle lang=\"scss\"\u003e\u003c/style\u003e`。\n* **flex**：flex弹性布局。\n* **CSS3**：CSS3过渡动画及样式。\n\n## 遇到的问题\n1. 异步操作很容易出问题，异步处理一定要小心！要熟练掌握`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/))\n2. 因为访问每次爬取GitHub速度慢，性能差，所以建议使用缓存，把爬取到的数据保存为json文件或者其他缓存方式，我在上线的正式版是保存为json文件。那么这个时候就要有一个定时爬取的工具了，这里推荐[node-schedule](https://github.com/node-schedule/node-schedule)模块，很方便就能实现定时任务，查看官方文档就能简单上手了。上线版本我是每隔几个小时就爬取一次，然后保存数据，这样减轻了服务器压力，前端访问速度也大大加快。\n3. GitHub貌似最多只能有10个并发，我尝试9个是正常的，10个就会报错，刚好我一次性爬取的语言数目超过数目，一看报错信息是**429**状态码。查信息发现：\n\n\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;429 Too Many Requests (太多请求)\n\u003e 当你需要限制客户端请求某个服务的数量，也就是限制请求速度时，该状态码就会非常有用。在此之前，有一些类似的状态码。例如“509 Bandwidth Limit Exceeded”。\n\n所以一定好处理好这些异步请求，不然就爬取不到信息缓存了。\n\n## About\r源代码地址：👉 [GitHub](https://github.com/microzz/github-ranking) \n\r个人网站：🔗[microzz-IT技术分享](https://microzz.com/) \n\rGitHub：🔗[microzz](https://github.com/microzz)\r\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrozz%2Fgithub-ranking","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrozz%2Fgithub-ranking","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrozz%2Fgithub-ranking/lists"}