大家好，我是为广大程序员兄弟操碎了心的小编。每天推荐一个小工具/源码，填收藏夹。每天分享一个让你轻松节省开发效率，实现不加班不熬夜不掉头发的小技巧是我的目标！如果你的老板要你一天搭建一个100个表单和列表的开发平台，你该怎么办？？？委婉说明原因，指出工作量太大？？？？别着急，今天给大家推荐一个粉丝贡献的项目——Variant。Variant是一个快速开发框架/平台，包括前端项目VariantAdmin和后端项目VariantServer。Variant致力于提高业务逻辑开发效率，减少软件开发。不必要的重复工作。Variant为前端工程师提供强大的后端接口定制能力，Variant为后端工程师提供开放灵活的前端快速开发体验。如何获取链接地址小编就不贴了，同事去gitee或者github上搜索Variant就可以找到。技术选择前端选择：Vue+ElementUI+Vue.Draggable后端代码：开源在即，大家可以去gitee或Github搜索Variant了解实时动态表单设计方案右侧布局，如图下图中：窗体的排版布局由Tab（页面标签）>Section（块）>Row（行）>Cell（单元格）四层结构控制。一行（Row）平均分为24个格子Grid（span=24），单元格（Cell）的宽度由格子控制，Cell的最大宽度不超过24个格子。与其他表单设计解决方案最大的区别在于字段是表单布局的基本逻辑组件。字段具有自动加载和存储数据的能力。无需设计数据库或连接到后端API。所有这些都是自动完成的。毕竟我们是一天建100个表单和列表的全栈开发平台。字段类型为了满足99.9999%的业务需求，必须支持所有的基本字段类型。计划一共14个：Boolean（布尔值）、Integer（整数）、Decimal（小数精度）、Percent（百分比）、Money（金额）、Text（单行文本）、TextArea（长文本）、Option（单选项）),Tag(多选),Date(日期),DateTime(日期时间),Picture(图片),File(文件),Reference(对象引用)。其他更多的字段类型，如静态HTML、数字滑块、Ratescore等，都可以通过自定义组件的形式进行扩展实现。上传下载借助ElementUI强大的上传组件，可以轻松实现图片和文件的上传下载，包括限制上传文件类型、上传文件大小、上传文件数量等。为了深入理解，可以阅读field-widget.vue组件源码。图片/文件的下载依赖于后端实现。本开发平台后端实现了服务端的本地存储和下载逻辑。如果需要上传图片或者文件到专门的云存储平台，需要自己写代码实现（连接云存储平台API，实现起来不难）。表单校验逻辑所有字段类型都内置必填校验规则，数字/金额类型内置数字格式校验规则和最大最小值校验规则。此外，大多数字段（图像和文件字段除外）都支持添加自定义验证规则。自定义验证规则的功能来自src/utils/validators.js。您可以参考现有功能添加更多自定义验证规则功能。所有自定义的验证函数都可以应用于字段组件，可以叠加多个验证函数，如下图：此外，还可以通过表单组件（FormWidget）的extraRules属性添加表单验证规则，具体processing的逻辑可以通过阅读form-widget.vue组件的源码来理解。Slot为了满足表单设计的多样性和动态显示的要求，需要将表单嵌入到一个slot中。窗体槽提供了在运行时动态调整窗体的可能性。表单槽的名称在当前表单中必须是唯一的。如果需要获取槽中的数据，则需要绑定数据字段（可以绑定多个），如下图：自定义组件自定义组件的存在是为了弥补内置组件的不足在某些特定场景下的数据展示或逻辑交互。自定义组件为丰富的表单数据展示和逻辑交互提供了更多可能。用户可以扩展自定义表单组件库，实现更高级的动态表单功能。作为参考实现，VariantAdmin实现了两个自定义表单组件：富文本编辑器和区域级联选择组件。通过阅读这些组件的源代码（src/component/custom/...），您可以了解如何实现自己的表单组件。Ending本期到此结束。我是小编NanfengChui，专注于分享好玩、有趣、新颖、实用的开源项目、开发者工具、学习资源！希望和大家一起学习交流。欢迎来到我的公众号【Github导航站】。
