1）Web API后端的架構(gòu)設計
這個是屬于前端、后端完全分離的架構(gòu)設計，后端采用基于Asp.net的Web API技術，并提供按域來管理API的分類，Web API如下架構(gòu)所示。
通過上面的架構(gòu)設計，可以看出，底層BLL、DAL、Entity、IDAL、公用類庫等分層都是完全通用的，不同的是，我們后端只是提供Web API的接口服務給前端，這個和我們的《ABP框架使用》的理念一致，前后端分離。 為了更好的進行后端Web API控制器的相關方法的封裝處理，我們把一些常規(guī)的接口處理放在BaseApiController里面，而把基于業(yè)務表的操作接口放在BusinessController里面定義，如下所示。
而Vue&Element的前端的架構(gòu)設計，也借鑒了我們ABP框架的前端管理部分，Vue&Element的前端的架構(gòu)設計如下所示。
引入了前后端分離的Vue + Element 作為前端技術路線，那么前后端的邊界則非常清晰，前端可以在通過網(wǎng)絡獲取對應的JSON就可以構(gòu)建前端的應用了。 一般來說，我們頁面模塊可能會涉及到Store模塊，用來存儲對應的狀態(tài)信息，也可能是直接訪問API模塊，實現(xiàn)數(shù)據(jù)的調(diào)用并展示。在頁面開發(fā)過程中，多數(shù)情況下，不需要Store模塊進行交互，一般只需要存儲對應頁面數(shù)據(jù)為全局數(shù)據(jù)狀態(tài)的情況下，才可能啟用Store模塊的處理。通過WebProxy代理的處理，我們可以很容易在前端中實現(xiàn)跨域的處理，不同的路徑調(diào)用不同的域名地址API都可以，最終轉(zhuǎn)換為本地的API調(diào)用，這就是跨域的處理操作。
前端根據(jù)ABP后端的接口進行前端JS端的類的封裝處理，引入了ES6類的概念實現(xiàn)業(yè)務基類接口的統(tǒng)一封裝，簡化代碼。 權限模塊我們涉及到的用戶管理、機構(gòu)管理、角色管理、菜單管理、功能管理、操作日志、登錄日志等業(yè)務類，那么這些類繼承BaseApi，就會具有相關的接口了，如下所示繼承關系。
主體框架界面采用的是基于后臺配置的菜單動態(tài)生成，左側(cè)是菜單，右邊頂部是特定導航條和內(nèi)容區(qū)，這個和我們ABP框架的前端界面是一致的。 系統(tǒng)主界面的開發(fā)，基本上都是標準的界面，在系統(tǒng)左側(cè)放置系統(tǒng)菜單，右側(cè)中間區(qū)域則放置列表展示內(nèi)容，但是在系統(tǒng)菜單比較多的時候，就需要把菜單分為幾級處理。系統(tǒng)菜單在左側(cè)放置一個自定義菜單組件列表，這樣通過樹形列表的收縮折疊，就可以放置非常多的菜單功能了。
用戶管理界面，沿襲Bootstrap框架的布局進行管理，通過用戶機構(gòu)方式，快速展示用戶分頁列表，如下界面所示。
機構(gòu)管理界面如下所示。
角色管理界面如下所示。
其角色的編輯界面如下所示，包括了基礎信息、用戶、菜單、權限等項目。
整個系統(tǒng)的菜單，既可以通過默認Mock的初始菜單，也可以通過后端API獲得的菜單資源，動態(tài)在界面上進行展示，系統(tǒng)界面左側(cè)的菜單是動態(tài)獲取并展示出來的，結(jié)合路由的判斷可以限制用戶訪問的菜單權限。菜單管理界面如下所示。
菜單資源在角色管理中分配給具體角色，即可實現(xiàn)對菜單的動態(tài)控制管理了。 前端的界面管理，依舊可以通過分拆模塊的方式，完成更加方便的組合處理
利用模塊化的處理方式，我們可以把界面部分內(nèi)容作為一個組件進行封裝處理，如在權限管理中，我們定義了一部分重用的組件界面，如下所示。
定義好各種界面的自定義組件后，在主界面中進行Import導入使用即可，非常方便重用。