theme: channing-cyan
highlight: github-gist

本人6年前端開發(fā)- 【程序員蝸?！浚瑲g迎溝通交流

操作演示（視頻）

視頻演示

項(xiàng)目背景

程序員工作中，不免會遇到一些技術(shù)難題，然后通過不懈努力將問題攻克，然后想著可以記錄下來，免得后邊再遇到類似的問題，有一個(gè)歸納總結(jié)，方便查詢的地方。再者就是可以分享自己的解決思路，供圈內(nèi)其他同學(xué)查閱解決。最后還想著推廣文章，積累粉絲。

因?yàn)榧夹g(shù)博客實(shí)在太多了，博客園，csdn,掘金，知乎，思否，簡書等平臺，如果寫一篇文章，分別發(fā)到各個(gè)平臺，那簡直了。。。要死的趕腳。有沒有一個(gè)方便的工具，可以在一個(gè)地方寫文章，然后一鍵發(fā)布到各個(gè)平臺。

當(dāng)然，答案是有的。我自己熬夜一個(gè)月開發(fā)的一鍵發(fā)布平臺，Butterfly,就可以一鍵發(fā)布到9個(gè)博客平臺。極大方便的文章推廣。不信你可以試試，超好用呢。（第一次加載網(wǎng)速比較慢，耐心等待哈，本人資金不足，沒能購買高配的server），真心累，要不是興趣支撐，我怕要猝死了。。。

項(xiàng)目概括

本文由三大章構(gòu)成

第一章：項(xiàng)目功能及演示

第二章：總結(jié)項(xiàng)目技術(shù)及實(shí)現(xiàn)難點(diǎn)

第三章：項(xiàng)目總結(jié)

第一章（項(xiàng)目功能及演示）

主要功能

• 注冊登錄登出
• 忘記密碼(修改密碼)
• 郵箱驗(yàn)證碼
• 主頁面板
• 權(quán)限管理

1. 菜單權(quán)限（新增，編輯，修改，刪除等）
2. 角色權(quán)限
3. 用戶管理

• 發(fā)布管理

1. 渠道配置

• 平臺渠道認(rèn)證
• 平臺配置
• 一鍵認(rèn)證
• 一鍵配置信息
• 一鍵啟用

3. 文章配置

• 添加文章
• 編輯文章
• 刪除平臺文章
• 刪除各個(gè)技術(shù)平臺文章
• 更新閱讀數(shù)
• 顯示閱讀數(shù)
• 顯示創(chuàng)建時(shí)間
• 發(fā)布文章（發(fā)布后的文章可以編輯后重新發(fā)布）
• 文章轉(zhuǎn)鏈到公眾號

4. 新增文章

• 新增文章
• 采用掘金開源文本編輯器bytemd
• 編輯文章非常方便
• 保存文章
• 公眾號預(yù)覽

• 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%" />

第二章（總結(jié)項(xiàng)目技術(shù)及實(shí)現(xiàn)難點(diǎn)）

技術(shù)棧

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

chrome插件: 采用vue2語法 + chrome開發(fā)規(guī)范
相關(guān)技術(shù)可參考文章

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

chrome插件開發(fā)可以參考這兩篇文章
https://juejin.cn/post/6902306686716313614#heading-0

https://juejin.cn/post/7104552702427791391

實(shí)現(xiàn)原理

發(fā)布平臺（后邊統(tǒng)一稱：C端）負(fù)責(zé)渠道的認(rèn)證獲取配置，發(fā)布文章等，后臺項(xiàng)目與谷歌插件(U端)互相通信，其中包括chrome.runtime.sendMessage等通信技術(shù)，C端與服務(wù)端（S端）調(diào)接口更改數(shù)據(jù)。
U端主要做的功能是獲取各個(gè)平臺的認(rèn)證狀態(tài)，配置信息等，傳送到C端，C端再調(diào)接口到S端落庫保存。
整個(gè)過程是安全的，并不能獲取用戶的登錄密碼，可以放心使用。

實(shí)現(xiàn)難點(diǎn)

可以說最難的應(yīng)該是chrome插件的開發(fā)，因?yàn)椴皇菍I(yè)搞這個(gè)的，需要去先學(xué)習(xí)再試著開發(fā)，還好經(jīng)過幾天的摸索，最終形成了一個(gè)vue + chrome規(guī)范的項(xiàng)目框架,然后就是業(yè)務(wù)上的功能， 獲取各個(gè)平臺的信息，包括用戶名，昵稱，登錄狀態(tài)等，因?yàn)楦鱾€(gè)平臺不同，這里還設(shè)計(jì)到類似爬蟲的技術(shù)，但是用前端代碼實(shí)現(xiàn)的，思想是一樣的。包括項(xiàng)目架構(gòu)搭建，工具函數(shù)的封裝等

其次是S端項(xiàng)目，eggjs后端框架，數(shù)據(jù)庫的設(shè)計(jì)，權(quán)限管理設(shè)計(jì)及代碼實(shí)現(xiàn)也是有點(diǎn)難難度的。

再就是C端，總共9個(gè)平臺，因?yàn)槊總€(gè)平臺的都不一樣，包括配置信息，文章標(biāo)簽數(shù)據(jù)結(jié)構(gòu)的獲取展示，存儲等。還有就是架構(gòu)上的優(yōu)化，也需要考慮。

項(xiàng)目源代碼獲取

如果使用中出現(xiàn)問題請?jiān)u論區(qū)討論 評論區(qū)回復(fù)

項(xiàng)目地址

點(diǎn)擊項(xiàng)目地址

文章待續(xù)更新。。。