前面介紹了很多ABP系列的文章《ABP框架使用》，一步一步的把我們?nèi)粘ｉ_(kāi)發(fā)中涉及到的Web API服務(wù)構(gòu)建、登錄日志和操作審計(jì)日志、字典管理模塊、省份城市的信息維護(hù)、權(quán)限管理模塊中的組織機(jī)構(gòu)、用戶(hù)、角色、權(quán)限、菜單等內(nèi)容，以及配置管理模塊，界面的高級(jí)查詢(xún)處理等內(nèi)容，并根據(jù)我們?cè)赪inform領(lǐng)域多年的開(kāi)發(fā)經(jīng)驗(yàn)，完成了系統(tǒng)功能在Winform界面下的實(shí)現(xiàn)，并利用工具實(shí)現(xiàn)快速的Winform界面生成工作；而在循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)文章《循序漸進(jìn)VUE+Element》中，則介紹了結(jié)合ABP+Vue+Element來(lái)構(gòu)建BS的前端解決方案，通過(guò)Vue+Element實(shí)現(xiàn)的前端界面展示，界面美觀(guān)大方；而且業(yè)務(wù)內(nèi)容以模塊化組裝的Web界面，非常利于大型復(fù)雜系統(tǒng)的開(kāi)發(fā)，極大提供了效率。
ABP是ASP.NET Boilerplate的簡(jiǎn)稱(chēng)，ABP是一個(gè)開(kāi)源且文檔友好的應(yīng)用程序框架。目前基于.net core5.0基礎(chǔ)上進(jìn)行開(kāi)發(fā)，框架支持SQLServer、Mysql、Oracle等常用數(shù)據(jù)庫(kù)的配置切換。
基于A(yíng)BP框架基礎(chǔ)上，我們整理完善了整個(gè)權(quán)限體系，以及基于這個(gè)基礎(chǔ)上進(jìn)行的業(yè)務(wù)系統(tǒng)快速開(kāi)發(fā)，我們整理后的ABP快速開(kāi)發(fā)框架的架構(gòu)圖示，如下圖所示（以字典模塊為例說(shuō)明）
以上是后端API的框架架構(gòu)，引入了前后端分離的Vue + Element 作為前端技術(shù)路線(xiàn)，那么前后端的邊界則非常清晰，前端可以在通過(guò)網(wǎng)絡(luò)獲取對(duì)應(yīng)的JSON就可以構(gòu)建前端的應(yīng)用了。
在前端處理中，主要就是利用Vuex模式中的Store對(duì)象里實(shí)現(xiàn)對(duì)Action和Mutation的請(qǐng)求處理，獲取數(shù)據(jù)后，實(shí)現(xiàn)對(duì)State狀態(tài)中的數(shù)據(jù)進(jìn)行更新。如果僅僅是當(dāng)前頁(yè)面的數(shù)據(jù)處理，甚至可以不需要存儲(chǔ)State信息，而直接通過(guò)前端封裝的API類(lèi)獲取到返回的數(shù)據(jù)，直接更新到界面視圖上即可。
Vue + Element前端項(xiàng)目的視圖、Store模塊、API模塊、Web API之間關(guān)系如下所示。
前端根據(jù)ABP后端的接口進(jìn)行前端JS端的類(lèi)的封裝處理，引入了ES6類(lèi)的概念實(shí)現(xiàn)業(yè)務(wù)基類(lèi)接口的統(tǒng)一封裝，簡(jiǎn)化代碼。
權(quán)限模塊我們涉及到的用戶(hù)管理、機(jī)構(gòu)管理、角色管理、菜單管理、功能管理、審計(jì)日志、登錄日志等業(yè)務(wù)類(lèi)，那么這些類(lèi)繼承BaseApi，就會(huì)具有相關(guān)的接口了，如下所示繼承關(guān)系。
1）登錄界面
系統(tǒng)登錄界面效果如下所示。
或者
其中里面的文本內(nèi)容，我們都是以國(guó)際化處理內(nèi)容。
2）主體框架界面
主體框架界面采用的是基于后臺(tái)配置的菜單動(dòng)態(tài)生成，左側(cè)是菜單，右邊頂部是特定導(dǎo)航條和內(nèi)容區(qū)。
首頁(yè)內(nèi)容區(qū)包括了一些常規(guī)的統(tǒng)計(jì)展示信息和各種圖表綜合展示內(nèi)容。
我們來(lái)看看圖表展示的效果圖，其中柱狀圖效果如下所示。
餅狀圖效果如下所示。
曲線(xiàn)圖效果如下所示。
其他類(lèi)型，極坐標(biāo)和散點(diǎn)圖形
或者曲線(xiàn)和柱狀圖組合的圖形
其中頂部導(dǎo)航條，提供查詢(xún)、全屏切換、修改布局大小、多語(yǔ)言選擇菜單、頭像及快捷菜單處理。
3）用戶(hù)管理界面
用戶(hù)列表包括分頁(yè)查詢(xún)及列表展示、以及可以利用按鈕進(jìn)行新增、編輯、查看用戶(hù)記錄，或者對(duì)指定用戶(hù)進(jìn)行重置密碼操作。
我們把常規(guī)的列表界面，新增、編輯、查看、導(dǎo)入等界面放在一起，除了列表頁(yè)面，其他內(nèi)容以彈出層對(duì)話(huà)框的方式進(jìn)行處理，如下界面示意所示。
用戶(hù)編輯界面如下所示。
當(dāng)然可以查看這個(gè)用戶(hù)本身?yè)碛械臋?quán)限功能點(diǎn)和擁有的菜單，如下界面所示。
4）組織機(jī)構(gòu)管理
組織機(jī)構(gòu)主要就是一個(gè)層級(jí)的對(duì)象關(guān)系，一般包含但不限于公司、部門(mén)、工作組等的定義，其中組織機(jī)構(gòu)包含用戶(hù)成員和角色成員的關(guān)系，如下界面所示。
組織機(jī)構(gòu)可以修改機(jī)構(gòu)名稱(chēng)和對(duì)應(yīng)的父類(lèi)節(jié)點(diǎn)，如下界面所示。
組織機(jī)構(gòu)包含的成員可以添加多個(gè)人員記錄，其中可以對(duì)組織成員列表進(jìn)行添加、刪除的操作。。
單擊機(jī)構(gòu)列表界面中組織成員部分的【添加成員】按鈕，彈出對(duì)話(huà)框選擇添加組織成員。
組織機(jī)構(gòu)中角色列表界面如下所示，其中可以對(duì)角色列表進(jìn)行添加、刪除的操作。
單擊機(jī)構(gòu)列表界面中角色部分的【添加角色】按鈕，彈出對(duì)話(huà)框選擇添加角色。
5）角色管理
角色信息沒(méi)有層級(jí)關(guān)系，可以通過(guò)列表展示。
其中角色包含權(quán)限分配、角色成員和擁有菜單的維護(hù)，如下是角色編輯界面，包含角色基本信息、擁有權(quán)限、包含成員、擁有菜單的管理等。菜單對(duì)于角色來(lái)說(shuō)，應(yīng)該是一種界面資源，可以通過(guò)配置進(jìn)行管理對(duì)應(yīng)角色用戶(hù)的菜單。
編輯界面如下所示。
角色的權(quán)限包含系統(tǒng)可以用的權(quán)限，并可以勾選為角色設(shè)置所需的功能點(diǎn)，如下界面所示。
用戶(hù)成員則和機(jī)構(gòu)的用戶(hù)管理一樣，可以指定多個(gè)用戶(hù)，這里不再贅述。
而菜單對(duì)于角色來(lái)說(shuō)，應(yīng)該是一種界面資源，可以通過(guò)配置進(jìn)行管理對(duì)應(yīng)角色用戶(hù)的菜單，如下界面所示。
通過(guò)配置好角色包含的菜單，用戶(hù)登錄系統(tǒng)后，系統(tǒng)根據(jù)當(dāng)前用戶(hù)角色具有的菜單項(xiàng)目，動(dòng)態(tài)構(gòu)建顯示對(duì)應(yīng)的列表菜單及篩選可用路由列表。
6）功能管理
嚴(yán)格來(lái)說(shuō)，ABP框架并沒(méi)有統(tǒng)一管理好權(quán)限功能點(diǎn)的，它沒(méi)有任何表來(lái)存儲(chǔ)這個(gè)功能集合，而是通過(guò)派生AuthorizationProvider的子類(lèi)來(lái)定義權(quán)限功能點(diǎn)
我在這個(gè)基礎(chǔ)上引入了一個(gè)權(quán)限功能的表用來(lái)存儲(chǔ)功能點(diǎn)的，然后提供管理界面來(lái)動(dòng)態(tài)維護(hù)這些功能點(diǎn)。如下界面所示。
我們剛才在角色里面看到可以分配的權(quán)限內(nèi)容，就是基于這個(gè)權(quán)限表的信息展示。
這樣我們可以動(dòng)態(tài)添加或者批量添加所需要的功能點(diǎn)，并且和整個(gè)權(quán)限管理模塊串聯(lián)起來(lái)，形成一個(gè)完整的控制體系。
另外我們還可以通過(guò)左側(cè)樹(shù)列表的按鈕管理列表，可以添加、編輯、刪除或級(jí)聯(lián)刪除對(duì)應(yīng)的節(jié)點(diǎn)及其下面所有子節(jié)點(diǎn)。
系統(tǒng)登錄后，客戶(hù)端自動(dòng)獲取對(duì)應(yīng)用戶(hù)的角色功能點(diǎn)，然后我們每次打開(kāi)一個(gè)新的業(yè)務(wù)窗體，客戶(hù)端會(huì)進(jìn)行界面的權(quán)限邏輯控制，如果沒(méi)有權(quán)限的，那么不可以訪(fǎng)問(wèn)操作，如下是禁止了產(chǎn)品信息的導(dǎo)入、導(dǎo)出、新增、編輯等操作功能，如下界面所示產(chǎn)品界面被動(dòng)態(tài)取消相關(guān)權(quán)限后，界面禁止了某些操作功能。
7）菜單管理
系統(tǒng)主界面的開(kāi)發(fā)，基本上都是標(biāo)準(zhǔn)的界面，在系統(tǒng)左側(cè)放置系統(tǒng)菜單，右側(cè)中間區(qū)域則放置列表展示內(nèi)容，但是在系統(tǒng)菜單比較多的時(shí)候，就需要把菜單分為幾級(jí)處理。系統(tǒng)菜單在左側(cè)放置一個(gè)自定義菜單組件列表，這樣通過(guò)樹(shù)形列表的收縮折疊，就可以放置非常多的菜單功能了。
在A(yíng)BP + Vue + Element 快速開(kāi)發(fā)框架里面，我們BS前端的菜單和其CS的菜單是各自分開(kāi)的，我們?cè)诤笈_(tái)的權(quán)限模塊系統(tǒng)中維護(hù)菜單內(nèi)容并分配給對(duì)應(yīng)角色用戶(hù)，在用戶(hù)登錄系統(tǒng)后，動(dòng)態(tài)加載菜單展示，并通過(guò)菜單的配置信息，跳轉(zhuǎn)到對(duì)應(yīng)的路由上去進(jìn)行頁(yè)面展示處理。
菜單資源管理的列表界面界面如下所示
單擊左側(cè)樹(shù)列表項(xiàng)目，會(huì)在右側(cè)展示對(duì)應(yīng)父節(jié)點(diǎn)下的菜單列表。
在右側(cè)的列表按鈕中，可以對(duì)已有的菜單進(jìn)行編輯，菜單編輯界面如下所示。
我們可以通過(guò)選擇圖標(biāo)按鈕進(jìn)行菜單圖標(biāo)的選擇，如下是選擇菜單圖片的界面。
8）系統(tǒng)登錄日志
登錄日志，這個(gè)就是用戶(hù)嘗試登錄的時(shí)候，留下的記錄信息，其中包括用戶(hù)的登錄用戶(hù)名，ID，IP地址、登錄時(shí)間，以及登錄是否成功的狀態(tài)等信息。
這個(gè)登錄日志，就是在系統(tǒng)登錄嘗試的時(shí)候，留下的記錄，可供管理員進(jìn)行跟蹤了解某個(gè)賬戶(hù)的使用情況，也可以根據(jù)這些登錄信息進(jìn)行一個(gè)統(tǒng)計(jì)報(bào)表的分析。
查看明細(xì)界面如下所示。
9）系統(tǒng)審計(jì)日志
審計(jì)日志，設(shè)置我們?cè)谠L(fǎng)問(wèn)或者調(diào)用某個(gè)應(yīng)用服務(wù)層接口的時(shí)候，橫切面流下的一系列操作記錄，其中記錄我們?cè)L問(wèn)的服務(wù)接口，參數(shù)，客戶(hù)端IP地址，訪(fǎng)問(wèn)時(shí)間，以及異常等信息，這些操作都是在A(yíng)BP系統(tǒng)自動(dòng)記錄的，如果我們需要屏蔽某些服務(wù)類(lèi)或者接口，則這些就不會(huì)記錄在里面，否則默認(rèn)是記錄的。
審計(jì)日志的明細(xì)展示界面如下所示。
10）字典管理
字典管理界面，左側(cè)列出字典類(lèi)型，并對(duì)字典類(lèi)型下的字典數(shù)據(jù)進(jìn)行分頁(yè)展示，右側(cè)則利用分頁(yè)展示對(duì)應(yīng)字典類(lèi)型的字典數(shù)據(jù)，字典管理界面如下所示。
字典大類(lèi)在左側(cè)列表進(jìn)行維護(hù)，可以進(jìn)行新增、編輯、刪除等常規(guī)操作。
而對(duì)應(yīng)字典大類(lèi)的新增或者編輯窗體界面如下。
批量添加字典內(nèi)容的界面如下所示。
11）產(chǎn)品列表展示
產(chǎn)品列表要展示一個(gè)產(chǎn)品相關(guān)的內(nèi)容，包括展示產(chǎn)品的圖片，以及產(chǎn)品信息介紹等內(nèi)容。
展示界面中的頂部，我們利用Element的界面組件定義一個(gè)走馬燈的展示效果，如下所示。
產(chǎn)品信息的另一個(gè)列表展示界面如下所示。
產(chǎn)品信息的編輯界面如下所示。
產(chǎn)品詳細(xì)說(shuō)明里面，我們采用富文本編輯，這里采用了 Tinymce 第三方組件來(lái)實(shí)現(xiàn)編輯處理，展示效果如下所示。
產(chǎn)品信息查看界面，可以對(duì)圖片進(jìn)行預(yù)覽展示操作。
12）圖標(biāo)管理
在VUE+Element 前端應(yīng)用中，圖標(biāo)是必不可少點(diǎn)綴界面的元素，因此整合一些常用的圖標(biāo)是非常必要的，還好Element界面組件里面提供了很多常見(jiàn)的圖標(biāo)，不過(guò)數(shù)量不是很多，應(yīng)該是300個(gè)左右吧，因此考慮擴(kuò)展更多圖標(biāo)，我引入了vue-awesome組件，它利用了Font Awesome的內(nèi)置圖標(biāo)，實(shí)現(xiàn)了更多圖標(biāo)的整合。
Element圖標(biāo)管理界面如下：
基于Vue-Awesome的圖標(biāo)管理如下所示。
其中查詢(xún)提供了名稱(chēng)進(jìn)行圖標(biāo)查詢(xún)，以及限制一次性展示多少個(gè)，另外提供一個(gè)自定義顏色選項(xiàng)，從而可以改變圖標(biāo)的展示顏色。
