基於mongodb+express+vue+axios+bootstrap的掘金最熱文章收藏評論分析

2017.11.21更新：本篇文章的代碼詳解今天剛整理完畢，發佈在掘金的另一篇文章，有興趣的能夠移步：

juejin.im/post/5a13d6…

靈感來源

最近瀏覽技術文章的時候，偶然看到一篇關於分析簡書熱薦文章中代碼塊數量的文章，連接我翻了一遍了歷史記錄也沒有發現，可能被「吃了」把，好吧無論他的文章在哪了。看了那邊文章後，我對掘金的首頁開始了非分之想（嘿嘿嘿嘿~~,掘金君不要怪我奧！！）

靈感初現

看了掘金的最熱文章後，我開始了一次「天馬星空」的猜測，爲何這個文章會成爲最熱的呢，是由於瀏覽量比較多，評論數比較多，仍是收藏量比較多致使的呢，我開始有了初步的想法。光想仍是不行，我仍是要開始動手作了，我喝了一杯水，在瀏覽器上輕輕的打開了掘金的首頁，而後熟練的打開了調試器，開始對掘金君進行無情的分析，好吧，初步分析之後，發現評論數，瀏覽數，收藏數就在API接口中（我露出一絲壞笑~~），這樣就能夠省的我去爬頁面的數據了；第一個想法浮如今腦海中，直接調用接口進行前100最熱篇文章的分析，利用echarts的折線圖繪製曲線進行分析；（嗯，很好，很快就能完成~~）然而愛折騰的我沒有認同這種作法，這樣沒有挑戰性，也學不到多少東西，怎麼辦，改變套路（額，就是套路，對沒錯，套路一番）；

一個讓本身能夠從新梳理先後端以及數據庫知識的想法悠然而生，一直在作一些爬蟲的小程序（這裏只只是想簡單用一下而已，請勿噴~~），爲什麼不在此利用一番，好吧說幹就幹，反正有了接口能夠直接用，就不用解析dom了；

技術選型

自從有了nodejs，如今前端是什麼都敢幹了，我想說：js要一統天下（會不會被打，哈哈）；梳理一下思路：

一、使用superagent獲取掘金接口數據

二、獲取的數據利用mongoose存儲在mongodb中（Schema從新設計，過濾不須要的數據）

三、使用express搭建後端服務提供接口給前端調用，數據從mongodb中獲取

四、前端使用vue + axios + bootstrap + echarts + jquery （我只是想多個庫同時使用解決不一樣問題，喜歡純用vue的同仁，能夠把九十米長刀放下，別誤傷 (ಥ _ ಥ) ）進行構建

實現功能

一、前端能夠顯示掘金歷史最熱前100篇文章的評論，瀏覽及評論數據分析圖

二、而且能夠按照類別進行查看

三、對於數據庫中不存在的數據要進行提示

四、提示後跳轉到可採集頁面

六、點擊指定欄目可進行採集數據，並返回採集結果

七、額外功能：文章瀑布流顯示，並可跳轉原文章頁面

目前此項目還在完善，項目地址在：傳送門

有興趣的能夠來個star，沒興趣的（好吧，我也沒有辦法讓你有興趣 o(╯□╰)o ）

近期我會把項目的整個搭建過程及代碼解釋整理出來，方便有興趣的童鞋學習，若是大佬感受so easy ，那我也沒辦法了。。。

最後歡迎你們來個人博客作客，相互學習交流

www.xkboke.com/

結論

來個比較雞肋的結論吧：當評論超過30，瀏覽量1萬以上，收藏數在800左右的更易上歷史最熱榜；然而這個結論目前還未證明🤣，也只是個人一個猜測而已，不過評論數越多卻是上最熱榜的可能性越大；

另外根據九大類別歷史最熱前100名的對比，發現：

一、android的瀏覽量廣泛在1萬左右徘徊；

二、前端和閱讀在1.5萬瀏覽量徘徊，屬於九大類之中最活躍的欄目；

三、IOS，產品，設計，工具資源瀏覽量均在4000左右徘徊；

四、後端欄目廣泛在6000到8000之間

五、人工智能欄目則瀏覽量相對較少，廣泛不高於1500；

來個總覽圖

android

產品

工具

後端

IOS

前端

人工智能

設計

閱讀