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

  • A+
所属分类:node vue web前端

灵感来源

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

 

灵感初现

基于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 ,那我也没办法了。。。

weinxin
我的微信
这是我的微信扫一扫
kiven

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: