什麼是低代碼開發平台？

低代碼開發平台是一種平台軟件，人們能通過它提供的圖形化配置功能，快速配置出滿足各種特定業務需求的功能軟件。
具有以下特點：

• 提供可視化界面進行程序開發
• 零代碼或少量代碼快速生成應用

什麼是低代碼產品唯一不可缺少的功能？

很多人認為是可視化編輯，那麼非可視化編輯就是代碼編輯。既然可視化編輯是低代碼平台必不可少的功能，那可視化編輯就是低代碼平台的必要條件。

低代碼平台不適合開發的應用有哪些？

• 算法邏輯複雜的應用，比如LeetCode題、ACM比賽
• 界面要求高的應用，比如遊戲、抖音等
• 頭部互聯網級應用，這些訪問量巨大，性能優化要求高
• 分析和智能化應用，這些應該用更專業的BI工具
• 系統軟件、科學計算等其他專業性很強的應用。

低代碼平台通常有哪些缺點？

市面上的低代碼平台通常有三個缺點：

• 平台鎖定。因為沒有生成代碼，只能在特有平台上不停積累業務、無法提取出來。低代碼實現的理念不一樣，沒有形成統一的標準和規範，a平台的程序不能在b平台上運行。
• 用户衝突。若生成代碼，業務人員看不懂。若不生成代碼，開發人員認為很多功能都沒有。通常又是業務人員更懂業務知識，更有價值。但開發人員才能完成設計更復雜的程序。
• 性能慢、開發慢。很多低代碼平台引入了“人員權限系統”、“工作流引擎”等很多產品/工具、很難生成全棧代碼，維護性差。圖形化表達的概念不完善，遮擋、連線等無法完整表達需要的業務邏輯。組件不夠豐富或者沒有，無法使用需要的組件。

生成代碼的方案算不算低代碼？

通過生成代碼的方式實現的方案，可以和專業開發整合，因此靈活性強、可以使用原有的開發流程，本質上和專業開發一樣。
缺點是：

• 強依賴研發，上線的代碼需要編譯，無法給非專業人士用
• 無法做到持續的可視化編輯
• 無法生成過度複雜的代碼
• 綁定生成代碼的框架，無法做到兼容

低代碼平台能提高多快的開發效率？

用低代碼做一些小系統確實挺快，但並沒有分析機構給出可靠的評估，根據初步經驗，提升1到2倍算是一個比較合理的預期。

既然低代碼開發工具可以幫助開發者快速生成基礎的代碼結構，減少重複勞動，提高開發效率，那麼我們現在開始嘗試搭建一個低代碼開發工具。

下面是一個基本的設計思路，分為幾個主要部分來考慮：

一、 需求分析

（一）目標用户

明確你的低代碼生成工具是為哪些人服務的，比如無計算機基礎用户、業務人員、前端開發者、後端開發者或全棧開發者。

接下來，先做用户分析再下結論。

1.用户分析

通常實現業務邏輯的功能有兩種基本概念：設計時邏輯和運行時邏輯。

設計時邏輯（開發態）就是我們在寫代碼編程時的狀態，例如，應用開發，程序設計、遊戲開發等，通常是在一個操作系統/瀏覽器中運行的。

運行時邏輯（運行態）就是跑在一個應用上的狀態，例如，BPM、RPA、數據流編程、自動化測試等，通常是在一個內部軟件中運行的。

針對這兩種狀態有以下特點：

2.各低代碼平台分析

以國外系統Mendix等低代碼平台為例，有頁面設計器、流程設計器等多種產品，他們是開發態時生成代碼，給開發人員和業務人員使用生成程序後給用户使用。

• 優點：有代碼、不耦合任何平台
• 缺點：業務人員看不懂代碼

以國內系統微搭WeDa、奧哲等低代碼平台為例，他們是在運行時有頁面設計器、流程設計器等工具，提供給開發和業務人員使用。不生成代碼，屬於應用程序平台即服務（APAAS）。

• 優點：業務人員使用順手
• 缺點：開發人員認為功能不全，只能使用JS注入的方式實現更多功能，功能耦合平台。

以簡道雲、明道雲、釘釘宜搭等低代碼平台為例，他們也是在運行時有各種設計器，主要提供給業務人員使用。這些平台是為自己的生態服務的，功能耦合平台，不生成代碼，相當於帶用户權限和角色管理的軟件運營服務（SAAS）。

• 優點：搭建簡單、主要給業務人員使用
• 缺點：開發人員能使用的功能少，程序功能耦合平台

3.結論

經過前面的分析，這裏我們明確下，即將搭建的低代碼開發平台（工具）是給自己用的，而不是給0專業知識的外行人士使用的，是面向具有計算機專業知識的開發者用的，是為了提高開發者效率。

我們將根據自己的需求，生成通用型的代碼，而不是拖拽直接生成功能。

該工具解決開發者經常面臨功能簡單，編碼重複的工作但開發效率低，耗時長的問題。

因此，面對開發者的話，為完成完整的功能，一般全棧開發者較多，因此生成的代碼會涉及到前後端的全棧代碼。

（二）應用場景

瞭解用户在什麼場景下會使用這個工具，例如生成API接口、數據庫表結構、簡單的頁面等。

作為開發者，通常從0開始開發軟件/系統，在我們開發到一定程度時，會發現有些功能是很簡單，但是重複編碼的工作。這時我們希望有個工具，過去已經開發過的類似功能可以通過簡單的配置就能生成想要的功能代碼。

1.程序開發需要做什麼？

假設我們要開發一個客户管理系統，暫時不考慮低代碼開發平台，往常我們的工作應該包括：

• 設計數據結構：比如描述一位客户的信息，包括姓名、性別、出生日期、證件類型、證件號、手機號和地址
• 設計服務：比如客户的增刪查改，身份證號長度的校驗，出生日期是否一致
• 設計數據庫：數據庫的多張表，每張表不同字段，對應於不同模型
• 設計流程：修改客户信息可能需要經過一套流程，一個用户錄入客户信息，下一個用户對錄入的客户信息作審核
• 設計界面，方便用户能夠通過圖形化界面操作系統

2.程序開發有哪些痛點？

問題來了，現實的軟件需求會頻繁發生變化，例如，為客户數據結構增加一個屬性或者字段，對應的服務、數據庫結構、界面、流程都要做相應的修改，還要經過測試。因此，會有以下缺點：

• 開發週期比較長，開發工作量將倍增。
• 若多個用户的需求差異較大，那麼幾乎要為每一個用户重新開發一套系統。
• 不同用户之間，例如，個人客户是對自然人的管理，企業客户是對企業法人的管理。它們的操作界面、數據庫結構、服務和流程都是獨立開發、互不相關的。實際上應該可以共用代碼。

低代碼開發平台由於是提高我們效率的開發工具，因此如果有哪些是出現重複的代碼，應該做成模板文件，快速生成。若屬性頻繁變化，應該修改模型後快速生成來應對這種變化，工具應該具有很強的通用性。

3.使用場景

在前後端分離的項目中，後端程序提供api接口完成各項功能，前端應用訪問api接口獲取數據並給用户展示各種界面。

作為即將開發的代碼生成工具的使用者，我們在以下場景使用該工具：

• 希望不編寫SQL語句，直接通過界面配置模型來設計數據庫表
• 通過已有模型一鍵生成各層後端代碼，該代碼包含簡單的增刪查改功能
• 由於字段屬性較多，編寫比較繁瑣，可以根據字段信息和模板直接生成頁面文件
• 可以快速生成各層代碼，支持代碼下載和預覽，自動註冊各編譯的代碼進行打包發佈

（三）功能需求

根據前面描述的目標用户和應用場景，我們列出需要實現的具體功能。

1.代碼生成

以若依平台的代碼生成工具為例，該開源框架可以讀取數據庫表的信息後生成一系列代碼。可以參考此框架進行開發自己的代碼生成工具。

（1）數據庫表生成

• 生成數據庫表
• 增減字段信息

（2）後端代碼生成

• 生成api接口controller類
• 生成服務service類
• 生成entity實體
• 生成mapper類

（3）前端代碼生成

• 生成訪問接口js文件
• 生成頁面文件（列表、詳情）

（4）自動註冊

• 註冊頁面菜單
• 註冊功能
• 註冊權限

二、 技術選型

框架：Spring Boot作為基礎框架，提供快速開發的能力。
模板引擎：如Thymeleaf、Freemarker或Velocity等，用於生成代碼模板。
數據庫：如果需要存儲配置信息，可以選擇MySQL、PostgreSQL等關係型數據庫，或者MongoDB等NoSQL數據庫。
前端技術：React、Vue或Angular等現代前端框架，用於構建用户界面。

（一）關於後端代碼的生成方案

後端的生成方案有很多開源架構可以利用，例如mybatis-plus-generator、若依代碼生成、人人開源代碼生成等。

該工具是通過讀取數據庫表，也是利用了模板引擎技術，來幫我們生成一系列controller、service、serviceImpl、entity、mapper文件快速實現單表增刪查改的功能。

由於我們現在是生成前後端代碼，同時後端代碼不一定是MVC分層架構，該工具自帶的功能不夠用，所以這裏我們自行通過模板引擎技術實現。

在代碼生成中需要面臨一系列的問題，考慮以下幾點：

1.選擇什麼數據庫類型？

（1）方案1：直接使用關係型數據庫

比如添加了一個字段，系統會自動生成表結構變更語句：

ALTER TABLE 'blog' ADD 'title' varchar(255) NULL;

該方案優點是：

• 性能高、靈活性強
• 支持直連外部數據庫，對接已有的外部系統

缺點是：

• 需要賬號有創建用户和DDL的權限。
• 實現成本較高，需要實現「動態實體」功能，如果要支持不同數據庫還得支持各種方言。

實現該方案的關鍵是「動態實體」，在專業開發中實體（Entity）定義都是靜態的，以 Java 為例，它從 2006 年開始就有專門的 JPA 規範，但這個規範是定義基於 Java 代碼註解，使得需要經過編譯才能使用，畢竟它的定位是面向專業開發，只有寫在代碼裏才能支持代碼提示，提升開發體驗。

而低代碼平台中需要將這個實體定義抽象成配置，在運行時動態生成實體，如果使用 JPA 就需要生成 Java 代碼後進行編譯，這很容易出錯，不太適合低代碼平台，所以使用這個方案需要實現「動態實體」功能，是整個方案最大難點。

（2）方案2：使用文檔型數據庫

不需要預先定義表結構，因此它很適合用來存儲用户自定義數據，這個方案實現起來比較簡單，例如 MongoDB 為例，可以這樣做：用户創建一個自定義表的時候，系統就自動創建一個 collection，所有這個表的數據都存在這個 collection 裏。

用户新增字段的時候，就隨機分配一個 fileId，後續對這個字段的操作都自動映射到這個 fileId 上，用 fileId 的好處是用户重命名字段後還能查找之前的數據，因為所有數據查詢底層都基於這個 fileId。

查詢的時候先找到對應的 collection，再通過 meta 信息查詢字段對應的 fileId，使用這個 fileId 來獲取數據。

這個方案的優點是：實現簡單，用户體驗可以做得更好，是目前大部分零代碼平台的選擇

但這個方案也有顯著缺點：

• 無法支持外部數據庫，數據是孤島，外部數據接入只能通過導入的方式。
• MongoDB 在國內發展緩慢，接受度依然很低，目前還沒聽説有哪家大公司裏最重要的數據存在 MongoDB 裏
• 不支持高級 SQL 查詢。

（二）關於前端代碼的生成方案

前端的生成方案有很多開源架構可以利用，例如阿里的low-code。還有動態表單生成插件，例如form-create、vue-form-generate
等。

1.使用什麼方式生成頁面組件？

動態生成表單的方式有多種，包括實時讀取後端 API 的 JSON 數據生成表單和預編譯生成靜態代碼。這兩種方式各有優缺點，適用於不同的場景。下面我分別解釋這幾種方式，並給出具體的實現方法。

(1) 實時讀取後端 API 的 JSON 數據生成表單

實現步驟

• 後端 API：提供一個 API 接口，返回表單配置的 JSON 數據。
• 前端組件：在前端組件中，通過 AJAX 請求獲取 JSON 數據，並根據數據動態生成表單。

優點

• 靈活性高：表單結構可以隨時通過後端 API 進行修改，無需重新部署前端代碼。
• 實時更新：用户可以看到最新的表單結構，無需等待前端代碼更新。
• 易於維護：表單配置集中管理，便於維護和更新。

缺點

• 性能開銷：每次加載表單時都需要發起 AJAX 請求，可能會增加頁面加載時間。
• 調試困難：動態生成的表單在調試時可能不夠直觀。

(2) 預編譯生成靜態代碼插入到項目工程文件中

實現步驟

• 生成 JSON 文件：通過後端 API 或其他方式生成表單配置的 JSON 文件。
• 預編譯工具：使用預編譯工具（如 Babel、Webpack 等），在構建過程中根據 JSON 文件生成表單組件代碼。
• 靜態化：將生成的代碼靜態寫入到項目文件中，並在項目中引用。

優點

• 性能提升：避免了運行時的動態解析和生成，提高了頁面加載和渲染速度。
• 簡化調試：生成的代碼可以直接查看和調試，更容易發現和解決問題。
• 減少依賴：不再依賴於動態生成庫，減少了項目的依賴複雜性。

缺點

• 靈活性降低：一旦表單結構發生變化，需要重新生成代碼並手動更新文件。
• 維護成本：需要額外的腳本來生成和管理代碼文件，增加了維護成本。
• 部署複雜性：每次表單結構變化都需要重新生成代碼並重新部署，增加了部署的複雜性。

（3）結合 Velocity 模板引擎生成靜態頁面文件

實現步驟

• 配置 Velocity並創建一個 Velocity 模板文件 form-.vm。
• 生成靜態文件並配置輸出目錄。

優點

• 性能提升：生成的靜態 HTML 文件可以直接在前端加載，避免了每次請求時的動態生成開銷。
• 簡化調試：生成的靜態文件可以直接查看和調試，更容易發現和解決問題。
• 減少依賴：不再依賴於動態生成庫，減少了項目的依賴複雜性。

缺點

• 靈活性降低：一旦表單結構發生變化，需要重新生成靜態文件並手動更新文件。
• 維護成本：需要額外的腳本來生成和管理靜態文件，增加了維護成本。
• 部署複雜性：每次表單結構變化都需要重新生成靜態文件並重新部署，增加了部署的複雜性。

結論

選擇哪種方案取決於你的具體需求和項目規模：

• 如果表單結構變化頻繁且需要實時更新，建議使用 實時讀取後端 API 的 JSON 數據生成表單。
• 預編譯生成靜態代碼插入到項目工程文件中：適用於表單結構相對固定、對性能要求較高的場景。這種方式性能更好，但靈活性較低，維護成本較高。
• 如果表單結構相對固定且對性能要求較高，建議使用 使用 Spring Boot 結合 Velocity 模板引擎生成靜態頁面文件。
• 混合方案：適用於表單結構部分固定、部分動態，需要平衡靈活性和性能的場景。

三.、系統架構

前端界面：提供給用户的圖形化操作界面，包括項目配置、模板選擇、參數設置等功能。
後端服務：
API接口：供前端調用，處理業務邏輯。
代碼生成器：核心模塊，根據用户配置和模板生成代碼。
配置管理：管理和持久化用户的配置信息。
數據模型：定義系統中使用的實體類，如項目、模板、配置等。

四、 功能實現

項目管理：創建、編輯、刪除項目，項目信息的保存。
模板管理：內置多種模板供用户選擇，支持自定義模板上傳。
代碼生成：基於用户選擇的模板和輸入的參數，動態生成代碼。
預覽與下載：生成的代碼可以在線預覽，並提供下載功能。

（一）生成數據庫表結構

1.生成數據庫表

（1）準備sql語句

要支持生成數據庫表結構，因此代碼中要提前寫入sql語句支持生成數據庫表。

public void createTableIfNotExists(String tableName, String showName) {
    String sql = "CREATE TABLE " + tableName + " ("
            + "id bigint auto_increment primary key, "
            + "version int NOT NULL, "
            + "del_flag bit default 0 NOT NULL, "
            + "create_time datetime(6) NOT NULL, "
            + "create_by varchar(255) NOT NULL, "
            + "update_time datetime(6), "
            + "update_by varchar(255) "
            + ") engine=innodb default charset=utf8mb4 comment '" + showName + "';";
    jdbcTemplate.execute(sql);
}

但是根據數據庫類型的不同，如mysql、sqlserver、oracle等，準備的sql語句也不同。

（2）其它

除了生成數據庫表，還應該支持刪除數據庫表、更改數據庫表名稱、創建視圖、設置表權限、設置列索引等。

另外可以擴展通過excel表、文本文件導入創建數據庫等。

這些都是細枝末節，可以通過準備的sql語句實現。

2.設置字段

（1）添加字段

類似地，通過準備sql語句接受表名、字段名、字段類型的參數，給數據庫表添加字段。

public void addBillField(String tablename, String fieldName, String fieldDbType, String fieldLabel) {
    StringBuilder sb = new StringBuilder();
    sb.append("alter table ").append(tablename)
            .append(" add ")
            .append(fieldName)
            .append(" ")
            .append(fieldDbType)
            .append(" comment '")
            .append(fieldLabel).append("';");
    jdbcTemplate.execute(sb.toString());
}

（2）設置字段類型

字段類型有文本、整數、小數、日期時間等類型，頁面上可以接受這些選項設置字段的類型。這些都好説。

但是有些字段是外鍵，關聯了外部數據庫表，屬於引用類型。例如，訂單表的某個字段是用户ID關聯了用户表的信息。

本身字段類型應該屬於整數，這沒啥好説的，但是頁面需要知道該字段屬於外部哪個表單的信息，確保渲染該整數類型字段的時候可以轉換為對應的名稱信息。

（二）通過模板生成代碼

1.模板引擎和模板文件

有多種模板引擎可以生成代碼，這裏我們使用Velocity模板引擎生成代碼，引入maven依賴。

<!--Velocity模板引擎-->
<dependency>
    <groupId>org.apache.velocity</groupId>
    <artifactId>velocity-engine-core</artifactId>
    <version>2.2</version>
</dependency>

如下代碼所示，通過Velocity模板引擎，可以接受任意渲染的映射信息輸出模板文件到某個目錄上。

public class VelocityService {
    /**
     *
     * @param objectMap 渲染的映射信息
     * @param templatePath 模板文件位置
     * @param filename  文件名稱
     * @param fileDir 文件所在目錄
     */
    public static void outputFile(Map<String, Object> objectMap, String templatePath, String filename, String fileDir) {
        //1.設置velocity的資源加載類
        Properties prop = new Properties();
        prop.put("resource.loader.file.class", "org.apache.velocity.runtime.resource.loader.ClasspathResourceLoader");
        //2.加載velocity引擎
        Velocity.init(prop);
        //3.加載velocity容器
        VelocityContext velocityContext = new VelocityContext();
        for (Map.Entry<String, Object> item : objectMap.entrySet()) {
            velocityContext.put(item.getKey(), item.getValue());
        }
        File directory = new File(fileDir);
        // 檢查目錄是否存在
        if (!directory.exists()) {
            // 如果目錄不存在，則創建目錄
            boolean created = directory.mkdirs();
            if (created) {
                System.out.println("目錄已創建");
            } else {
                System.out.println("無法創建目錄");
            }
        } else {
            System.out.println("目錄已存在");
        }
        //4.加載velocity模板
        Template template = Velocity.getTemplate(templatePath, "utf-8");
        //5.合併數據
        try {
            System.out.println(templatePath);
            FileWriter fileWriter = new FileWriter(fileDir + "\\" + filename);
            System.out.println("到這一步");
            template.merge(velocityContext, fileWriter);
            fileWriter.close();
        } catch (IOException e) {
            Asserts.fail("IOException 異常：模板文件覆寫失敗！");
        }
    }
}

例如，以下是mybatis-generator模板文件中生成mapper文件的示例。

package ${package.Mapper};

import ${package.Entity}.${entity};
import ${superMapperClassPackage};
#if(${mapperAnnotation})
import org.apache.ibatis.annotations.Mapper;
#end

/**
 * <p>
 * $!{table.comment} Mapper 接口
 * </p>
 *
 * @author ${author}
 * @since ${date}
 */
#if(${mapperAnnotation})
@Mapper
#end
#if(${kotlin})
interface ${table.mapperName} : ${superMapperClass}<${entity}>
#else
public interface ${table.mapperName} extends ${superMapperClass}<${entity}> {

        }
#end

2.其它

雖然應該內置一些模板文件提供給用户使用，但是由於每個人編碼習慣都不一樣，我們應該支持用户上傳自定義模板生成自己的代碼。

（三）生成頁面文件

1.頁面生成和模板文件

在前面設計完成數據庫表之後，我們應該可以根據數據庫表生成默認的頁面文件。

對於一個完整的頁面功能，這時應該生成四個頁面：列表頁面、查看頁面、添加頁面和編輯頁面。

但為了減少頁面個數，增強頁面複用度，可以 選擇只生成兩個頁面——例如：員工表_列表頁面，員工表_詳情頁面。

• 列表頁面是一個表格列出所有數據表中的數據。列表頁面中包含添加記錄、更改、刪除的超鏈接。
• 詳情頁面顯示每條數據的詳細信息。

1.生成靜態頁面文件

可以通過模板引擎使用自定義的頁面模板文件生成頁面。

列表頁面和詳情頁面的模板文件由用户自行提供或由系統內置。

例如，在 src/main/resources/templates 目錄下創建一個 Velocity 模板文件 html-template.vm。

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Form</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.11/dist/antd.css">
</head>
<body>
    <div id="app">
        <a-form @submit="handleSubmit">
            #foreach($field in $fields)
                <a-form-item label="$!{field.label}">
                    <a-input v-model="model.$!{field.model}" type="$!{field.type}" :placeholder="$!{field.placeholder}" />
                </a-form-item>
            #end
            <a-button type="primary" html-type="submit">Submit</a-button>
        </a-form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.11/dist/antd.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                model: {}
            },
            methods: {
                handleSubmit(e) {
                    e.preventDefault();
                    console.log(this.model);
                }
            }
        });
    </script>
</body>
</html>

2.生成 JSON 文件後預編譯成頁面組件。

可以從配置信息中，生成json文件到前端工程文件中，再由babel、webpack等工具預編譯生成靜態代碼插入到項目工程文件中。

生成 JSON 文件（假設已通過後端 API 獲取並保存為 form-config.json）

{
  "schema": {
    "fields": [
      {
        "type": "input",
        "inputType": "text",
        "label": "Name",
        "model": "name",
        "required": true,
        "min": 3,
        "max": 100,
        "placeholder": "Your name..."
      },
      {
        "type": "input",
        "inputType": "email",
        "label": "E-mail",
        "model": "email",
        "required": true,
        "placeholder": "Your e-mail..."
      }
    ]
  },
  "formOptions": {
    "validateAfterLoad": true,
    "validateAfterChanged": true
  }
}

生成表單組件代碼（使用 Node.js 腳本）

const fs = require('fs');
const path = require('path');

// 讀取 JSON 配置文件
const configPath = path.resolve(__dirname, 'form-config.json');
const config = require(configPath);

// 生成表單組件代碼
const generateFormCode = (config) => {
  const fields = config.schema.fields.map(field => {
    return `
      <a-form-item label="${field.label}">
        <a-input v-model="model.${field.model}" type="${field.inputType}" :placeholder="${field.placeholder}" />
      </a-form-item>
    `;
  }).join('\n');

  return `
    <template>
      <a-form @submit="handleSubmit">
        ${fields}
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form>
    </template>

    <script>
    export default {
      data() {
        return {
          model: {}
        };
      },
      methods: {
        handleSubmit(e) {
          e.preventDefault();
          console.log(this.model);
        }
      }
    };
    </script>

    <style scoped>
    /* 添加樣式 */
    </style>
  `;
};

// 生成並寫入文件
const outputPath = path.resolve(__dirname, 'components', 'GeneratedForm.vue');
fs.writeFileSync(outputPath, generateFormCode(config), 'utf-8');

console.log('Form component generated successfully!');

使用生成的組件

<template>
  <div>
    <generated-form></generated-form>
  </div>
</template>

<script>
import GeneratedForm from '@/components/GeneratedForm.vue';

export default {
  components: {
    GeneratedForm
  }
};
</script>

3.生成動態表單

實時讀取後端 API 的 JSON 數據生成表單

該方式是提供一個 API 接口，返回表單配置的 JSON 數據。在前端組件中，通過 AJAX 請求獲取 JSON 數據，並根據數據動態生成表單。

以下示例的前端組件為（Vue 3 + vue-form-generator）

<template>
  <div>
    <vue-form :schema="schema" :model="model" :options="formOptions" @submit="onSubmit"></vue-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import VueFormGenerator from 'vue-form-generator';
import 'vue-form-generator/dist/vfg.css'; // 引入樣式

const model = ref({});
const schema = ref({});
const formOptions = ref({});

const fetchFormConfig = async () => {
  try {
    const response = await axios.get('/api/form-config');
    schema.value = response.data.schema;
    formOptions.value = response.data.formOptions;
  } catch (error) {
    console.error('Error fetching form config:', error);
  }
};

onMounted(() => {
  fetchFormConfig();
});

const onSubmit = (model) => {
  console.log('Form submitted with model:', model);
  // 處理表單提交邏輯
};
</script>

<style scoped>
/* 添加樣式 */
</style>

4.業務數據關聯頁面

當創建好業務數據與頁面後，需要將業務數據關聯到頁面上，即將數據表中的字段關聯到頁面上，這個過程稱為數據綁定。

五、測試與部署

單元測試：確保每個功能模塊的正確性。
集成測試：驗證各模塊之間的交互是否正常。
性能測試：確保系統能夠應對高併發訪問。
部署方案：考慮使用Docker容器化部署，提高部署效率和環境一致性。

其它功能待思考完善。。。