前言

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/nextSubmit,@formily/next 是基于 Fusion Design 封装的针对表单场景专业级(Professional)组件库。但我们不是有了element UI 组件了吗?大可不必

总结

这是一个非常入门级的源码,而且我的业务才刚刚开始做,上百个表单等我实现,应该还有下一个避雷指南。而且对于element 二次封装也很可以。复杂的表单有复杂的UI,不是一个element 单一组件就可以漂亮实现。下一期介绍formily 的一些概念,虽然我也是临时抱佛脚,周末学习了formily,大家一起探讨。不知道掘金有没有问题答疑~我是真的没有看到有很多formily文章输出

Formily教程 | formily是中后台复杂场景的表单解决方案的更多相关文章

  1. jsp中普通按钮如何提交表单

    jsp中普通按钮如何提交表单方法1: <form action = "提交的地址">         <input type="submit" ...

  2. struts2中token防止重复提交表单

    struts2中token防止重复提交表单 >>>>>>>>>>>>>>>>>>>&g ...

  3. Winform开发框架中工作流模块的业务表单开发

    在我们开发工作流的时候,往往需要设计到具体业务表单信息的编辑,有些是采用动态编辑的,有些则是在开发过程中处理的,各有各的优点,动态编辑的则方便维护各种各样的表单,但是数据的绑定及处理则比较麻烦,而自定 ...

  4. iframe中使用模态框提交表单后,iframe加载父页面的解决方法

    在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...

  5. Django笔记&教程 6-3 使用模型(models)创建表单(form)

    Django 自学笔记兼学习教程第6章第3节--使用模型(models)创建表单(form) 点击查看教程总目录 本文参考:Forms for models 1 - 初步介绍 很多时候,我们使用的表单 ...

  6. jeecg中vaildfrom的复杂的表单校验

    简介 jeecg生成的页面都是使用validfrom组件来确保数据的完整性和准确性. 凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式. 如果 ...

  7. 在火狐、360等浏览器中,用jquery创建表单并发送的问题

    某些浏览器无法使用js或者jquery直接创建表单并发送,这是由于这些浏览器在提交页面表单时要求页面有完整的标签项即<html><head><title></ ...

  8. lavarel框架中如何使用ajax提交表单

    开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...

  9. ASP.NET MVC 中将数据从View传递到控制器中的三种方法(表单数据绑定)

    http://www.cnblogs.com/zyqgold/archive/2010/11/22/1884779.html 在ASP.NET MVC框架中,将视图中的数据传递到控制器中,主要通过发送 ...

随机推荐

  1. IntelliJ IDEA配置tomcat 教程

    1.点击Run-Edit Configurations... 2.点击左侧"+",选择Tomcat Server--Local 3.在Tomcat Server -> Unn ...

  2. redis 和 mysql 的主从复制

    1. mysql主从复制 (1) 为什么要做主从复制? 1.在业务复杂的系统中,有这么一个情景,有一句sql语句需要锁表,导致暂时不能使用读的服务,那么就很影响运行中的业务,使用主从复制,让主库负责写 ...

  3. Apache Jena Fuseki使用

    下载Apache Jena Fuseki 先从apache官网下载fuseki压缩包.然后解压到目标文件夹. apache官网:http://jena.apache.org/download/ 这里我 ...

  4. JAVA基础语法-day02

    五.变量.常量.作用域 静态量(类变量)只能写在类中,不能在外面,用static修饰. final修饰的变量为常量. 六.运算符 Math类是一个工具类,用于复杂数学运算,它的构造器被定义成priva ...

  5. selenium模拟不同浏览器的方式

    from selenium import webdriver # 使用Firefox手机浏览器 user_agent = "Mozilla/5.0 (iPad; CPU OS 12_1 li ...

  6. GPU编程和流式多处理器(七)

    6. 杂项说明 6.1. warp级原语 warp作为执行的原始单元(自然位于线程和块之间),重要性对CUDA程序员显而易见.从SM 1.x开始,NVIDIA开始添加专门针对thread的指令. Vo ...

  7. CUDA C++编程手册(总论)

    CUDA C++编程手册(总论) CUDA C++ Programming Guide The programming guide to the CUDA model and interface. C ...

  8. Python小白的数学建模课-07 选址问题

    选址问题是要选择设施位置使目标达到最优,是数模竞赛中的常见题型. 小白不一定要掌握所有的选址问题,但要能判断是哪一类问题,用哪个模型. 进一步学习 PuLP工具包中处理复杂问题的字典格式快捷建模方法. ...

  9. tar与NTP时间同步

    tar备份与恢复 归档和压缩 : 1.方便对零散文件管理    2.减少空间的占用 常见的压缩格式及命令工具: gzip ----> .gz bzip2 ---->.bz2 xz ---- ...

  10. ES6中的字符串

    字符串在编程语言中,一直是使用率很高的数据,虽说函数在js语言中是一等公民,但是字符串,怎么也能算得上是千年老二,下面我就一起和大家探讨一下在es6中的一些新用法和特性,特别是在字符串拼接的时候,会解 ...