摸魚低代碼平臺分享

摸魚低代碼平臺希望打造一個基于低代碼的無代碼平臺。即能給程序員使用，也能滿足非專業(yè)人士的需求。

摸魚低代碼平臺是一款基于Spring Boot、Spring Cloud & Alibaba、Vue、AntDesign的前后端分離微服務后臺快速開發(fā)框架。

內置模塊如：菜單管理、組織管理、角色管理、賬號管理、字典管理、個人設置、日志管理、文件管理、在線用戶、數(shù)據庫、數(shù)據源、代碼生成、任務調度

基于該框架后期會拓展低代碼相關表單設計，報表設計，流程設計等功能，實現(xiàn)從低代碼到無代碼的演進。

當前開源部分完成前后臺開發(fā)腳手架功能，采用apache2.0可以基于本框架進行二次開發(fā)，不限制商用。

技術棧

后端基于Spring Cloud Alibaba生態(tài)

前端基于Vue-Vben-Admin進行開發(fā)

前端技術棧：vue3+vite+ts+pnpm

系統(tǒng)需求

• JDK >= 1.8

• MySQL >= 5.7

• Maven >= 3.0

• Redis >= 3

• Node >= 16

  功能模塊

复制├─ChatGpt
│  ├─聊天
├─駕駛艙
│  ├─工作臺
├─系統(tǒng)管理
│  ├─菜單管理
│  ├─組織管理
│  ├─角色管理
│  ├─帳號管理
│  ├─字典管理
│  ├─個人管理
│  ├─日志管理
│  ├─文件管理
│  ├─在線用戶
│  ├─數(shù)據庫
│  └─數(shù)據源
├─系統(tǒng)監(jiān)控
│  ├─監(jiān)控中心
├─任務調度
│  ├─任務管理
│  ├─任務日志
├─項目文檔
│  ├─接口地址
│  ├─Github地址
│  ├─Gitee地址
│  ├─AntDesign文檔
│  └─Vben文檔
├─多級目錄
├─系統(tǒng)工具
│  ├─代碼生成
├─圖形編輯器
├─引導頁
├─關于
└─其他模塊 
   └─更多功能開發(fā)中。。

項目截圖

主要特性

• 統(tǒng)一認證（支持外部系統(tǒng)快速集成）
• 響應式布局（支持電腦、平板、手機等所有主流設備）
• 菜單、按鈕、角色權限控制
• 代碼一鍵生成（生成代碼結構簡單便于二次開發(fā)）
• 支持多數(shù)據源（修改配置即可實現(xiàn)切換）
• 支持動態(tài)配置數(shù)據源（類似navicat配置直接接入外部數(shù)據源）

架構圖

組件事件流

• 數(shù)據層：核心是【表單數(shù)據】和【配置數(shù)據】，而其他數(shù)據都是基于這 2 個動態(tài)計算出來的，并不會單獨存儲；
• UI 層：根據配置數(shù)據動態(tài)生成 ui，因此假如傳入的配置變更，那么 ui 也會隨著動態(tài)變化；
• 事件層：基于生成的 ui，用戶進行操作，則將觸發(fā)事件層。而事件層最終影響的是【表單數(shù)據】

wti-form 表單全局功能

通過 json 數(shù)據來生成表單；

通過 data 數(shù)據給表單每個元素賦值；

支持表單校驗；

表單支持分塊顯示；

支持單區(qū)塊收起、展開、全部收起、全部展開；

支持將表單顯示模式切換：長表單/帶 tab 切換的短表單；

支持表單元素全局禁用（例如提交時）；

支持給表單加一個外框，增加區(qū)分度；

支持將表單模式切換為純文本顯示模式；

支持設置表單為一行四列/兩列/一列；

二次開發(fā)自定義表單元素難度極低；

自動化測試

目前正在寫一個自動化測試組件，效果是：

將表單組件傳入到該組件中；

該組件會自動根據 json 配置，和組件本身配置，推斷每個 key 應該生成什么樣的數(shù)據；

目前支持三種數(shù)據：【標準合法數(shù)據】【合法邊界數(shù)據】【非法超限數(shù)據】；

對于特殊的還支持用戶自定義數(shù)據生成；

可視化生成表單

與 C 端場景不同，B 端場景更常見是處理流程。一個流程里會有很多表單，而在這些表單里會有很多相同的表單元素。這就意味著，這些表單元素可以大量復用。

因此我們可以開發(fā)一個后端服務，專門用來存儲這些開發(fā)好的表單元素。

在開發(fā)一個新頁面時，可以通過關鍵詞搜索到之前寫好的表單元素，然后通過勾選/拖拽的模式，直接拖入表單，最后直接生成一個Vue 組件甚至頁面。這就是現(xiàn)在低代碼平臺最常見的使用方式了。

我們目前已經有這種方案的常規(guī)版本（比文檔里提供的版本更強），但是仍不夠完美，并不能泛用到所有表單里。

而本表單組件為什么可以稱為低代碼表單組件，也是通過這個來體現(xiàn)的。

不過，因為這個屬于公司業(yè)務代碼，因此無法直接給出來相關代碼和示例。