从拖拽表单到可视化页面生成器的构想_江南春008_新浪博客

难得闲暇的周五回忆了2017年的工作，想到年初开发的产品数汇云图，其中有一个自定义的拖拽表单当时做的并不是太完善，于是想到拿出来当做一个场景组件来开发。

抽成组件的过程中，思绪飞扬，越是详细设计越是觉得此组件可以无限扩展，天马行空了一翻，觉得最终产出物应该是可视化的页面生成器（目前处于想法阶段，实现需要时间来完善）。

 

详细描述下想法，以备后续有时间了不至于忘记当初的设想：

第一版：将数汇云图中的自定义拖拽表单进行插件化，达到可自定义行列的表单设计(行列可通过输入设置)，可人性化的设置表单项的详细属性（不懂程序开发的人也能进行使用），产物-->可保存及反显编辑的拖拽表单

第二版：完善表单项的样式，看起来更加精美，完善交互体验，比如每行的列数可以单独定义，不必每行列数都相同，产物–>提升交互友好性及视觉效果的自定义表单插件

第三版：在自定义表单可生成、编辑的基础上，进行可视化页面生成器的开发，此版本详细设想如下：

       1）可拖拽生成固定行列的表单容器，并可以拖动合并单元格、拆分单元格

       2）右侧属性区域，不局限于表单项属性的配置，将增加表单样式的配置，如文字大小、颜色、控件间距、宽高、背景色、背景图片等等

       3）通过步骤2中的配置，可一键生成对应的html、css、img等文件

       4）界面上增加3中的html、css代码的反显容器，支持在线可视化代码修改，即修改代码的同时右侧将会实时改变，所见即所得，此处是代码层面的调整

第四版：增加html、css等文件的上传功能，可自动识别里面的标签及样式进行反显，进行可视化的内容修改（编写此文时突然有此想法，不易实现，难度五星！）

第五版：脱离插件范畴，升级为可视化页面生成器工具

第六版：设计一版基于vue或react等模块化语言的可视化页面生成器，后续看是否有必要

 

暂时就这些，希望看到的朋友多多给出建议，进行完善，众人拾柴火焰高！