教你们使用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页面展现有多元化，每一个人按本身的喜爱去展现。

页面展现

最后在放一下网站连接 www.xyji.top:5678/views/

欢迎你们关注个人公众号：Web前端Talk