当前位置： 首页>后端>正文

3万行代码硬撸一个一键发布文章工具，简直不要太好用，从此写文章，发文章，太简单了好伐

后端2024-10-23 00:54:08

theme: channing-cyan
highlight: github-gist

本人6年前端开发- 【程序员蜗牛】，欢迎沟通交流

操作演示（视频）

视频演示

项目背景

程序员工作中，不免会遇到一些技术难题，然后通过不懈努力将问题攻克，然后想着可以记录下来，免得后边再遇到类似的问题，有一个归纳总结，方便查询的地方。再者就是可以分享自己的解决思路，供圈内其他同学查阅解决。最后还想着推广文章，积累粉丝。

因为技术博客实在太多了，博客园，csdn,掘金，知乎，思否，简书等平台，如果写一篇文章，分别发到各个平台，那简直了。。。要死的赶脚。有没有一个方便的工具，可以在一个地方写文章，然后一键发布到各个平台。

当然，答案是有的。我自己熬夜一个月开发的一键发布平台，Butterfly,就可以一键发布到9个博客平台。极大方便的文章推广。不信你可以试试，超好用呢。（第一次加载网速比较慢，耐心等待哈，本人资金不足，没能购买高配的server），真心累，要不是兴趣支撑，我怕要猝死了。。。

项目概括

本文由三大章构成

第一章：项目功能及演示

第二章：总结项目技术及实现难点

第三章：项目总结

第一章（项目功能及演示）

主要功能

  • 注册登录登出
  • 忘记密码(修改密码)
  • 邮箱验证码
  • 主页面板
  • 权限管理
  1. 菜单权限（新增，编辑，修改，删除等）
  2. 角色权限
  3. 用户管理
  • 发布管理
  1. 渠道配置
  • 平台渠道认证
  • 平台配置
  • 一键认证
  • 一键配置信息
  • 一键启用
  1. 文章配置
  • 添加文章
  • 编辑文章
  • 删除平台文章
  • 删除各个技术平台文章
  • 更新阅读数
  • 显示阅读数
  • 显示创建时间
  • 发布文章（发布后的文章可以编辑后重新发布）
  • 文章转链到公众号
  1. 新增文章
  • 新增文章
  • 采用掘金开源文本编辑器bytemd
  • 编辑文章非常方便
  • 保存文章
  • 公众号预览
  • chrome插件下载

主要功能展示

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/66c3d1dd4f8a44108c365b5f570c9485~tplv-k3u1fbpfcp-watermark.image?" alt="image.png" width="70%" />

<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/322abe41a367434299f5d055b2d5f760~tplv-k3u1fbpfcp-watermark.image?" alt="image.png" width="70%" />

<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/791bbf7bd2f9457ab596483434286cc4~tplv-k3u1fbpfcp-watermark.image?" alt="image.png" width="70%" />

<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db251fc5a4944597950670c936985625~tplv-k3u1fbpfcp-watermark.image?" alt="image.png" width="70%" />

第二章（总结项目技术及实现难点）

技术栈

前端： vue2 + webpack + vuex全家桶 + antdUI

chrome插件: 采用vue2语法 + chrome开发规范
相关技术可参考文章

后端： node(eggjs框架) + mysql + redis

chrome插件开发可以参考这两篇文章
https://juejin.cn/post/6902306686716313614#heading-0

https://juejin.cn/post/7104552702427791391

实现原理

发布平台（后边统一称：C端）负责渠道的认证获取配置，发布文章等，后台项目与谷歌插件(U端)互相通信，其中包括chrome.runtime.sendMessage等通信技术，C端与服务端（S端）调接口更改数据。
U端主要做的功能是获取各个平台的认证状态，配置信息等，传送到C端，C端再调接口到S端落库保存。
整个过程是安全的，并不能获取用户的登录密码，可以放心使用。

实现难点

可以说最难的应该是chrome插件的开发，因为不是专业搞这个的，需要去先学习再试着开发，还好经过几天的摸索，最终形成了一个vue + chrome规范的项目框架,然后就是业务上的功能， 获取各个平台的信息，包括用户名，昵称，登录状态等，因为各个平台不同，这里还设计到类似爬虫的技术，但是用前端代码实现的，思想是一样的。包括项目架构搭建，工具函数的封装等

其次是S端项目，eggjs后端框架，数据库的设计，权限管理设计及代码实现也是有点难难度的。

再就是C端，总共9个平台，因为每个平台的都不一样，包括配置信息，文章标签数据结构的获取展示，存储等。还有就是架构上的优化，也需要考虑。

项目源代码获取

项目地址

点击项目地址

文章待续更新。。。


https://www.xamrdz.com/backend/37b1997275.html

相关文章：