基于mongodb+express+vue+axios+bootstrap的掘金最热文章收藏评论分析

2017.11.21更新：本篇文章的代码详解整理完毕，发布在另外一篇文章，有兴趣的可以移步：

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

目前此项目还在完善，项目地址在：传送门

灵感来源

最近浏览技术文章的时候，偶然看到一篇关于分析简书热荐文章中代码块数量的文章，链接我翻了一遍了历史记录也没有发现，可能被“吃了”把，好吧不管他的文章在哪了。看了那边文章后，我对掘金的首页开始了非分之想（嘿嘿嘿嘿~~,掘金君不要怪我奥！！）

 

灵感初现

 

看了掘金的最热文章后，我开始了一次“天马星空”的猜想，为什么这个文章会成为最热的呢，是因为浏览量比较多，评论数比较多，还是收藏量比较多导致的呢，我开始有了初步的想法。光想还是不行，我还是要开始动手做了，我喝了一杯水，在浏览器上轻轻的打开了掘金的首页，然后熟练的打开了调试器，开始对掘金君进行无情的分析，好吧，初步分析以后，发现评论数，浏览数，收藏数就在API接口中（我露出一丝坏笑~~），这样就可以省的我去爬页面的数据了；第一个想法浮现在脑海中，直接调用接口进行前100最热篇文章的分析，利用echarts的折线图绘制曲线进行分析；（嗯，很好，很快就能完成~~）然而爱折腾的我没有认同这种做法，这样没有挑战性，也学不到多少东西，怎么办，改变套路（额，就是套路，对没错，套路一番）；

一个让自己可以重新梳理前后端以及数据库知识的想法悠然而生，一直在做一些爬虫的小程序（这里只只是想简单用一下而已，请勿喷~~），为何不在此利用一番，好吧说干就干，反正有了接口可以直接用，就不用解析dom了；

技术选型

自从有了nodejs，现在前端是什么都敢干了，我想说：js要一统天下（会不会被打，哈哈）；梳理一下思路：

1、使用superagent获取掘金接口数据

2、获取的数据利用mongoose存储在mongodb中（Schema重新设计，过滤不需要的数据）

3、使用express搭建后端服务提供接口给前端调用，数据从mongodb中获取

4、前端使用vue + axios + bootstrap + echarts + jquery （我只是想多个库同时使用解决不同问题，喜欢纯用vue的同仁，可以把九十米长刀放下，别误伤 (ಥ _ ಥ) ）进行构建

实现功能

1、前端可以显示掘金历史最热前100篇文章的评论，浏览及评论数据分析图

 

 

2、并且可以按照类别进行查看

 

 

3、对于数据库中不存在的数据要进行提示

 

 

4、提示后跳转到可采集页面

 

 

6、点击指定栏目可进行采集数据，并返回采集结果

 

7、额外功能：文章瀑布流显示，并可跳转原文章页面

目前此项目还在完善，项目地址在：传送门

有兴趣的可以来个star，没兴趣的（好吧，我也没有办法让你有兴趣 o(╯□╰)o ）

近期我会把项目的整个搭建过程及代码解释整理出来，方便有兴趣的童鞋学习，如果大佬感觉so easy ，那我也没办法了。。。