老板要我做一个1天搭建100个表单和列表的开发平台(1)「终于解决」

牛年新的一天，老板兴冲冲地走进办公室，三步并作两步来到了我的工位：“大师啊，听说现在做XXX Admin、低代码开发平台火得不要不要滴，我们务必抓紧搞一个出来！”。

“我们再造一个新的轮子？”“大师”满脸黑人问号。。。

“不，我们搞点不一样的花样！”

“比如说？”

“我们要集成后端接口，要搞就搞全栈开发！”

“还有啥？”

“当然，该有的拖拽式表单设计、列表设计必须有！”

“这个有点难搞哦~~”“大师”心里敲起了退堂鼓。。。

“我们还要支持自定义扩展，支持二次开发，支持权限控制，不要搞错，是行级数据权限控制！”老板继续手舞足蹈，滔滔不绝，完全不顾大师心里哇凉哇凉的赶jio。

“这么多功能，多久做得完？？”终于，我发出了灵魂之问。

“1个月，抓紧做，肯定能做出来！”

“… …”我努力压制住即将脱口而出的三个字，内心不禁悲从中来。

“做完了开源，给公司拉点融资。”老板话一说完，转身扬长而去，留下眼神呆滞、一脸生无可恋的大师瘫坐在椅子上。

但是“大师”毕竟久经战阵，不能轻言放弃，在半天的慎重思考后，“大师”重新振作了起来，踏上了一个月的不归之路。。。

。。。

。。。

以下内容为“大师”1个月趟坑之旅的真实记录和一些浅薄的心得（本文稍长，关注开源的童鞋们直接拉到最后面看，就是这么贴心）：

0. 开发平台是神马东东？

这里所说的开发平台（也可以叫快速开发框架），其实和XXX Admin、后台管理系统、低代码（Low Code）开发平台比较接近，一个标准的Web开发平台大体上由表单、列表、导航路由、用户部门组织结构、权限控制以及后端接口组成。

开发平台可以节省开发者搭建脚手架的时间，利用内置的封装组件可以大幅提升开发效率，同时开发者也可以创建自定义组件实现业务逻辑的复用，自由编写代码实现产品需求（#废话太多#此处应该有动图展示效果）。

低代码平台追求更高级的组件封装，尽量不编写代码或少写代码即可实现业务逻辑，以面向产品设计人员或业务人员为主，更高级的封装和低代码意味着扩展性和灵活性都受到限制。

1. 技术选型

前端选型：Vue + Element UI + Vue.Draggable

为了按期完成开发少趟坑（兼容IE 11），还是选用了更成熟更悠久的Vue 2（等“大师”学会了Vue 3就升级蛤蛤蛤），UI库用的是饿了么家的Element UI，拖拽组件选了Vue.Draggable，文档详细上手简单。

接下来先从表单设计讲起，争取2-3篇文章解决战斗，全面复盘一个开发平台的开发历程。

2. 表单设计方案

借鉴流行的拖拽式表单设计方案，采用通用的左中右布局，如下图所示：

表单的排版布局由Tab（页签）> Section（区块）> Row（行）> Cell（单元格）四层结构控制，一行（Row）平均划分为24个栅格（span=24）,单元格（Cell）宽度由栅格控制，Cell最大宽度不超过24栅格。

跟其他表单设计方案的最大区别在于，字段作为表单布局的基本逻辑组件，字段具备自动数据加载和存储能力，不需要设计数据库、不需要对接后端API，这一切都是自动完成的，毕竟我们是要做一个1天搭建100个表单和列表的全栈开发平台。

3. 字段类型

为了满足99.9999%的业务需求，基本字段类型都必须支持，规划一下共14个：Boolean(布尔)、Integer(整数)、Decimal(精度小数)、Percent(百分比)、Money(金额)、Text(单行文本)、TextArea(长文本)、Option(单选项)、Tag(多选项)、Date(日期)、DateTime(日期时间)、Picture(图片)、File(文件)、Reference(对象引用)。

其他更多字段类型，比如静态HTML、数字滑块、Rate评分等等，可以以自定义组件的方式扩展实现。

4. 上传与下载

借助于Element UI强大的Upload组件，很容易实现图片及文件的上传及下载，包括限制上传文件类型、上传文件大小和上传文件个数，如需深入了解，可以阅读field-widget.vue组件源码。

图片/文件的下载依赖于后端实现，本开发平台的后端实现了服务端本地存储和下载逻辑，如果需要把图片或文件上传到专门的云存储平台，需要自行编写代码实现（对接云存储平台API、并不难实现）。

5. 表单验证逻辑

所有字段类型都内置了是否必填（required）校验规则，数字/金额类型内置了数字格式化校验规则及最大值最小值校验规则。

此外，大部分字段（图片、文件字段除外）支持添加自定义校验规则，自定义校验规则的函数来源于src/utils/validators.js，可以参照现有函数添加更多自定义校验规则函数。所有的自定义校验函数可以作用于字段组件，并且多个校验函数可以叠加，如下图所示：

除此以外，还可以通过表单组件（FormWidget）的extraRules属性追加表单校验规则，具体处理逻辑可通过阅读form-widget.vue组件源码了解。

6. 插槽

为了满足表单设计的多样性和动态展示需求，表单需要能嵌入插槽。表单插槽为在运行时动态调整表单提供了可能性，表单插槽名称必须在当前表单中唯一，如果在插槽内需要获取数据，则需要绑定数据字段（可绑定多个），如下图所示：

7. 自定义组件

自定义组件的存在是为了弥补内置组件在某些特定场景数据展示或逻辑交互上的不足。自定义组件为丰富表单的数据展示和逻辑交互提供了更多可能性，用户可以自行通过扩展自定义表单组件库，实现更高级的动态表单功能。作为参考实现，Variant Admin实现了两个自定义表单组件：富文本编辑器及地区级联选择组件，通过阅读这些组件源码（src/component/custom/…），便可以了解如何实现自己的表单组件。

这是一个系列文章，废话较多，篇幅所限，第一篇文章先记录到这里，感谢各位大佬阅读，欢迎多多指点批评（勾引~~）。

8. 重要的放在最后面

最后上一道硬菜，前端代码已经开源在全球最大同性交友网站，仓库链接：

github.com/vdpAdmin/Va…

国内同步仓库：gitee.com/vdpadmin/Va…

（后端代码即将开源，QQ交流群第一时间通知）

在线演示（表单设计从实体管理进入）：http://120.92.142.115:8080/

语雀文档还很粗陋，正在加紧补充完善：

www.yuque.com/variantdev/…

技术交流请入群，秋秋群号836657858。