什么是低代码开发平台？

低代码开发平台是一种平台软件，人们能通过它提供的图形化配置功能，快速配置出满足各种特定业务需求的功能软件。
具有以下特点：

  • 提供可视化界面进行程序开发
  • 零代码或少量代码快速生成应用

什么是低代码产品唯一不可缺少的功能？

很多人认为是可视化编辑，那么非可视化编辑就是代码编辑。既然可视化编辑是低代码平台必不可少的功能，那可视化编辑就是低代码平台的必要条件。

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

通过生成代码的方式实现的方案，可以和专业开发整合，因此灵活性强、可以使用原有的开发流程，本质上和专业开发一样。
缺点是：

  • 强依赖研发，上线的代码需要编译，无法给非专业人士用
  • 无法做到持续的可视化编辑
  • 无法生成过度复杂的代码
  • 绑定生成代码的框架，无法做到兼容

低代码平台不适合开发的应用有哪些？

  • 算法逻辑复杂的应用，比如LeetCode题、ACM比赛
  • 界面要求高的应用，比如游戏、抖音等
  • 头部互联网级应用，这些访问量巨大，性能优化要求高
  • 分析和智能化应用，这些应该用更专业的BI工具
  • 系统软件、科学计算等其他专业性很强的应用。

低代码平台能提高多快的开发效率？

用低代码做一些小系统确实挺快，但并没有分析机构给出可靠的评估，根据初步经验，提升1到2倍算是一个比较合理的预期。

既然低代码开发工具可以帮助开发者快速生成基础的代码结构，减少重复劳动，提高开发效率，那么我们现在开始尝试搭建一个低代码开发工具。

下面是一个基本的设计思路，分为几个主要部分来考虑：

一、 需求分析

（一）目标用户

明确你的低代码生成工具是为哪些人服务的，比如无计算机基础用户、前端开发者、后端开发者或全栈开发者。

这里我们开发的低代码开发平台（工具）是给自己用的，而不是给0专业知识的外行人士使用的，是面向具有计算机专业知识的开发者用的，是为提高开发者效率的工具，生成的是代码，而不是拖拽直接生成功能。

解决的是开发者经常面临功能简单，编码重复的工作但开发效率低，耗时长的问题。

面对开发者的话，对于小公司而言，一般全栈开发者较多，因此生成的代码会涉及到前后端的代码。

（二）应用场景

了解用户在什么场景下会使用这个工具，例如生成API接口、数据库表结构、简单的页面等。

1.程序开发需要做什么？

假设我们要开发一个客户管理系统，暂时不考虑低代码开发平台，往常我们的工作应该包括：

  • 设计数据结构：比如描述一位客户的信息，包括姓名、性别、出生日期、证件类型、证件号、手机号和地址
  • 设计服务：比如客户的增删查改，身份证号长度的校验，出生日期是否一致
  • 设计数据库：数据库的多张表，每张表不同字段，对应于不同模型
  • 设计流程：修改客户信息可能需要经过一套流程，一个用户录入客户信息，下一个用户对录入的客户信息作审核
  • 设计界面，方便用户能够通过图形化界面操作系统
    在这里插入图片描述

2.程序开发有哪些痛点？

问题来了，现实的软件需求会频繁发生变化，例如，为客户数据结构增加一个属性或者字段，对应的服务、数据库结构、界面、流程都要做相应的修改，还要经过测试。因此，会有以下缺点：

  • 开发周期比较长，开发工作量将倍增。
  • 若多个用户的需求差异较大，那么几乎要为每一个用户重新开发一套系统。
  • 不同用户之间，例如，个人客户是对自然人的管理，企业客户是对企业法人的管理。它们的操作界面、数据库结构、服务和流程都是独立开发、互不相关的。实际上应该可以共用代码。

低代码开发平台由于是提高我们效率的开发工具，因此如果有哪些是出现重复的代码，应该做成模板文件，快速生成。若属性频繁变化，应该修改模型后快速生成来应对这种变化，工具应该具有很强的通用性。

3.使用场景

在前后端分离的项目中，后端程序提供api接口完成各项功能，前端应用访问api接口获取数据并给用户展示各种界面。

作为即将开发的代码生成工具的使用者，我们在以下场景使用该工具：

  • 希望不编写SQL语句，直接通过界面配置模型来设计数据库表
  • 通过已有模型一键生成各层后端代码，该代码包含简单的增删查改功能
  • 由于字段属性较多，编写比较繁琐，可以根据字段信息和模板直接生成页面文件
  • 可以快速生成各层代码，支持代码下载和预览，自动注册各编译的代码进行打包发布

（三）功能需求

根据前面描述的目标用户和应用场景，我们列出需要实现的具体功能。

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容器化部署，提高部署效率和环境一致性。

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

# 低代码
Logo
低代码技术专区

低代码爱好者的网上家园

更多推荐

cover

AntFlow集成variant form:低代码表单与流程引擎的完美结合

avatar 低代码技术专区
cover

安利国内四个互联网大厂分别开源的低代码引擎

avatar 低代码技术专区
cover

低代码平台与无代码平台的主要区别是什么？lowcode vs no code

avatar 低代码技术专区