§ 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-0https://juejin.cn/post/7104552702427791391

§ 实现原理

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

§ 实现难点

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

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

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

§ 项目源代码获取

如果使用中出现问题请评论区讨论评论区回复

§ 项目地址

点击项目地址

§ 文章待续更新。。。

欢迎评论点赞支持，本人将不胜惶恐。本文由蜗牛老湿开发Butterfly发布

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

动手撸一个SQL规范检查工具
背景近几年公司人员规模快速增长,超过半数开发人员均为近两年入职的新员工,开发技能与经验欠缺,之前踩坑的经验也未能完全了解,出现了几起因慢SQL而引发的生产性能问题. 为了更好地指导产品SQL设计及开 ...
敲完第一万行代码我发现一个秘密
一入IT深似海,从此假期是路人,我成为程序员一年半,前一年写过的代码大概都没有这几个月多,最近接了一个项目,可谓是忙的昏天黑地,整整敲下了万余行代码,付出了很多,收获的也许更多,而且我发现了一个秘密- ...
android好玩界面,Android 带你撸一个好玩的 DoodleView（涂鸦）
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布前言最近项目中需要用到涂鸦的功能,在 Github 上搜了一圈也没找到适合的库,索性就自己撸一个出来,正好复习一下自定义 View ...
php exec多条命令怎么拼接_PHP--手摸手，教你撸一个会自动补全的命令行工具1
前言一次在使用symfony的时候,发现使用命令行的时候有些关键字会自动提示. 介绍随着laravel,symfony等框架的流行,命令行工具越来越流行,但是很多时候命令太多,根本无法记住所有参数 ...
js websocket同步等待_WebSocket硬核入门：200行代码，教你徒手撸一个WebSocket服务器...
本文原题"Node.js - 200 多行代码实现 Websocket 协议",为了提升内容品质,有较大修订. 1.引言最近正在研究 WebSocket 相关的知识,想着如何能自 ...
超50万行代码、GitHub 4200星：腾讯重磅发布全栈机器学习平台Angel 3.0
来源:新智元编辑部 [新智元导读]腾讯首个AI开源项目Angel,正式发布一个里程碑式的版本:Angel 3.0.这是一个全栈的机器学习平台,功能特性涵盖了机器学习的各个阶段,超过50万行代码,在 G ...
Linus送出圣诞礼物：发布Linux 4.20，超35万行代码
乾明发自凹非寺量子位报道 | 公众号 QbitAI 这是礼物吗? 圣诞之时,一则邮件让国外的极客程序员们沸腾了,尤其是那群Linux的粉丝. 他们的"神",Linus T ...
“数万行代码“教你用html和css编写一个精美的网页
我是歌谣放弃很容易但是坚持一定很酷 1前言作为一名前端开发工程师开发一个完美的网页也是我们的必修课之一逻辑写起来有时候不是那么的难据说页面样式才是最难的一课本文内容纯属自己个人观点欢迎 ...
SpringBoot使用EasyYapi对代码0侵入实现API接口一键发布到YApi的进阶使用 - 第423篇
历史文章(累计400+篇文章) <国内最全的Spring Boot系列之一> <国内最全的Spring Boot系列之二> <国内最全的Spring Boot系列之三&g ...

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