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

Leo_chen發表於2017-11-20

2017.11.21更新:本篇文章的程式碼詳解今天剛整理完畢,釋出在掘金的另外一篇文章,有興趣的可以移步:

juejin.im/post/5a13d6…

靈感來源

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

靈感初現

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

看了掘金的最熱文章後,我開始了一次“天馬星空”的猜想,為什麼這個文章會成為最熱的呢,是因為瀏覽量比較多,評論數比較多,還是收藏量比較多導致的呢,我開始有了初步的想法。光想還是不行,我還是要開始動手做了,我喝了一杯水,在瀏覽器上輕輕的開啟了掘金的首頁,然後熟練的開啟了偵錯程式,開始對掘金君進行無情的分析,好吧,初步分析以後,發現評論數,瀏覽數,收藏數就在API介面中(我露出一絲壞笑~~),這樣就可以省的我去爬頁面的資料了;第一個想法浮現在腦海中,直接呼叫介面進行前100最熱篇文章的分析,利用echarts的折線圖繪製曲線進行分析;(嗯,很好,很快就能完成~~)然而愛折騰的我沒有認同這種做法,這樣沒有挑戰性,也學不到多少東西,怎麼辦,改變套路(額,就是套路,對沒錯,套路一番);

一個讓自己可以重新梳理前後端以及資料庫知識的想法悠然而生,一直在做一些爬蟲的小程式(這裡只只是想簡單用一下而已,請勿噴~~),為何不在此利用一番,好吧說幹就幹,反正有了介面可以直接用,就不用解析dom了;

技術選型

自從有了nodejs,現在前端是什麼都敢幹了,我想說:js要一統天下(會不會被打,哈哈);梳理一下思路:

1、使用superagent獲取掘金介面資料

2、獲取的資料利用mongoose儲存在mongodb中(Schema重新設計,過濾不需要的資料)

3、使用express搭建後端服務提供介面給前端呼叫,資料從mongodb中獲取

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

實現功能

1、前端可以顯示掘金歷史最熱前100篇文章的評論,瀏覽及評論資料分析圖

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

2、並且可以按照類別進行檢視

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

3、對於資料庫中不存在的資料要進行提示

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

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

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

6、點選指定欄目可進行採集資料,並返回採集結果

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

7、額外功能:文章瀑布流顯示,並可跳轉原文章頁面

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

目前此專案還在完善,專案地址在:傳送門

有興趣的可以來個star,沒興趣的(好吧,我也沒有辦法讓你有興趣 o(╯□╰)o )

近期我會把專案的整個搭建過程及程式碼解釋整理出來,方便有興趣的童鞋學習,如果大佬感覺so easy ,那我也沒辦法了。。。

最後歡迎大家來我的部落格做客,相互學習交流

www.xkboke.com/


結論

來個比較雞肋的結論吧:當評論超過30,瀏覽量1萬以上,收藏數在800左右的更易上歷史最熱榜;然而這個結論目前還未證實?,也只是我的一個猜想而已,不過評論數越多倒是上最熱榜的可能性越大;

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

1、android的瀏覽量普遍在1萬左右徘徊;

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

3、IOS,產品,設計,工具資源瀏覽量均在4000左右徘徊;

4、後端欄目普遍在6000到8000之間

5、人工智慧欄目則瀏覽量相對較少,普遍不高於1500;

來個總覽圖

android


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

產品

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

工具

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

後端

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

IOS

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

前端

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

人工智慧

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

設計

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

閱讀

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


相關文章