json-schema 可视化编辑器发布了

最新推荐文章于 2024-08-16 09:10:32 发布
最新推荐文章于 2024-08-16 09:10:32 发布
阅读量4.5k 收藏 2
点赞数
文章标签： json ui 数据结构与算法
原文链接：https://juejin.im/post/5aab954a518825557005c6cd
版权

json-schema 的用途越来越广泛，除了定义数据结构外，我们还可以使用 json-schema 验证数据格式和生成随机数据，但是编写复杂数据结构的 json-schema 是非常痛苦的事情。假设一个 100 字段的数据结构，如果用 json-schema 定义，可能需要 1000 个字段描述，工作量极大，效率非常低，所以我们团队开发了一款 json-schema 可视化编辑器提高大家的效率。

产品截图：

Github: json-schema-editor-visual

试用地址：demo

欢迎大家试用和 star

weixin_34034670
关注
基于JSON Schema的前端可视化活动编辑器
Arui_0的博客
08-13 2095
先看效果，为一个可视化活动编辑器。 演示地址：form.lljj.me/vue-editor.… 项目地址：github.com/lljj-x/vue-… 基于 JSON Schema 开箱即用的简单活动可视化编辑器。 背景 在做生成一个可视化店铺装修系统的时候，需要解决配置数据表单的通用性，参阅了一些现用的解决方案，最终通过 JSON Schema 来生成对应的表单和校验规则。 参考资料：github.com/CntChen/cnt… JSON Schema 主要运用在如下几点： 基于 JSON Sche
json-schema-editor:JSON数据可视化JSONSchema, 主要用于json结构格式的可视化编辑
05-13
json-schema-editor JSON数据可视化/JSONSchema, 以可视化界面编辑json schema数据（带结构/格式的json数据）。 技术栈：React/Mobx/Ant Design 特点： 支持12种基础类型组件（input、boolean、 date、date-time、 time、 url、 textarea、number、color、radio、 select、single-select） 支持11个特殊类型组件（object、array、json、datasource、dynamic-data、event、 codearea、htmlarea、text-editor()、quantity、box-style） 拖拽排序 复制功能 复杂嵌套 高级配置功能 支持字段联动 在线Demo： JSONSchema效果图： 备注：JSONSchema仅用于生成结构化
探索JSON Schema的可视化神器：JSON Schema Viewer
gitblog_00012的博客
06-02 567
探索JSON Schema的可视化神器：JSON Schema Viewer json-schema-viewerJavaScript tool for visualizing json-schemas项目地址:https://gitcode.com/gh_mirrors/js/json-schema-viewer 在数据处理和API设计的世界里，JSON Schema扮演着规范数据结构的重要角...
探索未来数据模型的利器：Json-Schema-Editor
gitblog_01051的博客
08-12 367
探索未来数据模型的利器：Json-Schema-Editor json-schema-editorJSON Schema Editor is an intuitive editor for JSON schema. It provides a tree view to present the structure of schema, and a property inspector to edi...
基于Vue的JSON可视化编辑器通过定义JSONSchema直接生成UI界面
08-10
基于Vue的JSON可视化编辑器，通过定义 JSON Schema 直接生成 UI 界面
json-schema-editor：JSON模式编辑器是JSON模式的直观编辑器。 它提供了一个树状视图来表示模式的结构，并提供了一个属性检查器来编辑模式元素的属性。 使用Vue.js 2和Firebase开发
02-05
json模式编辑器 JSON模式的直观编辑器，提供树视图以显示模式结构，并提供属性检查器以编辑模式元素的属性。 使用Vue.js 2和Firebase开发。 请参考了解详细信息。 产品特点 模式元素托盘 JSON模式的所有元素的列表，可以拖放到树状视图。 用户模式托盘 所有用户架构的列表，这些架构存储在Firebase中。 用户可以保存，加载，删除和导入模式，模式可以拖放到树状视图。 模式元素的树状视图 模式的结构可以在任何级别扩展或崩溃。 上下文菜单 在树视图中右键单击该元素可以弹出该元素的上下文菜单，并执行该元素特定的操作。 架构元素的属性检查器 用于编辑架构元素属性的面板。 模式的文本视
react-json-schema-form-builder:基于JSON模式的表单的可视化编辑器，内置在React JS中
04-28
React JSON模式表单编辑器 该存储库包含一个称为FormBuilder的React JS组件的代码，该代码允许用户通过拖放，编辑卡元素来直观地配置。 该工具的一个示例用例可能是构建一个允许用户创建和分发自己的调查的应用程序...
JSON Schema 校验库——json-schema-validator（java版本）.rar
09-16
JsonSchema schema = factory.getJsonSchema(schemaFile); // 加载Schema ObjectMapper mapper = new ObjectMapper(); JsonNode dataNode = mapper.readTree(dataFile); // 解析JSON数据 ProcessingReport report = ...
react-jsonschema-form-builder:它是“ Json Schema”的可视化构建器，可导出为生成的“ Json Schema”而生成的“ Json Schema”，然后将该模式的结构粘贴到您的react-jsonschema-form组件中
05-13
这是“ Json Schema”的可视化构建器，可导出为生成的“ Json Schema”而生成的“ Json Schema”，然后将该模式的结构粘贴到您的 为什么？ 因为我需要可视地创建表单，才能使用react-jsonschema-form语法将其导出...
vue3-json-schema-form:基于jsonschema的vue3表单生成器
05-23
a form generator based on jsonschema for vue3 Project setup npm install npm run serve npm run build npm run test:unit npm run lint API 设计 <JsonSchemaForm schema={schema} value={value} xss=removed ...
探索JSON Schema的可视化之旅：JSON Schema Viewer
最新发布
gitblog_00064的博客
08-16 337
探索JSON Schema的可视化之旅：JSON Schema Viewer json-schema-viewerJavaScript tool for visualizing json-schemas项目地址:https://gitcode.com/gh_mirrors/js/json-schema-viewer 在现代软件开发中，JSON Schema作为一种强大的数据结构描述工具，广泛应用...
json-schema-editor-visual:基于React的高效且易于使用的json模式编辑器
05-23
json模式编辑器可视 基于React的高效且易于使用的json模式编辑器。 用法 npm install json-schema-editor-visual const option = { } import 'antd/dist/antd.css' require ( 'json-schema-editor-visual/dist/main.css' ) const schemaEditor = require ( "json-schema-editor-visual/dist/main.js" ) ; const SchemaEditor = schemaEditor ( option ) render ( < SchemaEditor> , document . getElementById ( 'root' ) ) 期权对象 名称 描述 默认 lg 语言，
Json可视化工具
04-30
Json可视化工具
json-schema-editor-visual
04-08
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpac
json-schema-editor-visual-v4:yapi组件升级至antd4及样式修改
04-16
json模式编辑器可视 基于React＆antd4的高效且易于使用的json模式编辑器。 用法 npm install json-schema-editor-visual-v4 const option = { } ; import "antd/dist/antd.css" ; require ( "json-schema-editor-visual-v4/dist/main.css" ) ; const schemaEditor = require ( "json-schema-editor-visual-v4/dist/main.js" ) ; const SchemaEditor = schemaEditor ( option ) ; render ( < SchemaEditor> , document . getElementById ( "root" ) ) ; 期权对象
json可视化编辑工具（页面js实现）
09-10
通过本工具，可以对json字符串进行可视化编辑，并加编辑后的结果生成字符串。一个小工具
json schema如何约束为小数_JSON 文件在 VS Code 中可以可视化编辑了！
weixin_39633976的博客
11-25 207
你使用过 VS Code 提供的 Markdown 预览功能吗？这个所见即所得的功能给我留下了深刻的印象，它大大地提高了我编写 Markdwon 文件的效率。在前端领域，不同的框架提供了许多非常强大的配置化能力，这些配置大部分是基于 JSON 文件的。最开始，我们必须详细的阅读框架的使用文档，了解如何进行配置，我们需要仔细核对配置项目的名称以保证没有使用错误的选项。这样的操作无疑是痛苦的。我们看到...
js json编辑器_基于JSON Schema的前端可视化活动编辑器
weixin_39655377的博客
11-22 1344
先看效果，为一个可视化活动编辑器。 演示地址：https://form.lljj.me/vue-editor.html#/editor 项目地址：https://github.com/lljj-x/vue-json-schema-form/基于 JSON Schema 开箱即用的简单活动可视化编辑器。背景在做生成一个可视化店铺装修系统的时候，需要解决配置数据表单的通用性，参阅了一些现用的解决方案...
强大的基于Schema的JSON编辑器：schema-based-json-editor
gitblog_00057的博客
06-05 380
强大的基于Schema的JSON编辑器：schema-based-json-editor schema-based-json-editor A reactjs and vuejs component of schema based json editor. 项目地...
typescript-json-schema定义必选属性
09-01
要使用typescript-json-schema定义必选属性，可以通过在属性名称后面加上感叹号来表示该属性是必选的。例如，我们有一个名为`Person`的类型，其中有两个属性：`name`和`age`。要定义`name`为必选属性，`age`为可选属性，可以这样写： ```typescript type Person = { name: string; // 必选属性 age?: number; // 可选属性 } ``` 这样，在使用typescript-json-schema生成JSON Schema时，会自动识别`name`为必选属性。可以通过以下命令来生成JSON Schema： ``` npx typescript-json-schema --required Person tsconfig.json > schema.json ``` 这将通过`tsconfig.json`文件中的配置生成`Person`类型的JSON Schema，并输出到`schema.json`文件中。在生成的JSON Schema中，`name`属性会被标记为必选属性，而`age`属性则不会。 ```json { "$schema": "http://json-schema.org/draft-07/schema#", "type": "object", "properties": { "name": { "type": "string" }, "age": { "type": "number" } }, "required": ["name"], "additionalProperties": false } ``` 在生成的JSON Schema中，`"required": ["name"]`表示`name`属性是必选的，而`"additionalProperties": false`表示不允许有额外的属性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值