VUE+Element 前端應用開發框架功能介紹

前面介紹了很多ABP系列的文章《ABP框架使用》，一步一步的把我們日常開發中涉及到的Web API服務構建、登錄日誌和操作審計日誌、字典管理模塊、省份城市的信息維護、許可權管理模塊中的組織機構、用戶、角色、許可權、菜單等內容，以及配置管理模塊，界面的高級查詢處理等內容，並根據我們在Winform領域多年... ...

前面介紹了很多ABP系列的文章《ABP框架使用》，一步一步的把我們日常開發中涉及到的Web API服務構建、登錄日誌和操作審計日誌、字典管理模塊、省份城市的信息維護、許可權管理模塊中的組織機構、用戶、角色、許可權、菜單等內容，以及配置管理模塊，界面的高級查詢處理等內容，並根據我們在Winform領域多年的開發經驗，完成了系統功能在Winform界面下的實現，並利用工具實現快速的Winform界面生成工作；而在循序漸進VUE+Element 前端應用開發文章《循序漸進VUE+Element》中，則介紹了結合ABP+Vue+Element來構建BS的前端解決方案，通過Vue+Element實現的前端界面展示，界面美觀大方；而且業務內容以模塊化組裝的Web界面，非常利於大型複雜系統的開發，極大提供了效率。

1、ABP框架背景知識介紹

ABP是ASP.NET Boilerplate的簡稱，ABP是一個開源且文檔友好的應用程式框架。ABP不僅僅是一個框架，它還提供了一個最徍實踐的基於領域驅動設計(DDD)的體繫結構模型。學習使用ABP框架也有一段時間了,一直想全面瞭解下這個框架的整個來龍去脈，並把想把它使用歷程整理成一個系列出來，不過一直沒有下筆來寫這篇文章的開篇，就是希望能夠深入瞭解，再深入瞭解一些，希望自己能夠理解透徹一些，不能誤人子弟，也不想和網上千篇一律的翻譯官網的內容，官網的英文介紹也已經很詳細了，於是我覺得還是以實際使用的過程進行一定的整理會更好。

初次瞭解ABP框架，對它還是非常驚艷的，它基本上是.NET 領域架構的集大成者，幾乎囊括了我們.NET領域排的上名的各種技術應用，而且它本身可以支持.net framework和.net core兩種技術流派，對它的介紹也是非常感興趣。

1）ABP框架的特點

我們來大概瞭解下ABP框架涉及到的內容。

依賴註入，這個部分使用 Castle windsor （依賴註入容器）來實現依賴註入，這個也是我們經常使用IOC來處理的方式；
Repository倉儲模式，已實現了Entity Framework、NHibernate、MangoDB、記憶體資料庫等，倉儲模式可以快速實現對數據介面的調用；
身份驗證與授權管理，可以使用聲明特性的方式對用戶是否登錄，或者介面的許可權進行驗證，可以通過一個很細粒度的方式，對各個介面的調用許可權進行設置；
數據有效性驗證，ABP自動對介面的輸入參數對象進行非空判斷，並且可以根據屬性的申請信息對屬性的有效性進行校驗；
審計日誌記錄，也就是記錄我們對每個介面的調用記錄，以及對記錄的創建、修改、刪除人員進行記錄等處理；
Unit Of Work工作單元模式，為應用層和倉儲層的方法自動實現資料庫事務，預設所有應用服務層的介面，都是以工作單元方式運行，即使它們調用了不同的存儲對象處理，都是處於一個事務的邏輯裡面；
異常處理，ABP框架提供了一整套比較完善的流程處理操作，可以很方便的對異常進行進行記錄和傳遞；
日誌記錄，我麽可以利用Log4Net進行常規的日誌記錄，方便我們跟蹤程式處理信息和錯誤信息；
多語言/本地化支持，ABP框架對多語言的處理也是比較友好的，提供了對XML、JSON語言信息的配置處理；
Auto Mapping自動映射，這個是ABP的很重要的對象隔離概念，通過使用AutoMaper來實現域對象和DTO對象的屬性映射，可以隔離兩者的邏輯關係，但是又能輕鬆實現屬性信息的賦值；
動態Web API層，利用這個動態處理，可以把Application Service 直接發佈為Web API層，而不需要在累贅的為每個業務對象手工創建一個Web API的控制器，非常方便；
動態JavaScript的AJax代理處理，可以自動創建Javascript 的代理層來更方便使用Web Api，這個在Web層使用。

除了這些重要特性外，ABP框架還有很多一些特別的功能或者概念。

多租戶支持（每個租戶的數據自動隔離，業務模塊開發者不需要在保存和查詢數據時寫相應代碼；
軟刪除支持（繼承相應的基類或實現相應介面，會自動實現軟刪除）
系統設置存取管理（系統級、租戶級、用戶級，作用範圍自動管理）
EventBus實現領域事件(Domain Events)
模塊以及模塊的依賴關係實現插件化的模塊處理等等

ABP框架主要還是基於領域驅動的理念來構建整個架構的，其中領域驅動包含的概念有域對象Entities、倉儲對象Repositories、域服務介面層Domain Services、域事件Domain Events、應用服務介面Application Services、數據傳輸對象DTOs等。

ABP官方網站：http://www.aspnetboilerplate.com，從裡面可以查看很詳細的案例和文檔說明，可以根據需要下載不同類型的基礎框架。

ABP GitHub源碼地址：https://github.com/aspnetboilerplate，可以下載整個基礎的框架內容，以及相關的樣板案例代碼。

基於ABP框架基礎上，我們整理完善了整個許可權體系，以及基於這個基礎上進行的業務系統快速開發，我們整理後的ABP快速開發框架的架構圖示，如下圖所示（以字典模塊為例說明）

以上是後端API的框架架構，引入了前後端分離的Vue + Element 作為前端技術路線，那麼前後端的邊界則非常清晰，前端可以在通過網路獲取對應的JSON就可以構建前端的應用了。

在前端處理中，主要就是利用Vuex模式中的Store對象里實現對Action和Mutation的請求處理，獲取數據後，實現對State狀態中的數據進行更新。如果僅僅是當前頁面的數據處理，甚至可以不需要存儲State信息，而直接通過前端封裝的API類獲取到返回的數據，直接更新到界面視圖上即可。

Vue + Element前端項目的視圖、Store模塊、API模塊、Web API之間關係如下所示。

前端根據ABP後端的介面進行前端JS端的類的封裝處理，引入了ES6類的概念實現業務基類介面的統一封裝，簡化代碼。

許可權模塊我們涉及到的用戶管理、機構管理、角色管理、菜單管理、功能管理、審計日誌、登錄日誌等業務類，那麼這些類繼承BaseApi，就會具有相關的介面了，如下所示繼承關係。

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

1）登錄界面

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

或者

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

2）主體框架界面

主體框架界面採用的是基於後臺配置的菜單動態生成，左側是菜單，右邊頂部是特定導航條和內容區。

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

我們來看看圖表展示的效果圖，其中柱狀圖效果如下所示。

餅狀圖效果如下所示。

曲線圖效果如下所示。

其他類型，極坐標和散點圖形

或者曲線和柱狀圖組合的圖形

其中頂部導航條，提供查詢、全屏切換、修改佈局大小、多語言選擇菜單、頭像及快捷菜單處理。

3）用戶管理界面

用戶列表包括分頁查詢及列表展示、以及可以利用按鈕進行新增、編輯、查看用戶記錄，或者對指定用戶進行重置密碼操作。

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

用戶編輯界面如下所示。

當然可以查看這個用戶本身擁有的許可權功能點和擁有的菜單，如下界面所示。

4）組織機構管理

組織機構主要就是一個層級的對象關係，一般包含但不限於公司、部門、工作組等的定義，其中組織機構包含用戶成員和角色成員的關係，如下界面所示。

組織機構可以修改機構名稱和對應的父類節點，如下界面所示。

組織機構包含的成員可以添加多個人員記錄，其中可以對組織成員列表進行添加、刪除的操作。。

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

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

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

5）角色管理

角色信息沒有層級關係，可以通過列表展示。

其中角色包含許可權分配、角色成員和擁有菜單的維護，如下是角色編輯界面，包含角色基本信息、擁有許可權、包含成員、擁有菜單的管理等。菜單對於角色來說，應該是一種界面資源，可以通過配置進行管理對應角色用戶的菜單。

編輯界面如下所示。

角色的許可權包含系統可以用的許可權，並可以勾選為角色設置所需的功能點，如下界面所示。

用戶成員則和機構的用戶管理一樣，可以指定多個用戶，這裡不再贅述。

而菜單對於角色來說，應該是一種界面資源，可以通過配置進行管理對應角色用戶的菜單，如下界面所示。

通過配置好角色包含的菜單，用戶登錄系統後，系統根據當前用戶角色具有的菜單項目，動態構建顯示對應的列表菜單及篩選可用路由列表。

6）功能管理

嚴格來說，ABP框架並沒有統一管理好許可權功能點的，它沒有任何表來存儲這個功能集合，而是通過派生AuthorizationProvider的子類來定義許可權功能點

我在這個基礎上引入了一個許可權功能的表用來存儲功能點的，然後提供管理界面來動態維護這些功能點。如下界面所示。

我們剛纔在角色裡面看到可以分配的許可權內容，就是基於這個許可權表的信息展示。

這樣我們可以動態添加或者批量添加所需要的功能點，並且和整個許可權管理模塊串聯起來，形成一個完整的控制體系。

另外我們還可以通過左側樹列表的按鈕管理列表，可以添加、編輯、刪除或級聯刪除對應的節點及其下麵所有子節點。

系統登錄後，客戶端自動獲取對應用戶的角色功能點，然後我們每次打開一個新的業務窗體，客戶端會進行界面的許可權邏輯控制，如果沒有許可權的，那麼不可以訪問操作，如下是禁止了產品信息的導入、導出、新增、編輯等操作功能，如下界面所示產品界面被動態取消相關許可權後，界面禁止了某些操作功能。

7）菜單管理

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

在ABP + Vue + Element 快速開發框架裡面，我們BS前端的菜單和其CS的菜單是各自分開的，我們在後臺的許可權模塊系統中維護菜單內容並分配給對應角色用戶，在用戶登錄系統後，動態載入菜單展示，並通過菜單的配置信息，跳轉到對應的路由上去進行頁面展示處理。

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

單擊左側樹列表項目，會在右側展示對應父節點下的菜單列表。

在右側的列表按鈕中，可以對已有的菜單進行編輯，菜單編輯界面如下所示。

我們可以通過選擇圖標按鈕進行菜單圖標的選擇，如下是選擇菜單圖片的界面。

8）系統登錄日誌

登錄日誌，這個就是用戶嘗試登錄的時候，留下的記錄信息，其中包括用戶的登錄用戶名，ID，IP地址、登錄時間，以及登錄是否成功的狀態等信息。

這個登錄日誌，就是在系統登錄嘗試的時候，留下的記錄，可供管理員進行跟蹤瞭解某個賬戶的使用情況，也可以根據這些登錄信息進行一個統計報表的分析。

查看明細界面如下所示。

9）系統審計日誌

審計日誌，設置我們在訪問或者調用某個應用服務層介面的時候，橫切麵流下的一系列操作記錄，其中記錄我們訪問的服務介面，參數，客戶端IP地址，訪問時間，以及異常等信息，這些操作都是在ABP系統自動記錄的，如果我們需要屏蔽某些服務類或者介面，則這些就不會記錄在裡面，否則預設是記錄的。

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

10）字典管理

字典管理界面，左側列出字典類型，並對字典類型下的字典數據進行分頁展示，右側則利用分頁展示對應字典類型的字典數據，字典管理界面如下所示。

字典大類在左側列表進行維護，可以進行新增、編輯、刪除等常規操作。

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

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

11）產品列表展示

產品列表要展示一個產品相關的內容，包括展示產品的圖片，以及產品信息介紹等內容。

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

產品信息的另一個列表展示界面如下所示。

產品信息的編輯界面如下所示。

產品詳細說明裡面，我們採用富文本編輯，這裡採用了 Tinymce 第三方組件來實現編輯處理，展示效果如下所示。

產品信息查看界面，可以對圖片進行預覽展示操作。

12）圖標管理

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

Element圖標管理界面如下：