福建网站建设公司/杭州seo联盟

福建网站建设公司,杭州seo联盟,北京网站制作人才,网站免费服务器文章目录 1、Formily表单介绍2、安装依赖2.1、安装内核库2.2、 安装 UI 桥接库2.3、Formily 支持多种 UI 组件生态: 3、表单设计器3.1、核心理念3.2、安装3.3、示例源码 4、场景案例-登录注册4.1、Markup Schema 案例4.2、JSON Schema 案例4.3、纯 JSX 案例 1、Form…

文章目录

    • 1、Formily表单介绍
    • 2、安装依赖
      • 2.1、安装内核库
      • 2.2、 安装 UI 桥接库
      • 2.3、Formily 支持多种 UI 组件生态:
    • 3、表单设计器
      • 3.1、核心理念
      • 3.2、安装
      • 3.3、示例源码
    • 4、场景案例-登录注册
      • 4.1、Markup Schema 案例
      • 4.2、JSON Schema 案例
      • 4.3、纯 JSX 案例

1、Formily表单介绍

Formily 是一个由阿里开源的动态表单解决方案,主要用于构建和管理复杂的表单界面。支持多种前端框架,包括但不限于 React 和 Vue,支持图形可视化界面设计表单,支持多种 UI 组件集成,Formily 的核心优势在于其灵活性和扩展性,允许开发者以声明式的方式定义表单结构和行为。

同类表单产品比较:

能力Ant Design FormFusion FormFormikReact Final FormReact Schema FormReact Hook FormFormily1.xFormily2.x
自定义组件接入成本4.x接入成本低
性能4.x性能较好较好非常好非常好
是否支持动态渲染
是否开箱即用
是否支持跨端
开发效率一般一般一般一般一般
学习成本很高
视图代码可维护性
场景化封装能力
是否支持表单预览态

2、安装依赖

2.1、安装内核库

使用 Formily 必须要用到@formily/core,它负责管理表单的状态,表单校验,联动等等。

npm install --save @formily/core

2.2、 安装 UI 桥接库

单纯有了内核还不够,我们还需要一个 UI 库来接入内核数据,用来实现最终的表单交互效果,对于不同框架的用户,我们有不同的桥接库。

Vue 用户

npm install --save @formily/vue

2.3、Formily 支持多种 UI 组件生态:

包含 @formily/antd、@formily/antd-v5、@formily/antd-mobile、@formily/next、@formily/element、@formily/element-plus、@formily/antdv、@formily/vant 、@formily/semi、@formily/tdesign-react、aliyun teamix、antd-formily-boost。

3、表单设计器

Formily 表单设计器是基于designable而扩展出来的扩展包,它在继承了 designable 的基础能力上,提供了 Formily 基础表单的搭建和配置能力。

在这里插入图片描述

3.1、核心理念

Designable 的核心理念是将设计器搭建变成模块化组合,一切可替换,Designable 本身提供了一系列开箱即用的组件给用户使用,但是如果用户对组件不满意,是可以直接替换组件,从而实现最大化灵活定制,也就是 Designable 本身是不会提供任何插槽 Plugin 相关的 API

3.2、安装

Ant Design 用户

npm install --save @designable/formily-antd

Alibaba Fusion 用户

npm install --save @designable/formily-next

3.3、示例源码

import 'antd/dist/antd.less'
import React, { useMemo } from 'react'
import ReactDOM from 'react-dom'
import {Designer, //设计器根组件,主要用于下发上下文DesignerToolsWidget, //画板工具挂件ViewToolsWidget, //视图切换工具挂件Workspace, //工作区组件,核心组件,用于管理工作区内的拖拽行为,树节点数据等等...OutlineTreeWidget, //大纲树组件,它会自动识别当前工作区,展示出工作区内树节点ResourceWidget, //拖拽源挂件HistoryWidget, //历史记录挂件StudioPanel, //主布局面板CompositePanel, //左侧组合布局面板WorkspacePanel, //工作区布局面板ToolbarPanel, //工具栏布局面板ViewportPanel, //视口布局面板ViewPanel, //视图布局面板SettingsPanel, //右侧配置表单布局面板ComponentTreeWidget, //组件树渲染器
} from '@designable/react'
import { SettingsForm } from '@designable/react-settings-form'
import {createDesigner,GlobalRegistry,Shortcut,KeyCode,
} from '@designable/core'
import {LogoWidget,ActionsWidget,PreviewWidget,SchemaEditorWidget,MarkupSchemaWidget,
} from './widgets'
import { saveSchema } from './service'
import {Form,Field,Input,Select,TreeSelect,Cascader,Radio,Checkbox,Slider,Rate,NumberPicker,Transfer,Password,DatePicker,TimePicker,Upload,Switch,Text,Card,ArrayCards,ObjectContainer,ArrayTable,Space,FormTab,FormCollapse,FormLayout,FormGrid,
} from '../src'GlobalRegistry.registerDesignerLocales({'zh-CN': {sources: {Inputs: '输入控件',Layouts: '布局组件',Arrays: '自增组件',Displays: '展示组件',},},'en-US': {sources: {Inputs: 'Inputs',Layouts: 'Layouts',Arrays: 'Arrays',Displays: 'Displays',},},
})const App = () => {const engine = useMemo(() =>createDesigner({shortcuts: [new Shortcut({codes: [[KeyCode.Meta, KeyCode.S],[KeyCode.Control, KeyCode.S],],handler(ctx) {saveSchema(ctx.engine)},}),],rootComponentName: 'Form',}),[])return (<Designer engine={engine}><StudioPanel logo={<LogoWidget />} actions={<ActionsWidget />}><CompositePanel><CompositePanel.Item title="panels.Component" icon="Component"><ResourceWidgettitle="sources.Inputs"sources={[Input,Password,NumberPicker,Rate,Slider,Select,TreeSelect,Cascader,Transfer,Checkbox,Radio,DatePicker,TimePicker,Upload,Switch,ObjectContainer,]}/><ResourceWidgettitle="sources.Layouts"sources={[Card,FormGrid,FormTab,FormLayout,FormCollapse,Space,]}/><ResourceWidgettitle="sources.Arrays"sources={[ArrayCards, ArrayTable]}/><ResourceWidget title="sources.Displays" sources={[Text]} /></CompositePanel.Item><CompositePanel.Item title="panels.OutlinedTree" icon="Outline"><OutlineTreeWidget /></CompositePanel.Item><CompositePanel.Item title="panels.History" icon="History"><HistoryWidget /></CompositePanel.Item></CompositePanel><Workspace id="form"><WorkspacePanel><ToolbarPanel><DesignerToolsWidget /><ViewToolsWidgetuse={['DESIGNABLE', 'JSONTREE', 'MARKUP', 'PREVIEW']}/></ToolbarPanel><ViewportPanel><ViewPanel type="DESIGNABLE">{() => (<ComponentTreeWidgetcomponents={{Form,Field,Input,Select,TreeSelect,Cascader,Radio,Checkbox,Slider,Rate,NumberPicker,Transfer,Password,DatePicker,TimePicker,Upload,Switch,Text,Card,ArrayCards,ArrayTable,Space,FormTab,FormCollapse,FormGrid,FormLayout,ObjectContainer,}}/>)}</ViewPanel><ViewPanel type="JSONTREE" scrollable={false}>{(tree, onChange) => (<SchemaEditorWidget tree={tree} onChange={onChange} />)}</ViewPanel><ViewPanel type="MARKUP" scrollable={false}>{(tree) => <MarkupSchemaWidget tree={tree} />}</ViewPanel><ViewPanel type="PREVIEW">{(tree) => <PreviewWidget tree={tree} />}</ViewPanel></ViewportPanel></WorkspacePanel></Workspace><SettingsPanel title="panels.PropertySettings"><SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" /></SettingsPanel></StudioPanel></Designer>)
}ReactDOM.render(<App />, document.getElementById('root'))

4、场景案例-登录注册

4.1、Markup Schema 案例

在这里插入图片描述

import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import { Form, FormItem, Input, Password, Submit } from '@formily/antd'
import { Tabs, Card } from 'antd'
import * as ICONS from '@ant-design/icons'
import { VerifyCode } from './VerifyCode'const normalForm = createForm({validateFirst: true,
})const phoneForm = createForm({validateFirst: true,
})const SchemaField = createSchemaField({components: {FormItem,Input,Password,VerifyCode,},scope: {icon(name) {return React.createElement(ICONS[name])},},
})export default () => {return (<divstyle={{display: 'flex',justifyContent: 'center',background: '#eee',padding: '40px 0',}}><Card style={{ width: 400 }}><Tabs style={{ overflow: 'visible', marginTop: -10 }}><Tabs.TabPane key="1" tab="账密登录"><Formform={normalForm}layout="vertical"size="large"onAutoSubmit={console.log}><SchemaField><SchemaField.Stringname="username"title="用户名"requiredx-decorator="FormItem"x-component="Input"x-validator={{required: true,}}x-component-props={{prefix: "{{icon('UserOutlined')}}",}}/><SchemaField.Stringname="password"title="密码"requiredx-decorator="FormItem"x-component="Password"x-component-props={{prefix: "{{icon('LockOutlined')}}",}}/></SchemaField><Submit block size="large">登录</Submit></Form></Tabs.TabPane><Tabs.TabPane key="2" tab="手机登录"><Formform={phoneForm}layout="vertical"size="large"onAutoSubmit={console.log}><SchemaField><SchemaField.Stringname="phone"title="手机号"requiredx-validator="phone"x-decorator="FormItem"x-component="Input"x-component-props={{prefix: "{{icon('PhoneOutlined')}}",}}/><SchemaField.Stringname="verifyCode"title="验证码"requiredx-decorator="FormItem"x-component="VerifyCode"x-component-props={{prefix: "{{icon('LockOutlined')}}",}}x-reactions={[{dependencies: ['.phone#value', '.phone#valid'],fulfill: {state: {'component[1].readyPost': '{{$deps[0] && $deps[1]}}','component[1].phoneNumber': '{{$deps[0]}}',},},},]}/></SchemaField><Submit block size="large">登录</Submit></Form></Tabs.TabPane></Tabs><divstyle={{display: 'flex',justifyContent: 'space-between',}}><a href="#新用户注册">新用户注册</a><a href="#忘记密码">忘记密码?</a></div></Card></div>)
}

4.2、JSON Schema 案例

在这里插入图片描述

import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import { Form, FormItem, Input, Password, Submit } from '@formily/antd'
import { Tabs, Card } from 'antd'
import * as ICONS from '@ant-design/icons'
import { VerifyCode } from './VerifyCode'const normalForm = createForm({validateFirst: true,
})const phoneForm = createForm({validateFirst: true,
})const SchemaField = createSchemaField({components: {FormItem,Input,Password,VerifyCode,},scope: {icon(name) {return React.createElement(ICONS[name])},},
})const normalSchema = {type: 'object',properties: {username: {type: 'string',title: '用户名',required: true,'x-decorator': 'FormItem','x-component': 'Input','x-component-props': {prefix: "{{icon('UserOutlined')}}",},},password: {type: 'string',title: '密码',required: true,'x-decorator': 'FormItem','x-component': 'Password','x-component-props': {prefix: "{{icon('LockOutlined')}}",},},},
}const phoneSchema = {type: 'object',properties: {phone: {type: 'string',title: '手机号',required: true,'x-validator': 'phone','x-decorator': 'FormItem','x-component': 'Input','x-component-props': {prefix: "{{icon('PhoneOutlined')}}",},},verifyCode: {type: 'string',title: '验证码',required: true,'x-decorator': 'FormItem','x-component': 'VerifyCode','x-component-props': {prefix: "{{icon('LockOutlined')}}",},'x-reactions': [{dependencies: ['.phone#value', '.phone#valid'],fulfill: {state: {'component[1].readyPost': '{{$deps[0] && $deps[1]}}','component[1].phoneNumber': '{{$deps[0]}}',},},},],},},
}export default () => {return (<divstyle={{display: 'flex',justifyContent: 'center',background: '#eee',padding: '40px 0',}}><Card style={{ width: 400 }}><Tabs style={{ overflow: 'visible', marginTop: -10 }}><Tabs.TabPane key="1" tab="账密登录"><Formform={normalForm}layout="vertical"size="large"onAutoSubmit={console.log}><SchemaField schema={normalSchema} /><Submit block size="large">登录</Submit></Form></Tabs.TabPane><Tabs.TabPane key="2" tab="手机登录"><Formform={phoneForm}layout="vertical"size="large"onAutoSubmit={console.log}><SchemaField schema={phoneSchema} /><Submit block size="large">登录</Submit></Form></Tabs.TabPane></Tabs><divstyle={{display: 'flex',justifyContent: 'space-between',}}><a href="#新用户注册">新用户注册</a><a href="#忘记密码">忘记密码?</a></div></Card></div>)
}

4.3、纯 JSX 案例

import React from 'react'
import { createForm } from '@formily/core'
import { Field } from '@formily/react'
import { Form, FormItem, Input, Password, Submit } from '@formily/antd'
import { Tabs, Card } from 'antd'
import { UserOutlined, LockOutlined, PhoneOutlined } from '@ant-design/icons'
import { VerifyCode } from './VerifyCode'const normalForm = createForm({validateFirst: true,
})const phoneForm = createForm({validateFirst: true,
})export default () => {return (<divstyle={{display: 'flex',justifyContent: 'center',background: '#eee',padding: '40px 0',}}><Card style={{ width: 400 }}><Tabs style={{ overflow: 'visible', marginTop: -10 }}><Tabs.TabPane key="1" tab="账密登录"><Formform={normalForm}layout="vertical"size="large"onAutoSubmit={console.log}><Fieldname="username"title="用户名"requireddecorator={[FormItem]}component={[Input,{prefix: <UserOutlined />,},]}/><Fieldname="password"title="密码"requireddecorator={[FormItem]}component={[Password,{prefix: <LockOutlined />,},]}/><Submit block size="large">登录</Submit></Form></Tabs.TabPane><Tabs.TabPane key="2" tab="手机登录"><Formform={phoneForm}layout="vertical"size="large"onAutoSubmit={console.log}><Fieldname="phone"title="手机号"requiredvalidator="phone"decorator={[FormItem]}component={[Input,{prefix: <PhoneOutlined />,},]}/><Fieldname="verifyCode"title="验证码"requiredreactions={(field) => {const phone = field.query('.phone')field.setComponentProps({readyPost: phone.get('valid') && phone.get('value'),phoneNumber: phone.get('value'),})}}decorator={[FormItem]}component={[VerifyCode,{prefix: <LockOutlined />,},]}/><Submit block size="large">登录</Submit></Form></Tabs.TabPane></Tabs><divstyle={{display: 'flex',justifyContent: 'space-between',}}><a href="#新用户注册">新用户注册</a><a href="#忘记密码">忘记密码?</a></div></Card></div>)
}

在这里插入图片描述


没有谁能击垮你,除非你自甘堕落。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/74566.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NAT 实验:多私网环境下 NAPT、Easy IP 配置及 FTP 服务公网映射

NAT基本概念 定义&#xff1a;网络地址转换&#xff08;Network Address Translation&#xff0c;NAT&#xff09;是一种将私有&#xff08;保留&#xff09;地址转化为合法公网 IP 地址的转换技术&#xff0c;它被广泛应用于各种类型 Internet 接入方式和各种类型的网络中。作…

el-table 合并单元格

vue2使用el-table合并单元格&#xff0c;包括合并行、合并列 <el-table:header-cell-style"handerMethod":span-method"arraySpanMethod"cell-click"handleCellClick":data"tableData"style"width: 100%"><el-tabl…

网络安全之vlan实验

在对vlan进行一定的学习之后我们来练习一个小实验来加深理解记忆 首先是对实验进行一个搭建 第一部分&#xff1a;给交换机配置vlan 首先是sw1 [Huawei]vlan batch 2 to 5 [Huawei]int g0/0/1 [Huawei-GigabitEthernet0/0/1]port hybrid tagged vlan 2 [Huawei-GigabitEthe…

RAG优化:python从零实现query转换增强技术

本篇仍然是不依赖于LangChain等专用库,利用python基本库实现了三种查询转换技术 查询重写:使查询更加具体和详细,以提高搜索精度。回退提示:生成更广泛的查询以检索有用的上下文信息。子查询分解:将复杂查询分解为更简单的组件,以实现全面检索。图 1:RAG 中的查询重写(…

登录验证码的接口实习,uuid,code.

UID是唯一标识的字符串,下面是百度百科关于UUID的定义&#xff1a; UUID是由一组32位数的16进制数字所构成&#xff0c;是故UUID理论上的总数为16322128&#xff0c;约等于3.4 x 10^38。也就是说若每纳秒产生1兆个UUID&#xff0c;要花100亿年才会将所有UUID用完。 UUID的标准…

双指针---《移动零》

目录 文章前言 题目描述 算法原理讲解 忽略限制条件的解法 原理讲解 思路总结 代码展示 双指针解法 原理讲解 思路总结 代码展示 大总结 &#x1f4ab;只有认知的突破&#x1f4ab;才来带来真正的成长&#x1f4ab;编程技术的学习&#x1f4ab;没有捷径&#x1f4ab;…

jangow-01-1.0.1靶机攻略

1.进行配置&#xff0c;按住shift&#xff0c;在图一界面按e进去得到图二 .ro 替换为 rw signie init/bin/bash ctrlx&#xff0c;ip a查看网卡信息&#xff0c;修改配置文件网卡信息 修改为如图所示内容后按shift?然后输入wq点击回车退出&#xff0c;然后重启靶机 2.在kali中…

安全上网沙箱:多方面解决政企私的上网问题

在数字化的浪潮中&#xff0c;网络已成为我们工作与生活不可或缺的一部分。然而&#xff0c;网络的便捷也伴随着诸多安全隐患&#xff0c;尤其是对于企业、个人以及政企机构而言&#xff0c;安全上外网成为了至关重要的课题。 隔离保护&#xff1a;构建安全堡垒 沙箱技术在内网…

C++ string的模拟实现

Hello!!大家早上中午晚上好&#xff0c;昨天复习了string的使用&#xff0c;今天来模拟实现一下string&#xff01;&#xff01;&#xff01; 一、string的框架搭建 1.1首先我们需要一个string的头文件用来做变量、函数、类等声明&#xff1b;再需要一个test文件来做测试,还需…

Java 中装饰者模式与策略模式在埋点系统中的应用

前言 在软件开发中&#xff0c;装饰者模式和策略模式是两种常用的设计模式&#xff0c;它们在特定的业务场景下能够发挥巨大的作用。本文将通过一个实际的埋点系统案例&#xff0c;探讨如何在 Java 中运用装饰者模式和策略模式&#xff0c;以及如何结合工厂方法模式来优化代码…

田间机器人幼苗视觉检测与护苗施肥装置研究(大纲)

田间机器人幼苗视觉检测与护苗施肥装置研究 基于多光谱视觉与精准施肥的农业机器人系统设计 第一章 绪论 1.1 研究背景与意义 农业智能化需求&#xff1a; 传统幼苗检测依赖人工&#xff0c;效率低且易遗漏弱苗/病苗施肥不精准导致资源浪费和环境污染 技术挑战&#xff1a;…

如何在Linux CentOS上安装和配置Redis

如何在Linux CentOS上安装和配置Redis 大家好&#xff0c;我是曾续缘。欢迎来到本教程&#xff01;今天我将向您介绍在Linux CentOS上安装和配置Redis的详细步骤。Redis是一个高性能的键值存储系统&#xff0c;常用于缓存、消息队列和数据持久化等应用场景。让我们一起开始吧&…

如何快速下载并安装 Postman?

从下载、安装、启动 Postman 这三个方面为大家详细讲解下载安装 Postman 每一步操作&#xff0c;帮助初学者快速上手。 Postman 下载及安装教程(2025最新)

使用Gitee Go流水线部署个人项目到服务器指南

使用Gitee Go流水线部署个人项目到服务器指南 前言&#xff01;&#xff01;&#xff01; 本文解决的问题&#xff1a; 你有一台ECS服务器&#xff0c;你在上面部署了一个Java服务也就是一个jar&#xff0c;你觉着你每次手动本地打包&#xff0c;上传&#xff0c;在通过命令去…

在 ASP .NET Core 9.0 中使用 Scalar 创建漂亮的 API 文档

示例代码&#xff1a;https://download.csdn.net/download/hefeng_aspnet/90407900 Scalar 是一款可帮助我们为 API 创建精美文档的工具。与感觉有些过时的默认 Swagger 文档不同&#xff0c;Scalar 为 API 文档提供了全新而现代的 UI。其简洁的设计让开发人员可以轻松找到测试…

Rabbitmq消息被消费时抛异常,进入Unacked 状态,进而导致消费者不断尝试消费(下)

一、消费流程图 消息在消费出现异常的时候&#xff0c;将一直保留在消息队列&#xff0c;所以你会看到以下奇怪的现象&#xff1a; 消息队列仅有5个消息&#xff0c; 投递速度也非常快&#xff0c;结果却一直无法消费掉。 二、重试策略 重试机制的使用场景&#xff1a;重试机制…

【STM32】知识点介绍二:GPIO引脚介绍

文章目录 一、概述二、GPIO的工作模式三、寄存器编程 一、概述 GPIO&#xff08;英语&#xff1a;General-purpose input/output&#xff09;,即通用I/O(输入/输出)端口&#xff0c;是STM32可控制的引脚。STM32芯片的GPIO引脚与外部设备连接起来&#xff0c;可实现与外部通讯、…

【赵渝强老师】达梦数据库的数据库对象

达梦数据库中包含各种数据库对象&#xff0c;主要分为两大类型&#xff1a;基本数据库对象和复杂数据库对象。下面分别进行介绍。 视频讲解如下 【赵渝强老师】达梦数据库的数据库对象 一、 基本数据库对象 常见的基本数据库对象有&#xff1a;表、索引、视图、序列、同义词等…

26考研——树与二叉树_树、森林(5)

408答疑 文章目录 二、树、森林树的基本概念树的定义和特性树的定义树的特性 基本术语树的基本术语和概念祖先、子孙、双亲、孩子、兄弟和堂兄弟结点的层次、度、深度和高度树的度和高度分支结点和叶结点有序树和无序树路径和路径长度 森林的基本术语和概念森林的定义森林与树的…

【HarmonyOS Next之旅】DevEco Studio使用指南(六)

目录 1 -> 在模块中添加Ability 1.1 -> Stage模型添加UIAbility 1.1.1 -> 在模块中添加UIAbility 1.1.2 -> 在模块中添加Extension Ability 2 -> 创建服务卡片 2.1 -> 概述 2.2 -> 使用约束 2.3 -> 创建服务卡片 2.4 -> 创建动态/静态卡片…