基于JSON Schema的前端可视化活动编辑器

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

演示地址：form.lljj.me/vue-editor.… 项目地址：github.com/lljj-x/vue-…

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

参考资料：github.com/CntChen/cnt…

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

基于 JSON Schema 来动态生成数据配置表单和数据校验结合发布流程同步 JSON Schema 到后端系统做接口数据校验一个活动版块对应一个 JSON Schema 和一份视图 View组件即可

实现首先可视化编辑器需要做到板块的管理，这些板块支持可视化的编辑配置和效果展示，最终相互组装为一个页面。每个板块我们不可避免的需要一个 View组件来做展示，因为每个板块都长得不一样。板块配置表单和数据校验都通过 JSON Schema 来实现，然后再通过一个拖动的容器来承载这些板块以及一些其它的数据配置。如下图：

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

基于Vue，依赖 ElementUi、vuedraggable、@lljj/vue-json-schema-form

板块支持配置化支持可添加数，是否可删除，置顶，置底，图标配置支持拖动或者点击上下移动，复制删除等调整页面布局支持页面预览模式支持编辑还原数据和默认板块数据配置视图组件支持异步加载不支持嵌套组件 …

添加新的板块只需要在 config/tools.js 导入新增的板块，并且配置好工具栏即可，如： import * as componentPackFlashSaleGoodsList from ‘…/viewComponents/FlashSaleGoodsList’;

// 这里可以异步导入 const View = () => import(’./View.vue’);

const NAME = propsSchema.id; const componentViewName = ${NAME}View;
export { propsSchema, // JSON Schema 定义数据结构和生成表单 vue-json-schema-form 参数

componentViewName, // 视图View组件name，需要自己保持唯一 View, // 视图View组件 uiSchema, // uiSchema 辅助增强表单样式不必须 vue-json-schema-form 参数 errorSchema, // 辅助增强表单校验错误提示不必须 vue-json-schema-form 参数 // customRule, // 自定义的校验规则 vue-json-schema-form 参数（需要更多的vue-json-schema-form 参数参数可自己添加） }; 复制代码导出模块解释如下：

propsSchema： required JSON Schema配置，必须包含一个 id 的属性，并且要保证唯一，在保存和编辑数据时用来标识当前组件。传递给 vue-json-schema-form 生成表单； componentViewName： required 板块View组件名，唯一，建议通过 id + View 拼接，只是为了在注册组件时的组件名，其实我也可以帮你生成，但是我没有； View： required required 板块View组件，需要异步导入就 () => import(’./xxx.vue’)，View 组件必须包含一个名为 formData 的props接受当前表单数据； uiSchema：传递给 vue-json-schema-form 生成表单，用于增强生成表单的样式，可选； errorSchema：传递给 vue-json-schema-form 生成表单，用于增强表单的校验提示信息 customRule：传递给 vue-json-schema-form 生成表单，用于自定义校验表单数据

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

新增板块可参见 /packages/demo/src/vue-editor/views/editor/viewComponents 内现有板块工具栏和默认数据配置在 /packages/demo/src/vue-editor/views/editor/config 文件夹内

如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的Q群:前114中6649后671，里面有许多前端学习资料大厂面试真题免费获取，希望能够对你们有所帮助。

基于JSON Schema的前端可视化活动编辑器相关推荐

Vue基于JSON Schema生成表单和数据校验
基于 Vue.js.JSON Schema 和 ElementUi 快速生成表单,支持自定义组件,支持自定义错误提示配置和校验规则... 源码:vue-json-schema-form github ...
前端可视化开发-编辑器
draw.io 原型图设计编辑器:https://github.com/jgraph/drawio method draw svg绘制编辑器:https://github.com/methodofac ...
JSON Schema的应用(具体的使用场景)
什么是JSON Schema JSON Schema 是用于验证 JSON 数据结构的强大工具,Schema可以理解为模式或者规则. 要定义 JSON Schema 是什么,我们可能应该首先定义 JS ...
json schema多种形式_什么是JSON Schema?
什么是JSON Schema? 如果你曾经使用过XML Schema,RelaxNG或ASN.1,那么你很可能已经知道什么是JSON Schema,并且可以跳过本文的阅读.如果你是头一次听说,或者听过 ...
json schema多种形式_什么是JSON Schema？及其应用方式......
如果你曾经使用过XML Schema,RelaxNG或ASN.1,那么你很可能已经知道什么是JSON Schema,并且可以跳过本文的阅读.如果你是头一次听说,或者听过过这个词汇但不了解,那么你来对地 ...
JSON Schema 详解
简介要真正理解 JSON Schema,首先需要知道什么是 JSON. JSON 代表 "JavaScript对象表示法",是一种简单的数据交换格式.它最初是万维网的一个符号.因 ...
走近 JSON Schema
JSON Schema 用于描述 JSON 数据的声明性格式.比如表示一个人的信息的 JSON: {"first_name": "George"," ...
前端可视化搭建的拖拽平台
前端可视化拖拽平台简介技术栈采用dva+hooks+umi+antd-mobile+sortable.js+react-color.基于sortable.js的前端可视化搭建的拖拽平台,ui组件采 ...
npm 可视化html编辑器,超给力 Vue.js 可视化H5拖拽编辑器Quark-H5
前两天有分享一个鲁班H5移动端页面生成器.今天再给大家推荐一款超优秀的Vue H5可视化布局编辑器QuarkH5. quark-h5 基于 vue.js 开源的H5可视化拖放编辑器,star高达1.7 ...

基于JSON Schema的前端可视化活动编辑器

基于JSON Schema的前端可视化活动编辑器相关推荐

最新文章

热门文章