在隨筆《基于SqlSugar的開發框架循序漸進介紹（28）-- 快速構建系統引數管理界面》中介紹了基于SqlSugar開發框架，構建系統引數管理的后端API部分，以及WInform界面部分內容，本篇隨筆介紹基于Vue3+ElementPlus的前端界面開發程序，
1、Winform端界面的回顧
系統引數的資訊，設計為包含一個大類引數目錄和一個具體的引數專案，如下基于SQLServer的資料庫表設計所示（基于PoweDesigner設計，便于生成Sql執行），
利用現有表結構資訊，基于代碼生成工具快是生成相關的業務類檔案，合并到系統框架中就可以了，
一般的業務代碼都需要有CRUD等常規操作的代碼，不過基于框架的基礎上，我們只需要生成一個簡單的類，繼承自基類就默認具有了這些操作，不需要重復撰寫代碼，簡化了代碼的處理并提高開發效率，
我們利用現有表結構資訊，基于代碼生成工具快是生成相關的業務類檔案， 直接復制Core目錄到解決方案專案上就可以了，如下所示，
Winform部分的界面，選擇對應的界面生成【SqlSugar框架Winform界面生成】生成，
在彈出的【常規Winform界面生成】面板中，勾選相關的設定資訊，定制UI界面，如下界面效果所示，
生成基礎界面后，進行一定的微調處理，增加左側樹串列展示，最終編輯明細部分的界面效果如下所示，
2、Vue3+ElementPlus的前端界面開發
參考以上Winform界面的設計思路，我們也可以在Vue3+ElementPlus的前端界面上做類似的布局處理即可，
通用為了提高開發效率，Vue3+ElementPlus前端界面和前端的API訪問類，我們同樣通過配套的代碼生成工具進行生成，
為了更好的進行相關界面的開發，我們設計了兩套布局方式，一個是查詢條件+串列展示，一個是樹+查詢條件+串列展示的布局，方便實際使用，
最終生成api訪問得Typescript類和Vue3的視圖檔案，如下界面所示，
把視圖檔案和Api訪問類檔案，合并到專案目錄中去，然后對視圖檔案適當進行一定的查詢條件調整處理，
API類由于繼承了基礎BaseApi類，因此不需要額外的處理常規的CRUD操作方法，類似下面的關系處理，
BaseApi的ES6類里面定義了對應Web API基類里面的操作方法，如下所示，
因此生成的API類直接復制過去就可以了，如下代碼所示，
而對于視圖代碼的處理，我們已經生成了相關的視圖檔案代碼，因此進行一定的微調，把多余的條件放到折疊欄目里面即可，如下代碼所示，
同時我們在樹串列中，增加一些操作引數目錄的處理操作，
基本上界面部分就差不多了，
另外，和其他常規開發一樣，我們需要在路由器中增加新增的視圖路由資訊，以便前端能夠進行訪問，如下所示，
默認的入口為目錄的index.vue的檔案
最終界面效果如下所示，
編輯系統引數的界面效果如下所示
查看詳細的界面效果類似
因此兩種（Winform CS前端和BS的Vue3+Element前端）不同前端界面的效果類似，達到了多端統一效果，快速開發的目的，
結合框架的開發，可以讓我們事半功倍，大多數的時間，可以專注在自定義UI的改進，以及業務邏輯的處理上，常規的界面開發，會變得容易簡單化，
專注于代碼生成工具、.Net/.NetCore 框架架構及軟體開發，以及各種Vue.js的前端技術應用，著有Winform開發框架/混合式開發框架、微信開發框架、Bootstrap開發框架、ABP開發框架、SqlSugar開發框架等框架產品， 轉載請注明出處：撰寫人：伍華聰 http://www.iqidi.com
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551769.html
標籤：其他
上一篇：記錄-Symbol學習筆記
下一篇：返回列表