当前位置：首页 > article >正文

表单配置化方案：Formily

article 2025/2/11 16:08:34

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

在构建现代前端应用时，表单是一个常见的组件。然而，手动编写表单代码可能会非常繁琐和重复。为了解决这个问题，一些开发者开始探索表单配置化的方案。Formily 是一个优秀的表单配置化解决方案，它可以帮助开发者快速构建和管理表单。

1. Formily 的核心概念

Formily 是一个基于 JSON Schema 的表单配置化方案。它将表单的配置信息存储在 JSON Schema 中，然后通过解析 JSON Schema 来生成表单。这种方式使得表单的配置和管理变得更加简单和高效。

2. Formily 的优势

2.1 简化表单开发

Formily 可以大大简化表单的开发过程。开发者只需要编写 JSON Schema，就可以生成一个完整的表单。这种方式避免了手动编写表单代码的繁琐和重复。

2.2 提高表单的可维护性

Formily 可以提高表单的可维护性。由于表单的配置信息存储在 JSON Schema 中，开发者可以轻松地修改和更新表单。这种方式使得表单的维护变得更加简单和高效。

2.3 支持多种表单控件

Formily 支持多种表单控件，如输入框、选择框、日期选择器等。开发者可以根据需要选择合适的表单控件，快速构建复杂的表单。

2.4 支持表单验证

Formily 支持表单验证。开发者可以在 JSON Schema 中定义验证规则，然后 Formily 会自动根据验证规则进行验证。这种方式使得表单验证变得更加简单和高效。

3. Formily 的使用

使用 Formily 非常简单。首先，确保你已经安装了 Formily。如果还没有安装，可以通过 npm 或 yarn 进行安装：

npm install @formily/core @formily/react
# 或者
yarn add @formily/core @formily/react

然后，你可以在你的项目中使用 Formily。以下是一个简单的示例：

import React from 'react';
import { createForm } from '@formily/core';
import { FormProvider, Field } from '@formily/react';

const form = createForm();

const schema = {
  type: 'object',
  properties: {
    username: {
      type: 'string',
      title: '用户名',
      'x-decorator': 'FormItem',
      'x-component': 'Input',
    },
    password: {
      type: 'string',
      title: '密码',
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-component-props': {
        type: 'password',
      },
    },
  },
};

function App() {
  return (
    <FormProvider form={form}>
      <Field schema={schema} />
    </FormProvider>
  );
}

export default App;