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

1)Web API后端的架構設計

這個(gè)是屬于前端、后端完全分離的架構設計,后端采用基于A(yíng)sp.net的Web API技術(shù),并提供按域來(lái)管理API的分類(lèi),Web API如下架構所示。

通過(guò)上面的架構設計,可以看出,底層BLL、DAL、Entity、IDAL、公用類(lèi)庫等分層都是完全通用的,不同的是,我們后端只是提供Web API的接口服務(wù)給前端,這個(gè)和我們的《ABP框架使用》的理念一致,前后端分離。 為了更好的進(jìn)行后端Web API控制器的相關(guān)方法的封裝處理,我們把一些常規的接口處理放在BaseApiController里面,而把基于業(yè)務(wù)表的操作接口放在BusinessController里面定義,如下所示。

在BaseApiController里面,我們使用了結果封裝和異常處理的過(guò)濾器統一處理。而業(yè)務(wù)類(lèi)的接口通用封裝,則放在了BusinessController控制器里面,其中使用了泛型定義,包括實(shí)體類(lèi),業(yè)務(wù)操作類(lèi),分頁(yè)條件類(lèi)等內容作為約束參數,通過(guò)Web API接口返回結果的統一封裝處理,我們定義了相關(guān)的格式如下所示。

 

 

2、Vue&Element的前端的架構設計:

而Vue&Element的前端的架構設計,也借鑒了我們ABP框架的前端管理部分,Vue&Element的前端的架構設計如下所示。

引入了前后端分離的Vue + Element 作為前端技術(shù)路線(xiàn),那么前后端的邊界則非常清晰,前端可以在通過(guò)網(wǎng)絡(luò )獲取對應的JSON就可以構建前端的應用了。 一般來(lái)說(shuō),我們頁(yè)面模塊可能會(huì )涉及到Store模塊,用來(lái)存儲對應的狀態(tài)信息,也可能是直接訪(fǎng)問(wèn)API模塊,實(shí)現數據的調用并展示。在頁(yè)面開(kāi)發(fā)過(guò)程中,多數情況下,不需要Store模塊進(jìn)行交互,一般只需要存儲對應頁(yè)面數據為全局數據狀態(tài)的情況下,才可能啟用Store模塊的處理。通過(guò)WebProxy代理的處理,我們可以很容易在前端中實(shí)現跨域的處理,不同的路徑調用不同的域名地址API都可以,最終轉換為本地的API調用,這就是跨域的處理操作。

前端根據ABP后端的接口進(jìn)行前端JS端的類(lèi)的封裝處理,引入了ES6類(lèi)的概念實(shí)現業(yè)務(wù)基類(lèi)接口的統一封裝,簡(jiǎn)化代碼。 權限模塊我們涉及到的用戶(hù)管理、機構管理、角色管理、菜單管理、功能管理、操作日志、登錄日志等業(yè)務(wù)類(lèi),那么這些類(lèi)繼承BaseApi,就會(huì )具有相關(guān)的接口了,如下所示繼承關(guān)系。

 

3、WebApi+Vue&Element的前端界面展示:

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

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

機構管理界面如下所示。 

角色管理界面如下所示。 

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

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

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

利用模塊化的處理方式,我們可以把界面部分內容作為一個(gè)組件進(jìn)行封裝處理,如在權限管理中,我們定義了一部分重用的組件界面,如下所示。 

定義好各種界面的自定義組件后,在主界面中進(jìn)行Import導入使用即可,非常方便重用。