Formily表单生成器：JSON配置转表单界面-优快云博客

Formily表单生成器：JSON配置转表单界面

【免费下载链接】formily 📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 项目地址: https://gitcode.com/gh_mirrors/fo/formily

在日常开发中，你是否还在为繁琐的表单编写而烦恼？从UI布局到数据校验，每一步都需要大量重复工作。现在，Formily表单生成器（Form Builder）来了！只需简单的JSON配置，就能快速生成功能完善的表单界面，让你告别重复劳动，专注业务逻辑。本文将带你深入了解如何使用Formily表单生成器，通过JSON配置轻松构建专业表单。

什么是Formily表单生成器

Formily表单生成器是基于designable开发的扩展包，它继承了designable的模块化组合理念，一切皆可替换，同时提供了Formily基础表单的搭建和配置能力。通过可视化拖拽或JSON配置，即可快速生成复杂表单，极大提升开发效率。

核心优势

JSON驱动：通过JSON Schema定义表单结构，实现数据与UI的分离
丰富组件：内置Input、Select、DatePicker等30+常用表单组件
灵活布局：支持Tab、Collapse、Grid等多种布局方式
动态交互：轻松实现表单联动、条件渲染等复杂交互逻辑
跨框架支持：支持React/React Native/Vue 2/Vue 3等多种框架

快速开始

安装依赖

根据你使用的UI库选择对应的安装命令：

Ant Design用户：

npm install --save @designable/formily-antd

Alibaba Fusion用户：

npm install --save @designable/formily-next

基础使用示例

下面是一个简单的表单生成器应用示例，完整代码可参考示例源代码：

import React, { useMemo } from 'react'
import { Designer, Workspace, ResourceWidget } from '@designable/react'
import { createDesigner } from '@designable/core'
import { Form, Input, Select, FormGrid } from '../src'

const App = () => {
  const engine = useMemo(() => createDesigner({
    rootComponentName: 'Form'
  }), [])
  
  return (
    <Designer engine={engine}>
      <Workspace>
        <ResourceWidget 
          sources={[Input, Select, FormGrid]} 
        />
      </Workspace>
    </Designer>
  )
}

核心功能详解

1. 可视化设计器

Formily表单生成器提供了直观的可视化设计界面，主要包含以下几个部分：

组件面板：包含各种输入控件、布局组件、自增组件和展示组件
画布区域：拖拽组件进行表单设计的主要工作区
属性设置面板：配置选中组件的属性和样式
大纲树：展示表单组件的层级结构
历史记录：支持撤销/重做操作

2. JSON Schema配置

除了可视化拖拽，你还可以直接通过JSON Schema来定义表单结构。下面是一个简单的登录表单JSON配置示例：

{
  "type": "object",
  "properties": {
    "username": {
      "type": "string",
      "title": "用户名",
      "required": true,
      "x-component": "Input"
    },
    "password": {
      "type": "string",
      "title": "密码",
      "required": true,
      "x-component": "Password"
    }
  }
}

将上述JSON配置导入Formily表单生成器，即可得到一个完整的登录表单。

3. 丰富的组件库

Formily表单生成器内置了丰富的表单组件，主要分为以下几类：

输入控件：

Input：文本输入框
Password：密码输入框
NumberPicker：数字选择器
Select：下拉选择器
DatePicker：日期选择器
Upload：文件上传

布局组件：

FormGrid：栅格布局
FormTab：标签页布局
FormCollapse：折叠面板布局
Card：卡片容器

数组组件：

ArrayCards：卡片式数组
ArrayTable：表格式数组

4. 高级功能

表单联动

Formily支持通过x-reactions属性实现组件之间的联动效果，例如：

{
  "properties": {
    "type": {
      "type": "string",
      "title": "类型",
      "x-component": "Select",
      "enum": ["text", "number"]
    },
    "content": {
      "type": "string",
      "title": "内容",
      "x-component": "{{ $form.values.type === 'text' ? 'Input' : 'NumberPicker' }}"
    }
  }
}

数据校验

通过JSON Schema的required、pattern等关键字，或Formily的x-validator属性实现数据校验：

{
  "properties": {
    "email": {
      "type": "string",
      "title": "邮箱",
      "required": true,
      "pattern": "^\\S+@\\S+\\.\\S+$",
      "x-validator": "email"
    }
  }
}

实际应用场景

后台管理系统表单

在后台管理系统中，Formily表单生成器可以快速构建各种数据录入表单，如用户管理、商品编辑等。通过JSON配置，你可以轻松定义复杂的表单结构，而无需编写大量重复的UI代码。

动态表单需求

对于需要根据后端配置动态生成的表单，Formily表单生成器更是得心应手。只需后端返回JSON Schema，前端即可渲染出完整的表单界面，实现前后端的完美配合。

低代码平台

Formily表单生成器也非常适合集成到低代码平台中，为非技术人员提供直观的表单设计工具，实现"所见即所得"的表单开发体验。

总结

Formily表单生成器通过JSON配置转表单界面的方式，极大简化了表单开发流程，提高了开发效率。无论是简单的登录表单，还是复杂的多步骤表单，Formily都能轻松应对。

如果你想了解更多关于Formily表单生成器的内容，可以查阅以下资源：

立即尝试Formily表单生成器，让表单开发变得简单高效！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考