Formily教程 | formily是中后台复杂场景的表单解决方案
前言
formily 不是一个简单的前端轮子。Formily 是一个由阿里巴巴集团多 BU 共建的面向中后台复杂场景的表单解决方案,它也是一个表单框架。它的前身是供应链平台在 2019 年初对外开源的 UForm 解决方案,UForm 的前身又是在供应链平台内部自研的某个表单框架。总体来看,Formily 是一个经过了漫长时间所磨炼,沉淀出来的表单解决方案。
它解决什么问题?
如果你们的后台有超级多的表单,那么选它没得问题。中台我觉得是一个复杂的概念,如果你们公司一直说这个事儿,那么这个formily可以是你的技术池(备胎)。它有复杂的表单联动,表单校验,满足大部分表单的需求,平时使用的都是非常简单的表单。一份JSON就可以实现复杂的表单,开箱即用。
开箱即用的栗子
说实话,这玩意唯一的缺点不是文档写的不好,而是不管用VUE人的死活。除了@formily/vue
里面的栗子用了VUE
,其他的所有栗子都是React
。一个表单提交,我整整花了两个小时(是我菜了),下面我会重点提出来的。npm啥的我就不说了。官方文档都有
注意: 这里的技术栈是 VUE + Formily + element UI
// form.vue
<template>
<ElForm class="flex flex-column" label-width="180px">
<FormProvider :form="form">
<SchemaField
:schema="schema"
/>
<FormConsumer>
<!-- 非常重要!!!! FormConsumer必须是这个位置 才能表单消费 -->
<template #default="{ form }">
<button @click='form.submit'></button> //官方文档根本不管VUE的死活在这里!!!
</template>
</FormConsumer>
</FormProvider>
</ElForm>
</template>
<script>
import { createForm, onFormValuesChange, onFormSubmit } from '@formily/core' //必须要引入
import { FormProvider, createSchemaField, FormConsumer } from '@formily/vue' //vue
import { Input } from 'element' //初次上手建议 就直接引用element UI 组件就可以了
const { SchemaField } = createSchemaField({
Input
}) //代表你需要这个生成器给你生成什么样的表单组件
export default {
components: { FormProvider, SchemaField, FormConsumer },
data() {
return {
form: createForm({effects: this.useEffects}), //生成表单的方法,传入监听的参数
schema: null
}
},
mounted() {
this.schema = {
type: 'object',
properties: {
name: {
type: 'string',
title: '名称',
required: true,
'x-component': 'Input'
}
}
}
},
methods: {
useEffects() {
onFormValuesChange(form => { //监听数据变化了
console.log(form) //这个form 很重要 这里你才能够拿到表单的值
})
onFormSubmit(form => { //监听表单提交
console.log(form)
})
},
}
}
避雷指南
我非常理解一个坑对于做这个功能的人,有多么令人崩溃。官方文档的栗子,要么没有告诉你怎么提交的,要么就是拿着@formily/next
Submit,@formily/next
是基于 Fusion Design
封装的针对表单场景专业级(Professional)组件库。但我们不是有了element UI 组件了吗?大可不必
总结
这是一个非常入门级的源码,而且我的业务才刚刚开始做,上百个表单等我实现,应该还有下一个避雷指南。而且对于element 二次封装也很可以。复杂的表单有复杂的UI,不是一个element 单一组件就可以漂亮实现。下一期介绍formily 的一些概念,虽然我也是临时抱佛脚,周末学习了formily,大家一起探讨。不知道掘金有没有问题答疑~我是真的没有看到有很多formily文章输出
Formily教程 | formily是中后台复杂场景的表单解决方案的更多相关文章
- jsp中普通按钮如何提交表单
jsp中普通按钮如何提交表单方法1: <form action = "提交的地址"> <input type="submit" ...
- struts2中token防止重复提交表单
struts2中token防止重复提交表单 >>>>>>>>>>>>>>>>>>>&g ...
- Winform开发框架中工作流模块的业务表单开发
在我们开发工作流的时候,往往需要设计到具体业务表单信息的编辑,有些是采用动态编辑的,有些则是在开发过程中处理的,各有各的优点,动态编辑的则方便维护各种各样的表单,但是数据的绑定及处理则比较麻烦,而自定 ...
- iframe中使用模态框提交表单后,iframe加载父页面的解决方法
在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...
- Django笔记&教程 6-3 使用模型(models)创建表单(form)
Django 自学笔记兼学习教程第6章第3节--使用模型(models)创建表单(form) 点击查看教程总目录 本文参考:Forms for models 1 - 初步介绍 很多时候,我们使用的表单 ...
- jeecg中vaildfrom的复杂的表单校验
简介 jeecg生成的页面都是使用validfrom组件来确保数据的完整性和准确性. 凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式. 如果 ...
- 在火狐、360等浏览器中,用jquery创建表单并发送的问题
某些浏览器无法使用js或者jquery直接创建表单并发送,这是由于这些浏览器在提交页面表单时要求页面有完整的标签项即<html><head><title></ ...
- lavarel框架中如何使用ajax提交表单
开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...
- ASP.NET MVC 中将数据从View传递到控制器中的三种方法(表单数据绑定)
http://www.cnblogs.com/zyqgold/archive/2010/11/22/1884779.html 在ASP.NET MVC框架中,将视图中的数据传递到控制器中,主要通过发送 ...
随机推荐
- IntelliJ IDEA配置tomcat 教程
1.点击Run-Edit Configurations... 2.点击左侧"+",选择Tomcat Server--Local 3.在Tomcat Server -> Unn ...
- redis 和 mysql 的主从复制
1. mysql主从复制 (1) 为什么要做主从复制? 1.在业务复杂的系统中,有这么一个情景,有一句sql语句需要锁表,导致暂时不能使用读的服务,那么就很影响运行中的业务,使用主从复制,让主库负责写 ...
- Apache Jena Fuseki使用
下载Apache Jena Fuseki 先从apache官网下载fuseki压缩包.然后解压到目标文件夹. apache官网:http://jena.apache.org/download/ 这里我 ...
- JAVA基础语法-day02
五.变量.常量.作用域 静态量(类变量)只能写在类中,不能在外面,用static修饰. final修饰的变量为常量. 六.运算符 Math类是一个工具类,用于复杂数学运算,它的构造器被定义成priva ...
- selenium模拟不同浏览器的方式
from selenium import webdriver # 使用Firefox手机浏览器 user_agent = "Mozilla/5.0 (iPad; CPU OS 12_1 li ...
- GPU编程和流式多处理器(七)
6. 杂项说明 6.1. warp级原语 warp作为执行的原始单元(自然位于线程和块之间),重要性对CUDA程序员显而易见.从SM 1.x开始,NVIDIA开始添加专门针对thread的指令. Vo ...
- CUDA C++编程手册(总论)
CUDA C++编程手册(总论) CUDA C++ Programming Guide The programming guide to the CUDA model and interface. C ...
- Python小白的数学建模课-07 选址问题
选址问题是要选择设施位置使目标达到最优,是数模竞赛中的常见题型. 小白不一定要掌握所有的选址问题,但要能判断是哪一类问题,用哪个模型. 进一步学习 PuLP工具包中处理复杂问题的字典格式快捷建模方法. ...
- tar与NTP时间同步
tar备份与恢复 归档和压缩 : 1.方便对零散文件管理 2.减少空间的占用 常见的压缩格式及命令工具: gzip ----> .gz bzip2 ---->.bz2 xz ---- ...
- ES6中的字符串
字符串在编程语言中,一直是使用率很高的数据,虽说函数在js语言中是一等公民,但是字符串,怎么也能算得上是千年老二,下面我就一起和大家探讨一下在es6中的一些新用法和特性,特别是在字符串拼接的时候,会解 ...