前言熟悉我的朋友可能知道我没写过热点。为什么不？是因为我不注意热点吗？其实并不是。我对一些事情还是很关心的，确实有很多想法和看法。但我一直奉行一个原则，那就是：以活力为知足。这篇文章是一篇非常实用的文章。我们通过一个实际的应用场景来解决某一类问题，并提供一个或多个解决方案来探索技术的魅力。接下来笔者主要分析表单定制平台的实现思路和技术方案，实现一个类似金数据或者问卷之星的表单配置平台。您还可以在此方案的基础上扩展出更强大的可视化平台。为什么文本应该是这样一个平台？一方面是因为笔者服务B端产品多年，对动态表单和可配置表单有一定的项目积累，深知可配置表单的价值所在。举一个很传统的B端形态配置的例子：传统2B公司在提供saas服务时，为了满足不同公司的定制化需求，往往会为企业客户提供定制化或免费的配置功能，如下图：对于saas系统而言，软件即服务在提供基础服务的同时，必须满足用户的个性化需求。因此，传统的SaaS软件提供商往往会为客户提供免费的配置空间。这种自由配置的桥梁是通过表格。举个简单的例子：这样可以定制不同风格的企业产品。这里只是一个比较简单的例子。往往实际的项目会比较复杂，可能会有几十个配置项。当然，这种模式是一种比较传统的配置方案，只是saas软件提供的一个小服务模块。目前主流的做法是采用可视化方案，国内也有非常成熟的方案，但基本思路是一样的，只是后者体验更好，操作难度更低。笔者简单介绍一下saas，让大家更容易理解其模型：saas（软件即服务）是一种云计算产品，为用户提供访问供应商云软件的途径。用户无需在其本地设备上安装该应用程序。相反，该应用程序驻留在远程云网络中，并通过Web或API进行访问。通过该应用程序，用户可以存储和分析数据并在项目上进行协作。类似的云计算产品还有很多，比如Paas（平台即服务）、Iaas（基础设施即服务）等，有兴趣的朋友可以了解一下。以上介绍更多是为了让大家了解作者设计这个平台的基本背景。我们也可以举一个比较实用的例子，比如金数据或者问卷之星的表单配置方式。用户可以在管理后台自定义自己的表单，并生成可访问的链接，向目标用户分发问卷，填写信息，收集信息，最终达到数据分析的目的。本文介绍的表单定制平台还支持表单管理、表单数据分析、表单数据采集、表单定制等功能。笔者将使用熟悉的技术栈react和第三方ui库antd4.0进行开发，后端采用node+koa设计路由接口。设计思路及实现效果及分析1.表单自定义管理列表管理列表主要用于查看我们配置的表单模板，分析不同表单模板收集的数据，编辑和删除表单模板。2.表单定制页面从上图中我们可以看出，表单定制页面主要用于编辑自定义表单模板。我们可以添加表单标题，表单域等，目前提供的几种自定义表单控件如下：文本框，多行文本框，下拉框，单选框复选框文件上传控件基本涵盖了所有的表单我们需要的业务场景。从上图中我们可以看到，我们可以在任意位置插入自定义字段，同时可以编辑、修改、删除表单字段。如果想象力大一点，我们可以基于它，它不仅是一个表单问卷应用，还有回答问题、发布内容等场景。（后期可以支持富文本控件）3.草稿管理设计草稿框的目的是为了方便用户在流程中对表单进行配置。判断是满足要求还是因为临时动作不能继续配置。此时可以将配置好的内容保存在草稿箱中，下次继续编辑。因此，笔者专门设计了草稿箱管理列表。一旦用户有草稿，它会通知用户，并在管理页面显示草稿数。作为一个追求体验的技术人，这块的设计是相当有必要的。4.生成前端表单访问链接。我们配置好表单后，点击保存，会生成一个前端访问地址，用于实时访问表单信息。下图是点击链接后的页面：我们也可以根据自己的风格设计自己的表单录入页面。稍后将详细描述如何实现这样的过程。5.查看用户已经输入的数据。我们可以点击“查看数据”来访问采集到的表单数据，并通过可视化工具对数据进行分析比较。同时我们也可以删除数据列表中的数据来控制我们数据展示的纯度。.6.表单数据分析只有当数据采集完成后，我们才会自动集成几个可视化组件来分析表单数据。以上是笔者列出的几个视觉组件，是基于antvG2封装的。上面的应用场景主要介绍了自定义表单通过自定义平台的一些功能和交互效果，我们可以利用平台做很多有趣的事情。因为表单的抽象是数据，我们得到自定义的表单json数据后，可以有不同的展现形式，比如用户问卷调查，网站平台投票，答题页面，发布动态等功能，如图下图配置：上面的配置可以实现类似微信的发布朋友圈的功能，然后我们可以通过前端的手段，根据用户发布的数据，渲染出一个朋友圈列表。我们自己脑洞大开，可以配置这样一个表单，其中包含一个文件上传控件和n个文本输入控件，如下图所示：配置这样一个表单到H5管理模块，我们只需要上传三个图片，然后填写相应的文字，然后使用市面上成熟的H5全屏滚动插件。轻松自定义各种H5活动页面。这个方案笔者的很多子系统都用过，效果还是很不错的。当然，基于这个平台，即使是小型的宣传网站也可以直接配置，想象空间还是比较大的，期待大家的探索。代码实现要开发这样一个表单定制平台，核心在于如何实现表单的动态配置机制。在这里，笔者将其分为基础表单素材和表单编辑生成器两部分，如下拆分图所示：接下来我们一步步实现以上两个核心模块。1.基础表单素材基础表单素材主要用于用户选择自定义表单控件。我们常用的表单动态渲染有地图循环+条件判断和单层地图+对象方法。前者如果想渲染一个动态表单，可以这样实现：{list.map((item,i)=>{return
