教大家使用Nodejs+Mysql+React写一个掘金和csdn优质文章的爬虫网站

网络爬虫（又被称为网页蜘蛛，网络机器人，在FOAF社区中间，更经常的称为网页追逐者），是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、模拟程序或者蠕虫。

这是github项目地址：

github.com/wangji817/n…

这是网站：

www.xyji.top:5678/views/

爬虫目标

以掘金和csdn技术文章作为爬取目标，最终实现至本地网页展示

爬虫技术

Nodejs作为核心后端爬取媒介 Mysql 作为数据存储 Webpack+react+ant Design作为前端页面数据展示

爬虫框架

superagent基于nodejs服务端请求的模块，是轻量级更为优化的ajax API，对比大量糟糕的现存的API，SuperAgent是灵活的、易读的、并且非常易学，同时SuperAgent可用于Node.js！

爬虫实现

1）创建爬虫项目文件夹，例如：pachong

2）初始化项目，npm init,一切默认回车；

3）安装模块：

npm install --save-dev antd,babel-core,babel-loader,babel-plugin-import,babel-plugin-transform-runtime,babel-preset-es2015,babel-preset-react,cheerio,compression,compression-webpack-plugin,css-loader,extract-text-webpack-plugin,fs,gzip-loader,html-loader,jquery,less,less-loader,moment,mysql,node-sass,react,react-dom,react-router,react-router-dom,sass-loader,style-loader,superagent,webpack,webpack-dev-server
复制代码

可能有部分模块没用，但不影响项目使用。

4）完整项目文件如图：

asset：公共资源文件夹

component：组件文件夹

dist：打包文件夹

images：本地图片

src：入口文件夹

views：静态页面文件夹

.babelrc，nightIndex.js：nodejs启动文件

mysql.json：mysql数据库配置文件

requestUrl.json：请求源配置文件

webpack.config.js

5）先配置webpack.config.js

核心配置： entry-获取入口文件夹列表 output-打包文件到dist目录 devServer-服务器配置 module-模块预处理 plugins-插件列表 具体可以查阅webpack官网api教程；

6）devServer配置项中proxy为反向代理，可以解决跨域问题，这里请求的本地服务。

7）优先创建好mysql，创建数据库jjchapter，2个表，chapterlist和csdnlist表

8）配置nightIndex.js文件，主要引入express，superagent模块，用于服务端启动和请求，引用请求源文件requestUrl.json，mysql.json数据库文件

9）如图：requestUrl.json为：

mysql.json为：

10）用nodejs作为服务端，请求时需要设置跨域请求的中间件：

11）引入mysql模块，创建mysql数据库缓存池，提高数据库读取性能

12）编写查询，增加数据库操作

pool.getConnection((err,conn)=>{...})为创建数据库池链接，返回err，conn对象，conn为当前数据库连接对象，后续需要此对象归还连接资源，减少资源占用；

13）编写掘金和csdn爬取方法：

此处用到了superagent模块的.post请求，_request.post(url).send(请求头).set(“设置请求头”,””).then(res=>{成功回调函数}).catch(err=>{失败回调函数});由于掘金需要设置请求头，.set("x-Agent","Juejin/Web").set("Accept","application/json")以及RequestUrl.juejinReq.requestHead；csdn比较简单，只需要请求一个地址即可。返回的数据由res.body下获取；

14）由于数据需要不停的去爬取保存到数据库，定义个间隔10分钟请求一次掘金跟csdn的函数，用于自动爬取手段

15）Node服务已经准备完毕。接下来就是将爬取到本地数据如何渲染到html上。

16）前面webpack提到src是入口文件夹，那么app是整个页面的入口文件，配置如下

17）component/app/app.js主要组件渲染

其中引用了ant design的部分组件api，react，react-router-dom模块，该组件主要是将头尾公共部分抽离进行展示，中间内容展示区域将有BrowserRouter，Route，Link组件路由到指定内容组件，提高组件渲染；

18）Home组件，掘金内容展示组件，采用ant的Layout布局，List列表组件自上而下滚动加载。

19）Csdn组件，同理，多出icon元素的展示。

20）首屏数据请求函数

由于掘金跟csdn返回的数据结构不一致，在data传递的type类型做了区分

21）下拉加载绑定$(window).on(‘scroll’,func)滚动事件到底部监听；当数据请求完时，取消绑定滚动事件。

22）Html页面展示有多元化，每个人按自己的喜好去展示。