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

TDon

前言

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

源码

Talk is cheap. Show me the code.

访问地址

图片描述

如何使用

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大神

图片描述

目录

图片描述

项目

图片描述

阅读 8k

DON的前端分享
前端开发,也了解一些后端的开发。分享个人项目和开发经验。
906 声望
42 粉丝
0 条评论
906 声望
42 粉丝
文章目录
宣传栏