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

2017.11.21更新:本篇文章的代碼詳解整理完畢,發佈在另外一篇文章,有興趣的可以移步:

http://blog.csdn.net/xiaozhuyirena/article/details/78861963

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

靈感來源

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

 

靈感初現

基於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 ,那我也沒辦法了。。。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章