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查詢來生成一個數據查詢列表組件：