掘金插件，搞了个掘金数据监控桌面应用，还不快用起来！

是乃德也是Ned

已于 2022-08-22 11:53:15 修改

阅读量292

点赞数

分类专栏： Ned的前端学习日记文章标签：前端 javascript electron

于 2022-08-20 13:12:31 首次发布

本文链接：https://blog.csdn.net/weixin_45453819/article/details/126438614

版权

Ned的前端学习日记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Electron和掘金API创建一个桌面应用，该应用能够实时监控和展示掘金用户的个人信息和文章数据，包括粉丝、点赞、浏览量等变化。应用还支持消息通知、文章列表预览、主题切换和自定义配置。开发者在项目中学习了TailwindCSS，并分享了项目链接和下载方式，鼓励社区参与贡献和提出建议。

摘要由CSDN通过智能技术生成

前言

小f搞了个Electron桌面应用的开源项目，最近在找人给他提PR，然而我前天半夜摸鱼，正好逛github逛到他仓库了，突然发现，欸，好像可以嵌进去一个掘金数据监控的插件，于是，在我的不懈（努力）摸鱼下，它完成了~

预览

这是掘金数据监控插件

当然，还有许多其他的功能，预览效果如下（位置可变，可拖拽）

项目地址：Monit: 用于展示各种信息的桌面小组件

项目文档：Monit

大家喜欢的可以给个star⭐呀~

主要功能与大致实现过程

配置用户

在首次使用的时候会让大家输入自己的id用于获取数据信息，至于id在哪，大家去掘金自己主页就能看见啦，消息通知是可选项，具体情况可看下文介绍。

在这里插入图片描述

数据来源

我是使用个人页面中的两个接口来分别获取文章信息和个人信息数据的。

async getJuejinData() { 
     const { data } = await request.get(`user_api/v1/user/get?user_id=${this.config.user}`) 
     if (!data) { 
         alert('用户ID错误') 
     } 
     this.name = data.user_name 
     this.newFollower = data.follower_count 
     this.newLike = data.got_digg_count 
     this.newView = data.got_view_count 
     this.newPower = data.power 
     const { data: list } = await request.post(`content_api/v1/article/query_list`, { 
         cursor: '0', 
         sort_type: 2, 
         user_id: this.config.user, 
     }) 
     let articleInfo = [] 
     list.forEach((e) => { 
         articleInfo.push({ title: e.article_info.title, id: e.article_id }) 
     }) 
     this.newArticleInfo = articleInfo 
 },

数据更新

首先是在mounted中设置了每六十秒去获取最新的数据，并使用计算属性将增加/减少的数据显示出来，用户也可以点击增加/减少的数据加/减到前面的总数中。

setInterval(() => { 
     this.getJuejinData() 
 }, 60000)

viewChange() { 
     const changeNum = this.newView - this.view 
     if (changeNum >= 0) { 
         return '+' + changeNum 
     } else { 
         return changeNum 
     } 
 },