1、Vue & Element 管理后臺的功能特點

該框架包含了兩個功能強大的前端:基于Asp.net的Bootstrap管理后臺;以及基于Vue & Element的管理后臺,Vue & Element是純粹的前后端分離。兩個前端基礎功能基本相同,使用相同的數據庫,均可以基于代碼生成工具快速生成框架代碼,高效的增量式開發系統模塊。

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

 

2、Vue & Element 管理后臺功能介紹

2.1)微信多賬號管理

在微信后臺管理系統中,需要對系統設計到的一些微信賬號信息進行配置,包括訂閱號、公眾號、企業微信、小程序等賬號列表的管理。賬號列表界面如下所示,便于綜合的管理配置處理。

在賬號列表中,可以管理我們業務系統所涉及到的各種微信賬號信息,如公眾號、企業微信、小程序等,可以在其中維護相關的配置信息。 微信賬號的編輯界面如下所示,在其中管理各種用到的微信賬號信息,便于后臺API的接口訪問。 

 

微信賬號管理,主要就是配置好和微信公眾號、企業微信的相關參數,方便調用微信API接口的隨時,根據這些參數獲得訪問接口的Token,以便實現對菜單、事件、通訊錄、發送數據等等的相關處理 ,另外也可以接收騰訊微信回調信息,如事件響應、訂單支付等操作的事件。  

2.2)微信菜單管理

 我們知道,公眾號或者企業微信的手機端中底部都有相關的功能菜單,這些我們可以通過后臺系統的API接口提交,那么我們后臺管理也需要對微信菜單數據進行管理。我們在系統中管理菜單,并通過把菜單提交到服務器上,實現菜單的動態配置和生成,能夠為我們系統適應各種的需要,實現靈活的處理。 首先我們在管理的入口先維護菜單的分組,菜單分組其實也是一個菜單記錄,只是作為一個頂端的菜單記錄存在,方便維護而已。 菜單分組可以禁用、啟用,新增、編輯,以及展示該分組下的樹形列表和提交到微信服務器上的功能,如下所示是我們對菜單分組的界面設計。

 

以上是一個全覽的菜單管理,包括菜單分組以及分組下的菜單列表狀態,我們有時候需要進入菜單列表明細的方式查看相關菜單數據,如下界面所示。

這樣我們就有一個對菜單群進行統一維護的菜單分組,也方便我們隨時啟用某個菜單組群,以便對某個應用進行簡單的測試或者體驗,特別在我們微信框架整合了多個項目,以便客戶切換不同項目進行使用,就顯得更加方便。某個時候,隨時提交一下就可以及時進行測試,不需要的時候,再更換一個不同的應用菜單群組。  

2.3)微信賬號和對接管理

 在微信后臺管理系統中,需要對系統設計到的一些微信賬號信息進行配置,包括訂閱號、公眾號、企業微信、小程序等賬號列表的管理。

微信開發框架,提供了標準的微信賬號信息填寫界面,錄入對應的信息,完成微信后臺的對接,即可開啟開發微信應用之旅了。微信賬號的編輯界面如下所示,在其中管理各種用到的微信賬號信息,便于后臺API的接口訪問。。

 賬號登錄公眾號后臺或者企業微信后臺,我們根據和賬號配置一致對應的信息,完成系統對接即可,以下是微信公眾號的配置對接界面。

 后臺系統配置和官方微信后臺的配置對接成功后,就需要設置好對應的公眾號或者企業微信等的菜單了。

其中每項菜單,都包含一個觸發的事件,要么是普通的單擊事件,要么是視圖事件,要么是掃碼事件等等,如下菜單類似所示。

 

2.4)菜單的事件和內容管理

除了菜單的網頁鏈接事件外,其他菜單的事件,如click類型事件等,都需要后臺管理系統在接收到騰訊微信事件回調的時候,進行一一響應的,我們可以自定義我們的響應內容,因此引入了一個后臺管理中的事件和內容管理,用于一一響應對應的事件代碼。如下是內容管理列表和詳細內容界面。

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

在新建或者編輯事件界面中,我們增加一個選擇內容的按鈕事件入口,如下所示 

在彈出界面中,我們選擇對應的內容進行處理即可。

選中的內容,以標簽的形式展示出來。

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

2.5)Vue&Element的權限管理界面展示:

主體框架界面采用的是基于后臺配置的菜單動態生成,左側是菜單,右邊頂部是特定導航條和內容區,這個和我們ABP框架的前端界面是一致的。 系統主界面的開發,基本上都是標準的界面,在系統左側放置系統菜單,右側中間區域則放置列表展示內容,但是在系統菜單比較多的時候,就需要把菜單分為幾級處理。系統菜單在左側放置一個自定義菜單組件列表,這樣通過樹形列表的收縮折疊,就可以放置非常多的菜單功能了。 

用戶管理界面,沿襲Bootstrap框架的布局進行管理,通過用戶機構方式,快速展示用戶分頁列表,如下界面所示。 

機構管理界面如下所示。 

角色管理界面如下所示。 

其角色的編輯界面如下所示,包括了基礎信息、用戶、菜單、權限等項目。 

整個系統的菜單,既可以通過默認Mock的初始菜單,也可以通過后端API獲得的菜單資源,動態在界面上進行展示,系統界面左側的菜單是動態獲取并展示出來的,結合路由的判斷可以限制用戶訪問的菜單權限。菜單管理界面如下所示。 

菜單資源在角色管理中分配給具體角色,即可實現對菜單的動態控制管理了。 前端的界面管理,依舊可以通過分拆模塊的方式,完成更加方便的組合處理 

 

猪猪影院