"最近沉迷於擼貓不可自拔"css
網絡爬蟲(又被稱爲網頁蜘蛛,網絡機器人,在FOAF社區中間,更常常的稱爲網頁追逐者),是一種按照必定的規則,自動地抓取萬維網信息的程序或者腳本。另一些不常使用的名字還有螞蟻、自動索引、模擬程序或者蠕蟲。html
這是github項目地址:前端
這是網站:mysql
以掘金和csdn技術文章做爲爬取目標,最終實現至本地網頁展現jquery
Nodejs做爲核心後端爬取媒介 Mysql做爲數據存儲 Webpack+react+ant Design做爲前端頁面數據展現webpack
superagent基於nodejs服務端請求的模塊,是輕量級更爲優化的ajax API,對比大量糟糕的現存的API,SuperAgent是靈活的、易讀的、而且很是易學,同時SuperAgent可用於Node.js!git
1)建立爬蟲項目文件夾,例如:pachonggithub
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頁面展現有多元化,每一個人按本身的喜愛去展現。
歡迎你們關注個人公衆號:Web前端Talk