牛年新的一天，老板兴冲冲地走进办公室，分两步来到我的工作站：“师父，听说现在很流行XXXAdmin和低代码开发平台，我们必须抓紧时间弄一个出来！”。“我们造一个新轮子好吗？”“主人”满脸黑色问号。..“不，我们来点不一样的！”“例如？”“我们要集成后端接口，如果要做，我们可以做全栈开发！”“还有什么？”“当然要有拖拽形式，设计和列表设计必须有！”“这有点难啊~~”“师父”心中退缩。..“还要支持自定义扩展、二次开发、权限控制，别误会，是行级数据权限控制！”老大继续跳舞唠叨，完全不理会师傅的暖心jio。“这么多功能，要多久才能完成？”最后，我问了我灵魂的问题。“一个月，快点，一定能搞定！”“……”我极力压抑着即将脱口而出的三个字，心里不禁有些难过。“完成开源，为公司争取一些融资。”老大话音一落，转身就走，留下老爷眼神呆滞，一张无情的脸瘫坐在椅子上。不过，“主人”久经沙场，不能轻易放弃。经过半天的慎重思考，“主人”恢复了体力，踏上了一个月的不归路。..............以下内容是“大师”1个月的入坑之旅的真实记录和一些粗浅的心得（本文有点长，关注开源的童鞋可以直接看文末，呵呵好贴心）：0.快速开发平台是大神马东东？这里所说的快速开发平台（也叫快速开发框架）其实更接近XXXAdmin、后台管理系统、低代码（LowCode）开发平台。一个标准的快速开发平台一般由表单、列表、导航组成。路由、用户部门组织结构、权限控制和后台接口。快速开发平台可以节省开发者搭建脚手架的时间，使用内置的封装组件可以大大提高开发效率。同时，开发者也可以创建自定义组件实现业务逻辑的复用，自由编写代码实现产品需求（#话太多#这里应该有动画显示效果）。低代码平台追求更高级的组件封装。不用写代码或者尽可能少写代码就可以实现业务逻辑。主要面向产品设计人员或业务人员。更高级的封装和低代码意味着可扩展性和灵活性都受到限制。1.技术选择前端选择：Vue+ElementUI+Vue.Draggable为了按期完成开发，减少坑（兼容IE11），选择了比较成熟和历史悠久的Vue2（等《高手》学习Vue3.升级~clamclam~），UI库使用饿了么的ElementUI，拖拽组件选用Vue.Draggable，文档详细易用。接下来从表单设计入手，力争2-3篇文章攻坚战，全面回顾一个开发平台的开发过程。2、表单设计方案借鉴了流行的拖拽式表单设计方案，采用常见的左右中布局，如下图：表单的排版布局由Tab（页面标签）>Section（块）>Row（行）>Cell（单元格）四层结构控制，一行（Row）平均分为24个格子（span=24），单元格（Cell）的宽度由grid，Cell最大宽度不超过24个grid。与其他表单设计解决方案最大的区别在于字段是表单布局的基本逻辑组件。字段具有自动加载和存储数据的能力。无需设计数据库或连接到后端API。所有这些都是自动完成的。毕竟我们是一天建100个表单和列表的全栈开发平台。3、字段类型为了满足99.9999%的业务需求，必须支持所有的基本字段类型。计划一共14个：Boolean（布尔值）、Integer（整数）、Decimal（小数精度）、Percent（百分比）、Money（金额）、Text（单行文本）、TextArea（长文本）、Option（单选项）),Tag(多选),Date(日期),DateTime(日期时间),Picture(图片),File(文件),Reference(对象引用)。更多其他字段类型，如静态HTML、数字滑块、Ratescore等，都可以通过自定义组件的形式进行扩展实现。4.上传下载借助ElementUI强大的Upload组件，可以轻松实现图片和文件的上传下载，包括限制上传文件类型、上传文件大小、上传文件数量等。深入理解可以阅读field-widget.vue组件源码。图片/文件的下载依赖于后端实现。本开发平台后端实现了服务端的本地存储和下载逻辑。如果需要上传图片或者文件到专门的云存储平台，需要自己写代码实现（连接云存储平台API，实现起来不难）。新建图片字段上传显示图片5.表单校验逻辑所有字段类型都内置必填校验规则，数字/金额类型内置数字格式校验规则和最大最小值校验规则。此外，大多数字段（图像和文件字段除外）都支持添加自定义验证规则。自定义验证规则的功能来自src/utils/validators.js。您可以参考现有功能添加更多自定义验证规则功能。所有自定义的验证函数都可以应用于字段组件，可以叠加多个验证函数，如下图所示：另外，还可以通过表单组件（FormWidget）的extraRules属性添加表单验证规则，以及具体处理逻辑可以通过阅读form-widget.vue组件的源码来理解。6.Slot为了满足表单设计的多样性和动态显示的要求，需要将表单嵌入到slot中。窗体槽提供了在运行时动态调整窗体的可能性。表单槽的名称在当前表单中必须是唯一的。如果需要获取slot中的数据，需要绑定data字段（可以绑定多个），如下图所示：7.自定义组件自定义组件的存在是为了弥补built-在某些特定场景下的数据展示或逻辑交互中的组件。自定义组件为丰富的表单数据展示和逻辑交互提供了更多可能。用户可以扩展自定义表单组件库，实现更高级的动态表单功能。作为参考实现，VariantAdmin实现了两个自定义表单组件：富文本编辑器和区域级联选择组件。通过阅读这些组件的源代码（src/component/custom/...），您可以了解如何实现自己的表单组件。这是一个系列文章，废话很多，篇幅有限。第一篇文章先记录到这里。感谢阅读，也欢迎大家指点批评（勾引~~）。最后还有一道硬菜。前端代码已在全球最大的同性交友网站开源。仓库链接：https://github.com/vdpAdmin/VariantAdmin在线演示：http://120.92.142.115:8080/语雀文档还是很简陋，正在加紧补充完善：https://www.yuque.com/variantdev/atxy8t技术交流，扫码入群（群号836657858）：
