全栈框架表单快速生成？

全栈框架表单快速生成方案

主流全栈框架方案

React 生态

// 1. Ant Design Pro - 最成熟的企业级方案
// 使用 ProForm 组件
import { ProForm, ProFormText } from '@ant-design/pro-form';
<ProForm
  onFinish={async (values) => {
    await saveData(values);
  }}
>
  <ProFormText name="name" label="姓名" rules={[{ required: true }]} />
  <ProFormText name="email" label="邮箱" rules={[{ type: 'email' }]} />
  <SubmitButton>提交</SubmitButton>
</ProForm>
// 2. Formily - 阿里系表单引擎（更强大但学习曲线陡）
import { createForm } from '@formily/core';
import { FormProvider, Field, Input } from '@formily/react';
const form = createForm({
  effects: () => {
    onFieldValueChange('name', (field) => {
      // 联动逻辑
    });
  }
});

Vue 生态

<!-- 1. Vue + Element Plus + form-generator -->
<template>
  <generator-form 
    :data="formConfig" 
    @submit="handleSubmit"
  />
</template>
<script setup>
// 可视化拖拽生成配置
const formConfig = reactive({
  fields: [
    { type: 'input', label: '姓名', key: 'name', required: true },
    { type: 'select', label: '性别', key: 'gender', options: [
      { label: '男', value: 1 },
      { label: '女', value: 2 }
    ]}
  ]
});
</script>
<!-- 2. Vue Formily -->
<SchemaForm
  :schema="{
    type: 'object',
    properties: {
      name: { type: 'string', title: '姓名', required: true },
      email: { type: 'string', title: '邮箱', format: 'email' }
    }
  }"
  @submit="handleSubmit"
/>

低代码/可视化方案

常用的在线表单生成器

示例：amis 配置表单

{
  "type": "form",
  "api": "/api/save",
  "body": [
    {
      "type": "input-text",
      "name": "name",
      "label": "姓名",
      "required": true
    },
    {
      "type": "select",
      "name": "gender",
      "label": "性别",
      "options": [
        {"label": "男", "value": 1},
        {"label": "女", "value": 2}
      ]
    }
  ]
}

JSON Schema 驱动方案

React JSON Schema Form (RJSF)

import Form from '@rjsf/core';
import { RJSFSchema } from '@rjsf/utils';
const schema: RJSFSchema = { "用户信息",
  type: "object",
  properties: {
    name: { 
      type: "string", 
      title: "姓名",
      minLength: 2 
    },
    age: { 
      type: "integer", 
      title: "年龄", 
      minimum: 0, 
      maximum: 150 
    },
    email: {
      type: "string",
      title: "邮箱",
      format: "email"
    }
  },
  required: ["name", "email"]
};
// 一秒生成完整表单
<Form 
  schema={schema}
  onSubmit={({formData}) => console.log(formData)}
/>

Table + Form 联动生成

// 从数据库表结构自动生成表单
interface ColumnMeta {
  name: string;
  type: 'string' | 'number' | 'boolean' | 'date' | 'enum';
  label: string;
  required: boolean;
  options?: string[];
}
function generateFormConfig(columns: ColumnMeta[]) {
  return columns.map(col => ({
    type: mapFieldType(col.type),
    name: col.name,
    label: col.label,
    required: col.required,
    rules: generateRules(col)
  }));
}
// 使用示例
const tableStructure = [
  { name: 'username', type: 'string', label: '用户名', required: true },
  { name: 'role', type: 'enum', label: '角色', required: true, 
    options: ['admin', 'user', 'guest'] }
];
const formFields = generateFormConfig(tableStructure);

最佳实践：全栈快速生成体系

// 完整的快速生成方案
class FastFormGenerator {
  constructor(private framework: 'vue' | 'react') {}
  // 从数据库表生成
  fromTable(tableName: string): FormConfig {
    const columns = this.getTableMeta(tableName);
    return this.generateForm(columns);
  }
  // 从API接口生成
  fromApi(endpoint: string): FormConfig {
    const schema = this.inferSchema(endpoint);
    return this.jsonSchemaToForm(schema);
  }
  // 可视化编辑器
  visualEditor(): {
    drag: (field: FieldType) => void;
    export: () => FormConfig;
    preview: () => JSX.Element;
  }
}
// 使用示例
const generator = new FastFormGenerator('react');
// 方式1: 从数据库表生成
const userForm = generator.fromTable('users');
// 方式2: 从API生成
const loginForm = generator.fromApi('/api/login/schema');
// 方式3: 可视化拖拽
const editor = generator.visualEditor();
editor.drag('input'); // 拖入一个输入框

推荐技术栈组合

实际项目快速启动

# 使用 create-form-app 脚手架
npx create-form-app my-app --template react-antd
# 自动生成 CRUD 页面
npx form-cli generate --table users --fields name,email,age
# 可视化编辑器
npm install form-generator-designer -g
form-designer start

选择建议

• 追求效率：使用 Amis 或 form-generator
• 需要定制：Formily 或 RJSF
• 企业级项目：Ant Design Pro / Element Plus
• 数据库驱动：自定义代码生成器 + 模板引擎

推荐先尝试 Amis 或 form-generator 方案，1小时即可上手并生成可用表单。

标签： 表单生成 全栈框架