前面介紹了很多ABP系列的文章《ABP框架使用》,一步一步的把我們日常開(kāi)發(fā)中涉及到的Web API服務(wù)構建、登錄日志和操作審計日志、字典管理模塊、省份城市的信息維護、權限管理模塊中的組織機構、用戶(hù)、角色、權限、菜單等內容,以及配置管理模塊,界面的高級查詢(xún)處理等內容,并根據我們在Winform領(lǐng)域多年的開(kāi)發(fā)經(jīng)驗,完成了系統功能在Winform界面下的實(shí)現,并利用工具實(shí)現快速的Winform界面生成工作;而在循序漸進(jìn)VUE+Element 前端應用開(kāi)發(fā)文章《循序漸進(jìn)VUE+Element》中,則介紹了結合ABP+Vue+Element來(lái)構建BS的前端解決方案,通過(guò)Vue+Element實(shí)現的前端界面展示,界面美觀(guān)大方;而且業(yè)務(wù)內容以模塊化組裝的Web界面,非常利于大型復雜系統的開(kāi)發(fā),極大提供了效率。

1、ABP框架背景知識介紹

ABP是ASP.NET Boilerplate的簡(jiǎn)稱(chēng),ABP是一個(gè)開(kāi)源且文檔友好的應用程序框架。目前基于.net core5.0基礎上進(jìn)行開(kāi)發(fā),框架支持SQLServer、Mysql、Oracle等常用數據庫的配置切換。

1)框架特點(diǎn)

基于A(yíng)BP框架基礎上,我們整理完善了整個(gè)權限體系,以及基于這個(gè)基礎上進(jìn)行的業(yè)務(wù)系統快速開(kāi)發(fā),我們整理后的ABP快速開(kāi)發(fā)框架的架構圖示,如下圖所示(以字典模塊為例說(shuō)明)

以上是后端API的框架架構,引入了前后端分離的Vue + Element 作為前端技術(shù)路線(xiàn),那么前后端的邊界則非常清晰,前端可以在通過(guò)網(wǎng)絡(luò )獲取對應的JSON就可以構建前端的應用了。

在前端處理中,主要就是利用Vuex模式中的Store對象里實(shí)現對Action和Mutation的請求處理,獲取數據后,實(shí)現對State狀態(tài)中的數據進(jìn)行更新。如果僅僅是當前頁(yè)面的數據處理,甚至可以不需要存儲State信息,而直接通過(guò)前端封裝的API類(lèi)獲取到返回的數據,直接更新到界面視圖上即可。

Vue + Element前端項目的視圖、Store模塊、API模塊、Web API之間關(guān)系如下所示。

前端根據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)系。

 

2、基于Vue + Element前端ABP框架功能介紹

1)登錄界面

 系統登錄界面效果如下所示。

  或者

 其中里面的文本內容,我們都是以國際化處理內容。

 

2)主體框架界面

主體框架界面采用的是基于后臺配置的菜單動(dòng)態(tài)生成,左側是菜單,右邊頂部是特定導航條和內容區。

首頁(yè)內容區包括了一些常規的統計展示信息和各種圖表綜合展示內容。

我們來(lái)看看圖表展示的效果圖,其中柱狀圖效果如下所示。

 餅狀圖效果如下所示。

 曲線(xiàn)圖效果如下所示。

 其他類(lèi)型,極坐標和散點(diǎn)圖形

 或者曲線(xiàn)和柱狀圖組合的圖形

 其中頂部導航條,提供查詢(xún)、全屏切換、修改布局大小、多語(yǔ)言選擇菜單、頭像及快捷菜單處理。

 

3)用戶(hù)管理界面

用戶(hù)列表包括分頁(yè)查詢(xún)及列表展示、以及可以利用按鈕進(jìn)行新增、編輯、查看用戶(hù)記錄,或者對指定用戶(hù)進(jìn)行重置密碼操作。

 

我們把常規的列表界面,新增、編輯、查看、導入等界面放在一起,除了列表頁(yè)面,其他內容以彈出層對話(huà)框的方式進(jìn)行處理,如下界面示意所示。

 用戶(hù)編輯界面如下所示。

 當然可以查看這個(gè)用戶(hù)本身?yè)碛械臋嘞薰δ茳c(diǎn)和擁有的菜單,如下界面所示。

  

4)組織機構管理

組織機構主要就是一個(gè)層級的對象關(guān)系,一般包含但不限于公司、部門(mén)、工作組等的定義,其中組織機構包含用戶(hù)成員和角色成員的關(guān)系,如下界面所示。

 

 組織機構可以修改機構名稱(chēng)和對應的父類(lèi)節點(diǎn),如下界面所示。

 組織機構包含的成員可以添加多個(gè)人員記錄,其中可以對組織成員列表進(jìn)行添加、刪除的操作。。

 單擊機構列表界面中組織成員部分的【添加成員】按鈕,彈出對話(huà)框選擇添加組織成員。

 

組織機構中角色列表界面如下所示,其中可以對角色列表進(jìn)行添加、刪除的操作。

 單擊機構列表界面中角色部分的【添加角色】按鈕,彈出對話(huà)框選擇添加角色。

 

   

5)角色管理

角色信息沒(méi)有層級關(guān)系,可以通過(guò)列表展示。

 其中角色包含權限分配、角色成員和擁有菜單的維護,如下是角色編輯界面,包含角色基本信息、擁有權限、包含成員、擁有菜單的管理等。菜單對于角色來(lái)說(shuō),應該是一種界面資源,可以通過(guò)配置進(jìn)行管理對應角色用戶(hù)的菜單。

編輯界面如下所示。

角色的權限包含系統可以用的權限,并可以勾選為角色設置所需的功能點(diǎn),如下界面所示。

 

 用戶(hù)成員則和機構的用戶(hù)管理一樣,可以指定多個(gè)用戶(hù),這里不再贅述。

而菜單對于角色來(lái)說(shuō),應該是一種界面資源,可以通過(guò)配置進(jìn)行管理對應角色用戶(hù)的菜單,如下界面所示。

 通過(guò)配置好角色包含的菜單,用戶(hù)登錄系統后,系統根據當前用戶(hù)角色具有的菜單項目,動(dòng)態(tài)構建顯示對應的列表菜單及篩選可用路由列表。

 

6)功能管理

 嚴格來(lái)說(shuō),ABP框架并沒(méi)有統一管理好權限功能點(diǎn)的,它沒(méi)有任何表來(lái)存儲這個(gè)功能集合,而是通過(guò)派生AuthorizationProvider的子類(lèi)來(lái)定義權限功能點(diǎn)

我在這個(gè)基礎上引入了一個(gè)權限功能的表用來(lái)存儲功能點(diǎn)的,然后提供管理界面來(lái)動(dòng)態(tài)維護這些功能點(diǎn)。如下界面所示。

 

我們剛才在角色里面看到可以分配的權限內容,就是基于這個(gè)權限表的信息展示。

這樣我們可以動(dòng)態(tài)添加或者批量添加所需要的功能點(diǎn),并且和整個(gè)權限管理模塊串聯(lián)起來(lái),形成一個(gè)完整的控制體系。

 

另外我們還可以通過(guò)左側樹(shù)列表的按鈕管理列表,可以添加、編輯、刪除或級聯(lián)刪除對應的節點(diǎn)及其下面所有子節點(diǎn)。

 

系統登錄后,客戶(hù)端自動(dòng)獲取對應用戶(hù)的角色功能點(diǎn),然后我們每次打開(kāi)一個(gè)新的業(yè)務(wù)窗體,客戶(hù)端會(huì )進(jìn)行界面的權限邏輯控制,如果沒(méi)有權限的,那么不可以訪(fǎng)問(wèn)操作,如下是禁止了產(chǎn)品信息的導入、導出、新增、編輯等操作功能,如下界面所示產(chǎn)品界面被動(dòng)態(tài)取消相關(guān)權限后,界面禁止了某些操作功能。

 

7)菜單管理

系統主界面的開(kāi)發(fā),基本上都是標準的界面,在系統左側放置系統菜單,右側中間區域則放置列表展示內容,但是在系統菜單比較多的時(shí)候,就需要把菜單分為幾級處理。系統菜單在左側放置一個(gè)自定義菜單組件列表,這樣通過(guò)樹(shù)形列表的收縮折疊,就可以放置非常多的菜單功能了。

在A(yíng)BP + Vue + Element 快速開(kāi)發(fā)框架里面,我們BS前端的菜單和其CS的菜單是各自分開(kāi)的,我們在后臺的權限模塊系統中維護菜單內容并分配給對應角色用戶(hù),在用戶(hù)登錄系統后,動(dòng)態(tài)加載菜單展示,并通過(guò)菜單的配置信息,跳轉到對應的路由上去進(jìn)行頁(yè)面展示處理。

菜單資源管理的列表界面界面如下所示

 

單擊左側樹(shù)列表項目,會(huì )在右側展示對應父節點(diǎn)下的菜單列表。

在右側的列表按鈕中,可以對已有的菜單進(jìn)行編輯,菜單編輯界面如下所示。

我們可以通過(guò)選擇圖標按鈕進(jìn)行菜單圖標的選擇,如下是選擇菜單圖片的界面。

 

  

8)系統登錄日志

登錄日志,這個(gè)就是用戶(hù)嘗試登錄的時(shí)候,留下的記錄信息,其中包括用戶(hù)的登錄用戶(hù)名,ID,IP地址、登錄時(shí)間,以及登錄是否成功的狀態(tài)等信息。

這個(gè)登錄日志,就是在系統登錄嘗試的時(shí)候,留下的記錄,可供管理員進(jìn)行跟蹤了解某個(gè)賬戶(hù)的使用情況,也可以根據這些登錄信息進(jìn)行一個(gè)統計報表的分析。

查看明細界面如下所示。

  

9)系統審計日志 

審計日志,設置我們在訪(fǎng)問(wèn)或者調用某個(gè)應用服務(wù)層接口的時(shí)候,橫切面流下的一系列操作記錄,其中記錄我們訪(fǎng)問(wèn)的服務(wù)接口,參數,客戶(hù)端IP地址,訪(fǎng)問(wèn)時(shí)間,以及異常等信息,這些操作都是在A(yíng)BP系統自動(dòng)記錄的,如果我們需要屏蔽某些服務(wù)類(lèi)或者接口,則這些就不會(huì )記錄在里面,否則默認是記錄的。

審計日志的明細展示界面如下所示。

 

10)字典管理

字典管理界面,左側列出字典類(lèi)型,并對字典類(lèi)型下的字典數據進(jìn)行分頁(yè)展示,右側則利用分頁(yè)展示對應字典類(lèi)型的字典數據,字典管理界面如下所示。

字典大類(lèi)在左側列表進(jìn)行維護,可以進(jìn)行新增、編輯、刪除等常規操作。

 而對應字典大類(lèi)的新增或者編輯窗體界面如下。

 批量添加字典內容的界面如下所示。

 

11)產(chǎn)品列表展示

產(chǎn)品列表要展示一個(gè)產(chǎn)品相關(guān)的內容,包括展示產(chǎn)品的圖片,以及產(chǎn)品信息介紹等內容。

展示界面中的頂部,我們利用Element的界面組件定義一個(gè)走馬燈的展示效果,如下所示。

產(chǎn)品信息的另一個(gè)列表展示界面如下所示。

產(chǎn)品信息的編輯界面如下所示。

產(chǎn)品詳細說(shuō)明里面,我們采用富文本編輯,這里采用了 Tinymce 第三方組件來(lái)實(shí)現編輯處理,展示效果如下所示。

產(chǎn)品信息查看界面,可以對圖片進(jìn)行預覽展示操作。

 

12)圖標管理

在VUE+Element 前端應用中,圖標是必不可少點(diǎn)綴界面的元素,因此整合一些常用的圖標是非常必要的,還好Element界面組件里面提供了很多常見(jiàn)的圖標,不過(guò)數量不是很多,應該是300個(gè)左右吧,因此考慮擴展更多圖標,我引入了vue-awesome組件,它利用了Font Awesome的內置圖標,實(shí)現了更多圖標的整合。

Element圖標管理界面如下:

基于Vue-Awesome的圖標管理如下所示。

其中查詢(xún)提供了名稱(chēng)進(jìn)行圖標查詢(xún),以及限制一次性展示多少個(gè),另外提供一個(gè)自定義顏色選項,從而可以改變圖標的展示顏色。