前言
什么是低代碼？低代碼開發是種通過可視化進行應用程序開發的方法，使具有不同經驗水平的開發人員可以通過圖形化的用戶界面，使用拖拽組件和模型驅動的邏輯來創建網頁和移動應用程序。這些工具通過減少手工編碼的工作量來幫助快速開發應用程序，提高開發效率。
這是從網上抄來的大概念，這里我來談談我對低代碼的看法，首先低代碼有么有存在的必要，答案是有的。
這里方便分析就拿一個管理系統為例子，也許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的設計，自己做了一些功能上的擴展。
代碼地址
還在開發中～～～