使用代碼生成工具快速生成基於ABP框架的Vue+Element的前端界面

世界上惟一不變的東西就是變化，咱們經過總結變化的規律，以規律來應付變化，一切事情處理起來事半功倍。咱們在開發後端服務代碼，前端界面代碼的時候，界面都是依照必定的規律進行變化的，咱們經過抽取數據庫信息，以變化規律擁抱變化的內容。如對於服務端來講，後端代碼中類的繼承關係和特殊的接口名稱規律，咱們能夠根據用戶選中的表，獲取表之間的字段和關係信息，生成各類DTO和接口類等代碼文件；而前端界面來講，也是依照數據庫的表信息、字段信息等內容，實現查詢區域、查詢列表、新增界面、編輯界面、查看界面、導入導出界面等內容進行相應的生成，並整合相關的界面事件關係，能夠實現相關處理的按鈕動做處理。本篇隨筆介紹如何使用代碼生成工具快速生成基於ABP框架的Vue+Element的前端界面。

一、ABP框架架構及前端代碼生成分析

ABP框架是基於最新.net core 的技術方向，應用很是普遍的一個技術框架系列，它整合了不少.net core 領域相關開發技術，後端主要是發佈Web API方式實現數據和前端的交互的，所以前端能夠基於Web API基礎上實現多種平臺的對接，能夠是常規的BS框架，如Vue+Element 前端路線，也能夠是Winform/WPF的前端框架接入等。ABP框架的大概架構以下所示，頂端是展現層的各類前端的接入方式。

後端內容，我在前面一些隨筆介紹比較多了，並且也在較早的時候，提供了ABP框架的快速代碼生成《利用代碼生成工具生成基於ABP框架的代碼》，前端部分，Winform的代碼生成也在前面隨筆進行了使用介紹《ABP開發框架先後端開發系列---（8）ABP框架之Winform界面的開發過程》，本篇隨筆主要介紹ABP框架的Vue+Element前端界面的快速生成操做。

和ABP框架的Winform界面生成相似，在實現代碼生成以前，咱們須要有一套成熟的界面組織方式，也就是咱們常規的界面佈局處理，依照這些爲基準，咱們使用代碼生成工具的模板引擎，編寫對應的模板，而後結合代碼工具內核提供的數據庫信息，整合生成對應的代碼文件夾和文件便可。

前面介紹過ABP後端框架，ABP+Swagger UI 負責API接口的開發和公佈，以下是API接口的管理界面。

ABP框架後端接口的常規處理，如增刪改查等接口命名都一致，參數方面也比較一致，所以給咱們提供更好的API客戶端類的封裝提供更好的抽象模式，咱們把常規的增刪改查等常規接口封裝在基類，子類只須要有繼承關係便可，除非自定義接口函數，通常不須要額外增長前端的js代碼。

若有DIctType、DictData等業務類，那麼這些類繼承BaseApi，就會具備相關的接口了，以下所示繼承關係。

而視圖是Vue +Element的組合體，通常爲常規的表格列表，包含查詢條件，以及整合增刪改查的功能入口，以下視圖界面所示。 

若是帶有樹列表的需求，最好可以整合樹列表的生成處理界面，以及SplitPanel的風格區域管理。

 對於列表視圖界面來講，咱們通常整合新增、編輯、查看、導入導出等常規界面在一塊兒，經過不一樣的彈出對話框處理便可實現各類業務處理的界面入口。

基於上面的介紹，咱們只須要提供兩個部分，一個是Api類的繼承子類，一個是視圖界面的內容，整合多個對話框和對應按鈕操做入口的處理界面，以下所示包含Api封裝類文件和Vue + Element界面視圖。

 

二、 使用代碼生成工具快速生成基於ABP框架的Vue+Element的前端界面

有了上面的介紹，咱們已經知道須要生成那些文件了，所以在代碼生成工具Database2Sharp上增長一個功能入口，編寫好對應的模板代碼，而後整合規則生成對應文件便可，這裏進行相關使用功能的介紹。

首先，咱們打開代碼生成工具，展開對應數據庫的表信息，以下界面所示。

而後在表或者數據庫上右鍵 出現菜單，選擇【代碼生成】【ABP的Vue+Element界面代碼】，以下所示。

接着在出來的對話框上選擇對應數據庫和表進行生成，一步步執行便可。

 在最後的界面上，會出來選擇生成代碼的表，以及須要選擇對應的佈局，包括一個是普通查詢列表的界面，以及一個左側帶有樹形列表的界面兩個佈局，咱們根據須要選擇便可。

 生成的文件裏面，包括有JS文件

以及對應目錄下的視圖文件，後綴名爲vue

咱們把根目錄Src下的文件夾及相關文件複製到VS Code裏面，能夠默認路徑，也能夠把視圖文件歸類本身喜歡的目錄裏面（我這裏調整路徑menu/index爲security/menu了），並調整路由文件，增長對應的視圖入口

前端會根據用戶包含的可訪問菜單列表，自動過濾對應的路由，實現咱們菜單入口訪問對應路由了。 

整合編譯前端，啓動後端ABP服務，並運行查看咱們剛剛建立的前端界面，以下所示。

原始的查看明細界面以下所示

生成界面，不管從總體佈局，以及列表的展現，和各個功能按鈕入口，都已經給咱們完善好了，咱們通常仍是須要進行調整一下。

簡化下界面查詢條件，以及整理一下列表展現內容，獲得調整界面以下所示。

調整後的查看明細界面以下所示。

 使用代碼生成工具快速生成基於ABP框架的Vue+Element的前端界面，可以是咱們提升代碼的開發效率，以及下降出錯的機會，同時能夠很好的統一整套界面的界面樣式和作法，事半功倍。