1、Vue & Element 管理后臺(tái)的功能特點(diǎn)

該框架包含了兩個(gè)功能強(qiáng)大的前端:基于Asp.net的Bootstrap管理后臺(tái);以及基于Vue & Element的管理后臺(tái),Vue & Element是純粹的前后端分離。兩個(gè)前端基礎(chǔ)功能基本相同,使用相同的數(shù)據(jù)庫(kù),均可以基于代碼生成工具快速生成框架代碼,高效的增量式開(kāi)發(fā)系統(tǒng)模塊。

本篇介紹微信后臺(tái)管理功能,在原先基于Asp.net的Bootstrap前端基礎(chǔ)上,增加的Vue&Element前端的后臺(tái)管理功能介紹。 

 

2、Vue & Element 管理后臺(tái)功能介紹

2.1)微信多賬號(hào)管理

在微信后臺(tái)管理系統(tǒng)中,需要對(duì)系統(tǒng)設(shè)計(jì)到的一些微信賬號(hào)信息進(jìn)行配置,包括訂閱號(hào)、公眾號(hào)、企業(yè)微信、小程序等賬號(hào)列表的管理。賬號(hào)列表界面如下所示,便于綜合的管理配置處理。

在賬號(hào)列表中,可以管理我們業(yè)務(wù)系統(tǒng)所涉及到的各種微信賬號(hào)信息,如公眾號(hào)、企業(yè)微信、小程序等,可以在其中維護(hù)相關(guān)的配置信息。 微信賬號(hào)的編輯界面如下所示,在其中管理各種用到的微信賬號(hào)信息,便于后臺(tái)API的接口訪問(wèn)。 

 

微信賬號(hào)管理,主要就是配置好和微信公眾號(hào)、企業(yè)微信的相關(guān)參數(shù),方便調(diào)用微信API接口的隨時(shí),根據(jù)這些參數(shù)獲得訪問(wèn)接口的Token,以便實(shí)現(xiàn)對(duì)菜單、事件、通訊錄、發(fā)送數(shù)據(jù)等等的相關(guān)處理 ,另外也可以接收騰訊微信回調(diào)信息,如事件響應(yīng)、訂單支付等操作的事件。  

2.2)微信菜單管理

 我們知道,公眾號(hào)或者企業(yè)微信的手機(jī)端中底部都有相關(guān)的功能菜單,這些我們可以通過(guò)后臺(tái)系統(tǒng)的API接口提交,那么我們后臺(tái)管理也需要對(duì)微信菜單數(shù)據(jù)進(jìn)行管理。我們?cè)谙到y(tǒng)中管理菜單,并通過(guò)把菜單提交到服務(wù)器上,實(shí)現(xiàn)菜單的動(dòng)態(tài)配置和生成,能夠?yàn)槲覀兿到y(tǒng)適應(yīng)各種的需要,實(shí)現(xiàn)靈活的處理。 首先我們?cè)诠芾淼娜肟谙染S護(hù)菜單的分組,菜單分組其實(shí)也是一個(gè)菜單記錄,只是作為一個(gè)頂端的菜單記錄存在,方便維護(hù)而已。 菜單分組可以禁用、啟用,新增、編輯,以及展示該分組下的樹(shù)形列表和提交到微信服務(wù)器上的功能,如下所示是我們對(duì)菜單分組的界面設(shè)計(jì)。

 

以上是一個(gè)全覽的菜單管理,包括菜單分組以及分組下的菜單列表狀態(tài),我們有時(shí)候需要進(jìn)入菜單列表明細(xì)的方式查看相關(guān)菜單數(shù)據(jù),如下界面所示。

這樣我們就有一個(gè)對(duì)菜單群進(jìn)行統(tǒng)一維護(hù)的菜單分組,也方便我們隨時(shí)啟用某個(gè)菜單組群,以便對(duì)某個(gè)應(yīng)用進(jìn)行簡(jiǎn)單的測(cè)試或者體驗(yàn),特別在我們微信框架整合了多個(gè)項(xiàng)目,以便客戶切換不同項(xiàng)目進(jìn)行使用,就顯得更加方便。某個(gè)時(shí)候,隨時(shí)提交一下就可以及時(shí)進(jìn)行測(cè)試,不需要的時(shí)候,再更換一個(gè)不同的應(yīng)用菜單群組。  

2.3)微信賬號(hào)和對(duì)接管理

 在微信后臺(tái)管理系統(tǒng)中,需要對(duì)系統(tǒng)設(shè)計(jì)到的一些微信賬號(hào)信息進(jìn)行配置,包括訂閱號(hào)、公眾號(hào)、企業(yè)微信、小程序等賬號(hào)列表的管理。

微信開(kāi)發(fā)框架,提供了標(biāo)準(zhǔn)的微信賬號(hào)信息填寫(xiě)界面,錄入對(duì)應(yīng)的信息,完成微信后臺(tái)的對(duì)接,即可開(kāi)啟開(kāi)發(fā)微信應(yīng)用之旅了。微信賬號(hào)的編輯界面如下所示,在其中管理各種用到的微信賬號(hào)信息,便于后臺(tái)API的接口訪問(wèn)。。

 賬號(hào)登錄公眾號(hào)后臺(tái)或者企業(yè)微信后臺(tái),我們根據(jù)和賬號(hào)配置一致對(duì)應(yīng)的信息,完成系統(tǒng)對(duì)接即可,以下是微信公眾號(hào)的配置對(duì)接界面。

 后臺(tái)系統(tǒng)配置和官方微信后臺(tái)的配置對(duì)接成功后,就需要設(shè)置好對(duì)應(yīng)的公眾號(hào)或者企業(yè)微信等的菜單了。

其中每項(xiàng)菜單,都包含一個(gè)觸發(fā)的事件,要么是普通的單擊事件,要么是視圖事件,要么是掃碼事件等等,如下菜單類似所示。

 

2.4)菜單的事件和內(nèi)容管理

除了菜單的網(wǎng)頁(yè)鏈接事件外,其他菜單的事件,如click類型事件等,都需要后臺(tái)管理系統(tǒng)在接收到騰訊微信事件回調(diào)的時(shí)候,進(jìn)行一一響應(yīng)的,我們可以自定義我們的響應(yīng)內(nèi)容,因此引入了一個(gè)后臺(tái)管理中的事件和內(nèi)容管理,用于一一響應(yīng)對(duì)應(yīng)的事件代碼。如下是內(nèi)容管理列表和詳細(xì)內(nèi)容界面。

有了這些內(nèi)容定義,我們就可以在事件定義中,選取一個(gè)或者多個(gè)內(nèi)容定義作為事件的主要內(nèi)容承載了。事件管理列表界面如下所示。

在新建或者編輯事件界面中,我們?cè)黾右粋(gè)選擇內(nèi)容的按鈕事件入口,如下所示 

在彈出界面中,我們選擇對(duì)應(yīng)的內(nèi)容進(jìn)行處理即可。

選中的內(nèi)容,以標(biāo)簽的形式展示出來(lái)。

微信事件的編輯界面如下所示,類似新增界面的內(nèi)容。

2.5)Vue&Element的權(quán)限管理界面展示:

主體框架界面采用的是基于后臺(tái)配置的菜單動(dòng)態(tài)生成,左側(cè)是菜單,右邊頂部是特定導(dǎo)航條和內(nèi)容區(qū),這個(gè)和我們ABP框架的前端界面是一致的。 系統(tǒng)主界面的開(kāi)發(fā),基本上都是標(biāo)準(zhǔn)的界面,在系統(tǒng)左側(cè)放置系統(tǒng)菜單,右側(cè)中間區(qū)域則放置列表展示內(nèi)容,但是在系統(tǒng)菜單比較多的時(shí)候,就需要把菜單分為幾級(jí)處理。系統(tǒng)菜單在左側(cè)放置一個(gè)自定義菜單組件列表,這樣通過(guò)樹(shù)形列表的收縮折疊,就可以放置非常多的菜單功能了。 

用戶管理界面,沿襲Bootstrap框架的布局進(jìn)行管理,通過(guò)用戶機(jī)構(gòu)方式,快速展示用戶分頁(yè)列表,如下界面所示。 

機(jī)構(gòu)管理界面如下所示。 

角色管理界面如下所示。 

其角色的編輯界面如下所示,包括了基礎(chǔ)信息、用戶、菜單、權(quán)限等項(xiàng)目。 

整個(gè)系統(tǒng)的菜單,既可以通過(guò)默認(rèn)Mock的初始菜單,也可以通過(guò)后端API獲得的菜單資源,動(dòng)態(tài)在界面上進(jìn)行展示,系統(tǒng)界面左側(cè)的菜單是動(dòng)態(tài)獲取并展示出來(lái)的,結(jié)合路由的判斷可以限制用戶訪問(wèn)的菜單權(quán)限。菜單管理界面如下所示。 

菜單資源在角色管理中分配給具體角色,即可實(shí)現(xiàn)對(duì)菜單的動(dòng)態(tài)控制管理了。 前端的界面管理,依舊可以通過(guò)分拆模塊的方式,完成更加方便的組合處理