首页手记 3万行代码硬撸一个一键发布文章工具，简直不要太好用，从...

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

标签：

Html5

theme: channing-cyan
highlight: github-gist

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

操作演示（视频）

视频演示

项目背景

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

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

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

项目概括

本文由三大章构成

第一章：项目功能及演示

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

第三章：项目总结

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

主要功能

注册登录登出
忘记密码(修改密码)
邮箱验证码
主页面板
权限管理

菜单权限（新增，编辑，修改，删除等）
角色权限
用户管理

发布管理

渠道配置

平台渠道认证
平台配置
一键认证
一键配置信息
一键启用

文章配置

添加文章
编辑文章
删除平台文章
删除各个技术平台文章
更新阅读数
显示阅读数
显示创建时间
发布文章（发布后的文章可以编辑后重新发布）
文章转链到公众号

新增文章

新增文章
采用掘金开源文本编辑器bytemd
编辑文章非常方便
保存文章
公众号预览
chrome插件下载

主要功能展示

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

技术栈

前端： 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个平台，因为每个平台的都不一样，包括配置信息，文章标签数据结构的获取展示，存储等。还有就是架构上的优化，也需要考虑。