可视化表单配置

先看效果，为一个可视化活动编辑器。

基于 JSON Schema 开箱即用的简单活动可视化编辑器。

在做生成一个可视化店铺装修系统的时候，需要解决配置数据表单的通用性，参阅了一些现用的解决方案，最终通过 JSON Schema 来生成对应的表单和校验规则。

JSON Schema 主要运用在如下几点：

首先可视化编辑器需要做到板块的管理，这些板块支持可视化的编辑配置和效果展示，最终相互组装为一个页面。

每个板块我们不可避免的需要一个 View组件 来做展示，因为每个板块都长得不一样。板块配置表单和数据校验都通过 JSON Schema 来实现，然后再通过一个拖动的容器来承载这些板块以及一些其它的数据配置。

如下图：

这样当我们在添加新的板块时，只需要开发一个 View组件 ，和书写一份 JSON Schema 来定义数据即可。

添加新的板块只需要在 config/tools.js 导入新增的板块，并且配置好工具栏即可，如：

新增板块文件结构如下：( viewComponents/FlashSaleGoodsList/index.js 这里对应上面工具栏配置导入的组件包文件)

导出模块解释如下：

如果需要更多 vue-json-schema-form 参数可直接在 packages/demo/src/vue-editor/views/editor/Editor.vue 渲染 VueElementForm 组件时添加即可。

整个实现相对比较简单，感兴趣的可以花上两个小时看下源码，欢迎讨论提问。

可视化系统开发平台日益为人们所熟悉，以天翎MyApps开发平台为例，其包括了可视化表单引擎、可视化视图引擎、可视化流程引擎、可视化报表引擎、可视化门户引擎、可视化组织用户引擎和可视化接口引擎等功能组件，先看看他们长什么样吧：

可视化表单引擎

可视化流程引擎

可视化报表引擎

那这类可视化系统开发平台怎么使用呢？从上图我们可以明显看到，和传统的底层编码开发模式相比，可视化开发平台最主要的特点是提供了功能强大的非过程化问题定义手段，用户只需告知系统做什么，即通过可视化托拉拽为主的方式对开发平台界面上的图形化（方框、箭头、线段）元素进行配置，这对软件开发效率和开发质量提升作用明显！当然，说一千次不如亲自动手试一次，找个可视化系统开发平台练练手就能感受到它的与众不同啦！