世界上唯一不變的東西就是變化，我們通過總結變化的規律，以規律來應付變化，一切事情處理起來事半功倍，我們在開發后端服務代碼，前端界面代碼的時候，界面都是依照一定的規律進行變化的，我們通過抽取資料庫資訊，以變化規律擁抱變化的內容，如對于服務端來說，后端代碼中類的繼承關系和特殊的介面名稱規律，我們可以根據用戶選中的表，獲取表之間的欄位和關系資訊，生成各種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的前端界面，能夠是我們提高代碼的開發效率，以及降低出錯的機會，同時可以很好的統一整套界面的界面樣式和做法，事半功倍，
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/106596.html
標籤：其他
上一篇：物件關閉，不允許進行操作。或者“連接無法用于此操作，在此背景關系他可能已經被關倍訓無效”
下一篇：MFC中通過訊息控制電機動作