摸鱼搞了个掘金数据监控桌面应用,还不快用起来!

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

前言

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

预览

这是掘金数据监控插件

image.png

当然,还有许多其他的功能,预览效果如下(位置可变,可拖拽)

image.png

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

项目文档:Monit

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

主要功能与大致实现过程

配置用户

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

image.png

数据来源

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

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 
     } 
 }, 

2.gif

文章列表

最开始是想按照赞的数量来进行个排序的,可是这样就看不到自己最新文章了(日后更新),最后还是先按照发文章的顺序来进行显示了,毕竟走接口来的数据就是这样的,也比较省事。

点击想要看的文章可以直接跳转到浏览器中去查看自己的文章哦~

主要是封装了一个函数,拼上文章的id,直接打开的,大家感兴趣的可以移步github进行查看,这里不多过解释(那个函数是小f封装的,我也解释不出什么)。

openURL(`https://juejin.cn/post/${id}`)

消息通知

在你的关注跟掘力值改变的时候还会弹出提示来通知你(可选),阅读跟获赞因为太频繁,所以就没有做消息通知。

image.png

主题切换

这个项目也支持主题开发,有什么好看的主题,速速来贡献。

此处截屏是偏白的透明色,主图处是偏黑,一个亮一点,一个暗一点。

image.png

去哪下载

去到项目仓库,我们已经为大家打包好了哦~

image.png

根据自己的需要进行选择,下载体验吧~

image.png

摸鱼有感

那么这次摸鱼给我带来了什么?

首先这个项目中使用的是Tailwind CSS ,这是我以前没用过的东西,照着文档改了好久,它的配色我确实很喜欢,可能自己以后写demo也会考虑它。

image.png

其次,本来就爱瞎折腾的我又把自己的名字加进了小f的仓库中,哈哈哈哈,等后续有时间了我可能还会继续搞事情吧,谁让它真的很好玩~

image.png

最后,小f列了许多饼,欢迎大家一起来恰,也欢迎大家使用这个项目,并在issue中提出建议。

image.png

摸鱼结束

趁着午饭,短暂的摸鱼之旅结束了,我又要投身于考研大军去了,xdm加油啊!

最近许多学校大纲中,计算机类都从二变一了,408计划也逐渐越来越多,真难奥。

下一篇文章会不会是上岸之后发呢? 敬请期待ing...

我是Ned,点个关注不迷路!
相关文章
|
2月前
|
Web App开发 前端开发 JavaScript
前端开发必备神器大公开,用过的人都哭了:效率翻倍不是梦!
前端开发结合了创意与技术,本文介绍了几个提升开发效率的工具:Visual Studio Code、Webpack、Postman、GitHub 和 Chrome DevTools。这些工具分别在代码编辑、模块打包、API 测试、版本控制和网页调试等方面发挥重要作用,帮助开发者提高工作效率,优化项目管理。
35 4
|
5月前
|
缓存 前端开发 JavaScript
快如闪电!揭秘网页秒开秘籍,网友:再也不怕网速拖后腿!
【8月更文挑战第6天】随着互联网的发展,快速的网页加载成为关键。本文介绍前端性能优化策略,涵盖资源压缩与合并、图片优化、缓存利用、CDN部署、CSS及JavaScript的加载顺序优化、异步加载及DOM和CSS渲染减少等方面,旨在全面提升页面加载速度与用户体验。通过实施这些技术,可有效改善网站性能,满足用户需求并提升搜索引擎排名。
71 2
|
5月前
|
存储 前端开发 JavaScript
太爽了!这12个前端库,帮我在工作中赢得了不少摸鱼时间!!
太爽了!这12个前端库,帮我在工作中赢得了不少摸鱼时间!!
|
程序员
白嫖我珍藏已久的在线小工具【第四弹】
今天继续持续输出,那么这次给大家带来我的在线小工具第四弹,每天不是在收集小工具就是在收集小工具的路上。
157 0
白嫖我珍藏已久的在线小工具【第四弹】
|
监控 前端开发 jenkins
新来个技术总监,给团队引入了这款开发神器,同事直呼哇塞
带团队时间久了,就能发现整个 Team 都渐渐疲了。前两年老板还专门买了个系统搞 OKR,现在也不大提了;Scrum 我们也搞了,用起来也就那样;项目管理工具试了好几个,禅道、Worktile、现在用 Coding,反正有一个能用的就行;微服务化改造从去年开始在吭哧吭哧搞,我们自己搞得觉得很厉害,但业务部门那边就觉得没啥差别,搞不懂你们研发部门每天在弄些什么,赶紧做我们提的需求要紧。
新来个技术总监,给团队引入了这款开发神器,同事直呼哇塞
|
自然语言处理 搜索推荐 安全
想知道企业需不需要大热的Sitecore CMS,弄清楚这十点就够了!
毫无疑问对于企业来说,数字化转型是长期霸榜的热门话题。而这其中Sitecore又凭借着个性化数字体验、全渠道数据洞察、自动化数字营销成为了这一话题的中心。
195 0
|
前端开发 网络协议 jenkins
三分钟,我让搞后端的学弟爱上了Eolink
突然某一天,一个特别能卷的学弟向我请教接口工具……
三分钟,我让搞后端的学弟爱上了Eolink
|
SQL 存储 Oracle
平时做开发需要掌握哪些数据库方面的知识(个人经验之谈)
平时做开发需要掌握哪些数据库方面的知识(个人经验之谈)
246 0
|
Web App开发 编解码 前端开发
白嫖我珍藏已久的在线小工具【第二弹】
今天就给大家专门安利了一波「程序员专属」的在线小工具网站,身为一个程序员,不收藏下这些,岂不是亏大发了!
232 0
白嫖我珍藏已久的在线小工具【第二弹】
|
存储 JSON 程序员
白嫖我珍藏已久的在线小工具【第一弹】
今天我给大家介绍几款我平时常用的在线小工具网站,这次真的是满满的干货啊,喜欢的记得点击在看加收藏哦!
224 0

热门文章

最新文章