这款轻量级快速开发框架，简直是效率神器

  大家好，我是为广大程序员兄弟操碎了心的小编，每天推荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标！

  如果你老板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导航站】**。