前言
什麼是低程式碼？低程式碼開發是種通過視覺化進行應用程式開發的方法，使具有不同經驗水平的開發人員可以通過圖形化的使用者介面，使用拖拽元件和模型驅動的邏輯來建立網頁和移動應用程式。這些工具通過減少手工編碼的工作量來幫助快速開發應用程式，提高開發效率。
這是從網上抄來的大概念，這裡我來談談我對低程式碼的看法，首先低程式碼有麼有存在的必要，答案是有的。
這裡方便分析就拿一個管理系統為例子，也許A公司需要一個管理系統，公司接下了，然後後面B公司也需一套類似的系統，公司有需要基於框架去定製，其實我們通過分析不難發現，A公司和B公司其實有重合需求的部分，而這部分我們是可以利用的，也就是通過低程式碼生成實現共用。
再來一次例子，活動運營頁面的開發，這類頁面生命週期短，而收益也不高，如果專門投入前端同學去做，會有些大材小用，這裡假如存在一個低程式碼平臺，這樣只需要運營小哥哥，小姐姐拖動一下滑鼠就能完成設計何樂而不為呢？
技術選型
既然這是一個平臺那麼久涉及到了前端和後端，我們需要對前後端進行技術選型。
前端：react + typescript
後端：java
資料庫：mysql
沒啥特殊原因，因為我擅長寫react所以我就選了react + ts的組合。
平臺架構設計
一個平臺的設計好壞直接決定了這個平臺今後的可擴充套件性，所以在這一點來說需要慎重考慮。
下圖是我的一個簡單的架構設計（有不同意見的小夥伴也可以在評論區點評）
首先整體的web作為輸出的一層獨立存在，然後就是核心部分Core的程式碼。
關於Core
ServiceAPI為開發者暴露給使用者可二次開發的介面。
Service是整個CodeDesgin核心服務所在，所有的介面實現都在這一層。
Render層是分情況渲染的支援，主要是元件的多樣性導致我們無法通過一套程式碼去完成相容（或者說能做到相容，但是將無比的複雜）
UIStore儲存，這裡其實要配合Service中的一個UIService進行使用，因為我們是個低程式碼平臺，不僅僅要保證程式碼能在網頁上展示出來，也要能儲存，能部署所以這裡我就設計了一個UIStore，大家可以把它看作CodeDesign的資料層吧，這個UI
Store將會對使用者拖動產生的介面進行資料儲存，用來保證能夠在其他平臺進行還原。
關於其他
Utils：CodeDesgin中用到的一些工具類的集合，這裡偷懶就沒有一一列出。
http request：網路請求庫，主要是在進行一些操作的時候，將資料送到後臺去
store：本地儲存，因為這裡初期不計劃實現實時更新到後臺，所以為了保證使用者的資料不丟失，這裡我在本地做了儲存操作，保證在一些特殊情況下能夠快速恢復使用者之前的操作。
資料結構設計
設計程式碼如下
/**
* 選單組
*/
export interface MenuGroup {
name: string;
key: string;
children: RenderMessage[];
}
export interface RenderMessage {
key: string;
name: string;
type: string;
icon: string;
dom: RenderDOM;
}
/**
* DOM資料結構
*/
export interface RenderDOM {
domType: string;
type: string;
class?: string;
value?: string;
placeholder?: string;
isDisabled?: boolean;
size?: {
rows?: number,
cols?: number
}; // 顯示行數，多行文字框需要
children?: RenderDOM[]; // 可能存在多層級巢狀(當然也可能是存在多個孩子節點)
}
因為設計是基於antd樣式庫實現，所以這裡通過分析發現antd在渲染最終元件的時候會通過三層div去渲染，這裡我們需要做的就是定義出這三層資料結構，讓我們的程式碼能夠生成。
核心在於RenderDOM的定義，這是渲染整個DOM結構的關鍵資料結構，他是一個樹形結構，而且是一個多叉樹，所以這裡在解析的時候，我們需要根據dom節點的層級和順序，按需載入。（暫定採用的是DFS演算法進行解析）
最後
完成了上述的準備工作，我們心理已經對一個程式碼平臺的雛形有了初步規劃，下一步我們就可以開始開發啦。這裡補充下，因為本人是個直男，所一ui介面參考了ruoyi ui的設計，自己做了一些功能上的擴充套件。
程式碼地址
還在開發中～～～