BeetleX之Vue ElementUI生成工具

beetlex發表於2021-06-10
VueUI

        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查詢來生成一個資料查詢列表元件：

 

相關文章