Vue.js+Node.js爬虫开发一个Github排行榜

前言

以前使用Node.js开发一个小爬虫，算是初步对爬虫有了必定的了解，但爬取的数据没什么意义。最近使用Github的频率比较高，因此准备爬取一些Github的数据玩下。目前爬取了中国区followers排名前100的大神，以及各个编程语言stars大于1000的开源项目。

源码

Talk is cheap. Show me the code.

访问地址

• 访问地址：http://www.qdnote.com/vue-github-rank/（pc端开启手机模式浏览效果更佳）
• 扫描二维码

如何使用

git clone https://github.com/XNAL/vue-github-rank

// 须要先安装mysql，并建立数据库，可参考源码中的`github_rank.sql`

cd vue-github-rank
npm init

// 启动node服务
gulp nodemon 

// 本地运行需另开一个终端框口并执行如下命令，而后访问`http://localhost:8080/`
npm run dev

技术栈

• vue.js： 前端页面展现。
• axios: vue官方推荐HTTP库，请求后端数据。
• 阿里巴巴的矢量图标库Iconfont: 页面图标，我的项目中使用起来比较方便。
• node.js + Koa2： 后台服务器搭架，（Koa2须要node v7.6以上）。
• ES6/ES7： 后台开发以ES6语法为主，并使用了ES7中的async/await。
• gulp： 后台服务器使用，自动化构建工具。
• webpack： vue-cli自带的。须要配置本地代理proxyTable，以及配置SCSS的相关loader。
• MySql: 数据保存。
• superagent: 比node.js原生http模块更好用的客户端请求代理模块。
• cheerio：服务端jQuery，分析网页内容。
• node-schedule: node.js定时执行模块。

说明

1. 关于爬虫爬取数据的说明：目前是每2个小时去Github官网爬取数据，取到的数据会存入数据库中。在爬取的过程当中可能会出现单个页面一直没法取到数据的状况，为避免程序一直卡在此步骤，目前是单个页面数据循环请求50次，若是仍取不到数据则跳过此项数据的爬取，等待下一次再进行爬取。
2. 数据库字符集须要设置为utf8mb4，由于须要存取emoji表情。

项目截图

关于（首页）

中国区前100大神

目录

项目