世界上唯一不變的東西就是變化，我們通過總結變化的規律，以規律來應付變化，一切事情處理起來事半功倍。我們在開發後端服務程式碼，前端介面程式碼的時候，介面都是依照一定的規律進行變化的，我們通過抽取資料庫資訊，以變化規律擁抱變化的內容。如對於服務端來說，後端程式碼中類的繼承關係和特殊的介面名稱規律，我們可以根據使用者選中的表，獲取表之間的欄位和關係資訊，生成各種DTO和介面類等程式碼檔案；而前端介面來說，也是依照資料庫的表資訊、欄位資訊等內容，實現查詢區域、查詢列表、新增介面、編輯介面、檢視介面、匯入匯出介面等內容進行相應的生成，並整合相關的介面事件關係，可以實現相關處理的按鈕動作處理。本篇隨筆介紹如何使用程式碼生成工具快速生成基於ABP框架的Vue+Element的前端介面。

1、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介面檢視。

2、 使用程式碼生成工具快速生成基於ABP框架的Vue+Element的前端介面

有了上面的介紹，我們已經知道需要生成那些檔案了，因此在程式碼生成工具Database2Sharp上增加一個功能入口，編寫好對應的模板程式碼，然後整合規則生成對應檔案即可，這裡進行相關使用功能的介紹。

首先，我們開啟程式碼生成工具，展開對應資料庫的表資訊，如下介面所示。

然後在表或者資料庫上右鍵 出現選單，選擇【程式碼生成】【ABP的Vue+Element介面程式碼】，如下所示。

接著在出來的對話方塊上選擇對應資料庫和表進行生成，一步步執行即可。

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

 生成的檔案裡面，包括有JS檔案

以及對應目錄下的檢視檔案，字尾名為vue

我們把根目錄Src下的資料夾及相關檔案複製到VS Code裡面，可以預設路徑，也可以把檢視檔案歸類自己喜歡的目錄裡面（我這裡調整路徑menu/index為security/menu了），並調整路由檔案，增加對應的檢視入口

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

整合編譯前端，啟動後端ABP服務，並執行檢視我們剛剛建立的前端介面，如下所示。

原始的檢視明細介面如下所示

生成介面，無論從整體佈局，以及列表的展示，和各個功能按鈕入口，都已經給我們完善好了，我們一般還是需要進行調整一下。

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

調整後的檢視明細介面如下所示。

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