水滴低代码搭建——6倍提效，新品首发素材审核系统实践之路
![]()
Tech
导读
新品业务线上化规则化的推进过程中，需要新增首发素材审核 CMS 并内嵌于营销中心，提供业务运营更加便捷的打分、评审的体验。在技术选型的过程中，新品团队了解到水滴低代码平台具备可视化搭建 CMS 的能力，内置了丰富能力，能够高效、快速地搭建 CMS，例如表单表格、权限管控、微前端等。与业务诉求的产品形态契合度高、设计风格一致并且默认支持微前端，在运维部署上几乎可以做到零成本，非常方便就能将产物嵌在营销中心内。在技术调研并对比全部开发所需要的40+人日后，团队选择了更高效的水滴低代码作为 CMS 的实现方式，并在 6 人日内完成了整个共建、搭建流程。本文将营销中心-新品首发素材审核 CMS （下文简称新品CMS） 的搭建梳理作为最佳实践，从 0 开始介绍如何使用水滴低代码平台。
![]()
Tech
导读
新品 CMS 最终效果
需求梳理
需求梳理后，接下来就是定制业务组件的流程。开发者可以在下载自定义组件模版库后，进行相关定制开发。
模板内包含了组件开发的代码模板、常用依赖、调试工具以及命令，开发完成以后可通过命令发布至 jnpm 。这样，就可以在水滴工作台的插件管理安装对应的组件集，安装完成以后即可在搭建页使用了。
定制组件开发流程
1、本地开发时可一边 coding ，一边进行表单、表格组件界面调试。
04 页面可视化搭建
页面搭建环节就十分的简单了，水滴提供了表单表格设计器，只需要拖拖拽拽，就能将组件的布局和样式调整为 UI 设计稿中的样子。
为了减少用户在调整布局和修改样式上的操作次数，水滴团队联合基础业务体验部 UI 设计团队制定了中后台视觉标准，并落地到低代码平台中，使得一次拖拽即可达到理想中的样式。
水滴表单设计器
除了界面搭建，水滴也支持表单联动、异步拉取数据等复杂逻辑方面配置，开发者可以灵活切换到 Schema 界面进行各种逻辑的配置编写。表单校验方面则内置了url 、 https 、图片大小尺寸、 数组上下限等几十种常用校验，不满足时既可以填写自定义正则表达式，也可以通过 Schema 配置其他复杂校验。
05 前端事件编排
除了界面布局外，还需要处理业务逻辑和交互跳转，这里可以通过水滴工作台的事件编排功能，编写 JS 动作并绑定在模块暴露的各个事件上。
在新品的提交表单中，虽然表单组件本身已经提供了基础校验能力，但是仍需要在表单提交前进行一些个性化的校验逻辑，这里便可通过编写 JS 动作实现了。
此外还需要对表单收集到的数据进行一些结构上的转换，以满足后台接口文档的定义，可以在事件配置中的「表单提交前」的事件中，绑定相应的 JS 动作来处理数据转换逻辑。
事件绑定与动作编写
06 接口与数据源
界面搭建和事件逻辑编排都完成以后，便可以和后台的接口进行联调，将界面和数据源进行打通。与常见的低代码平台不同， DripWorks 不仅提供前端维度的搭建，还可以通过 FaaS 串联数据源。
接口开发者通过 FaaS 可以免除运维部署细节困扰，并通过预设好的模板，简单配置就生成想要的函数并连接例如 DUCC 等数据源。非常快速就能创建包含 NodeJS 、JAVA 等在内的各种增删改查接口。
而在新品 CMS 的场景中，已经有对应的后台服务，因此在简单修改接口出入参后，直接绑定相应的接口 URL 即可。这样，搭建的模块就和后台服务提供的接口绑定成功啦~
绑定接口服务
07 权限管控
角色与权限管控
08 免运维云构建部署与版本管理
完成搭建后，就可以点击构建发布进行上线操作了。水滴会自动生成源代码，并进行云构建，最终把构建产物推送到京东前端发布平台 Pubfree 进行部署。这样的优势便是构建完成的产物会固化下来，不再受到平台变更的影响，同时也可以拿到源码进行二次开发或者私有化部署，对 CMS 这类低变更频率但业务复杂度高的类型稳定性、灵活性更好。
同时水滴也提供了测试、预发以及生产 3 种环境，开发者可根据情况选择不同的历史版本，在 3 种环境下进行秒级切换。
点击发布后的链接地址，即可跳转到线上应用，这样就拿到了最终产出的 CMS ，并且水滴构建的产物默认符合 Micro-App 微前端子应用规范，可直接与营销中心等微前端框架结合，这样整个搭建、开发和部署的流程就已经结束了。
09 总结
同时在开源建设上，水滴也把底层的优秀功能进行了开源并持续迭代，包括表单、表格等，欢迎大家体验并提出宝贵建议~！
相关资源
水滴表单开源能力：
https://github.com/JDFED/drip-form
水滴表格开源能力：
https://github.com/JDFED/drip-tabl
求分享
求点赞
求在看