BeetleX之Vue ElementUI生成工具
BeetleX.WebFamily在新版本的功能中引入了一個全新的功能,通過這一功能可以大大節省UI的開發工作量。組件集成了一個圖形化的UI編輯器,可以連接資料庫對數據表或查詢快速度生成編輯和數據查詢的VUE組件。
UI編輯器基於ElementUI來制定,可以快速度生成基於ElementUI的數據編輯和數據查詢組件;在數據編輯上還支援完整 的數據驗證配置等功能,從而通過編輯器即可以制定完整帶驗證功能的數據表單。
使用
通過Nuget引用WebFamily的最新版本,引用組件後在控制台的Main方法編寫以下程式碼:
static void Main(string[] args) { WebHost host = new WebHost(); host.Setting(o => { o.SetDebug(); o.Port = 80; o.LogLevel = LogType.Info; o.LogToConsole = true; }) .UseFontawesome() .UseElement(PageStyle.Element) .Initialize((http, vue, resoure) => { vue.Debug(); }).Run(); }
以上程式碼是在80埠開啟一個HTTP服務,開啟後訪問得到一個組件生成的默認頁面。
以上是服務運行成功的情況,接下來可以訪問/uieditor/路徑來訪問UI編輯器
生成介面
組件提供了快速的數據編輯和數據列表生成功能,支援的基礎數據控制項包括ElementUI所提供的基礎控制,包括有文本框架,多選,下拉,級聯等等。
以上是生成一個簡單的登陸組件。
資料庫生成
組件支援通過資料庫來生成操作介面,組件支援mssql,mysql,pgsql和sqlite等數據的表結構和查詢來生成相應的編輯和查詢組件。
可以通過資料庫的數據表或SQL查詢來選擇相應處理的欄位
選擇欄位後可以根據自己的需要選擇相關欄位的編輯控制和驗證規則,然後生成編輯組件即可。接下來通SQL查詢來生成一個數據查詢列表組件: