共计 1875 个字符，预计需要花费 5 分钟才能阅读完成。
大家好，我是为宽广程序员兄弟操碎了心的小编，每天举荐一个小工具 / 源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节俭开发效率，实现不加班不熬夜不掉头发，是我的指标！
如果你老板 1 天要让你搭建 100 个表单和列表的开发平台，要怎么办呢？？？婉转阐明起因指出工作量太大？？？？
不必懊恼，明天举荐一个粉丝投稿的我的项目——Variant，Variant是一个疾速开发框架 / 平台，蕴含一个前端我的项目 Variant Admin 和一个后端我的项目 Variant Server，Variant致力于晋升业务逻辑开发效率、缩小软件开发中的非必要重复劳动。Variant为前端工程师提供弱小的后端接口定制能力，Variant为后端工程师提供凋谢、灵便的前端疾速开发体验。
如何获取
链接地址小编就不发了，各位同行去 gitee 或者 GitHub 搜寻下 Variant 就能找到了。
技术选型
前端选型：Vue + Element UI + Vue.Draggable
后端代码：行将开源，能够去 gitee 或者 Github 搜寻 Variant 理解实时动静
表单设计方案
借鉴风行的拖拽式表单设计方案，采纳通用的左中右布局，如下图所示：
表单的排版布局由 Tab（页签）> Section（区块）> Row（行）> Cell（单元格）四层构造管制，一行（Row）均匀划分为 24 个栅格（span=24）, 单元格（Cell）宽度由栅格管制，Cell 最大宽度不超过 24 栅格。
跟其余表单设计方案的最大区别在于，字段作为表单布局的根本逻辑组件，字段具备主动数据加载和存储能力，不须要设计数据库、不须要对接后端 API，这一切都是主动实现的 ，毕竟咱们是要做一个 1 天搭建 100 个表单和列表 的全栈开发平台。
字段类型
为了满足 99.9999% 的业务需要，根本字段类型都必须反对，布局一下共 14 个：Boolean(布尔)、Integer(整数)、Decimal(精度小数)、Percent(百分比)、Money(金额)、Text(单行文本)、TextArea(长文本)、Option(单选项)、Tag(多选项)、Date(日期)、DateTime(日期工夫)、Picture(图片)、File(文件)、Reference(对象援用)。
其余更多字段类型，比方动态 HTML、数字滑块、Rate 评分等等，能够以自定义组件的形式扩大实现。
上传与下载
借助于 Element UI 弱小的 Upload 组件，很容易实现图片及文件的上传及下载，包含限度上传文件类型、上传文件大小和上传文件个数，如需深刻理解，能够浏览 field-widget.vue 组件源码。
图片 / 文件的下载依赖于后端实现，本开发平台的后端实现了服务端本地存储和下载逻辑，如果须要把图片或文件上传到专门的云存储平台，须要自行编写代码实现（对接云存储平台 API、并不难实现）。
表单验证逻辑
所有字段类型都内置了是否必填（required）校验规定，数字 / 金额类型内置了数字格式化校验规定及最大值最小值校验规定。
此外，大部分字段（图片、文件字段除外）反对增加自定义校验规定，自定义校验规定的函数来源于 src/utils/validators.js，能够参照现有函数增加更多自定义校验规定函数。所有的自定义校验函数能够作用于字段组件，并且多个校验函数能够叠加，如下图所示：
除此以外，还能够通过表单组件（FormWidget）的 extraRules 属性追加表单校验规定，具体解决逻辑可通过浏览 form-widget.vue 组件源码理解。
插槽
为了满足表单设计的多样性和动静展现需要，表单须要能嵌入插槽。表单插槽为在运行时动静调整表单提供了可能性，表单插槽名称必须在以后表单中惟一，如果在插槽内须要获取数据，则须要绑定数据字段（可绑定多个），如下图所示：
自定义组件
自定义组件的存在是为了补救内置组件在某些特定场景数据展现或逻辑交互上的有余。自定义组件为丰盛表单的数据展现和逻辑交互提供了更多可能性，用户能够自行通过扩大自定义表单组件库，实现更高级的动静表单性能。作为参考实现，Variant Admin 实现了两个自定义表单组件：富文本编辑器及地区级联抉择组件，通过浏览这些组件源码（src/component/custom/…），便能够理解如何实现本人的表单组件。
结尾
本期就分享到这里，我是小编南风吹，专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源！心愿能与大家独特学习交换，欢送关注我的公众号【Github 导航站】。