js json-schema 转换 json_json转jsonschema_jaychou0320的博客

一、仿yapi实现json schema编辑

如图，在线编辑或导入json，并在json-schema编辑器中展示和编辑

这里有现成的插件，就没自己实现，我理解的大概实现原理，是一个树结构，然后根据类型去做一些细化的判断，比如说object的才可以有子节点等。

上面的是一个普通的json编辑器，这个网上很多插件。下面的是schema的编辑器，我用的是vue版本的，
json-schema-editor

这个编辑器，基本可以满足使用，但是我有个需要回显的功能，回显时不可以编辑，这个插件没有一些可以设定disadble状态的属性，所以我使用了css的pointer-events: none;通过样式来控制一下，但有个问题是，这个属性的鼠标的手势的权重较高，是cursor:pointer;但是我想要的是cursor: not-allowed，所以，产品和码农的悲欢并不相通，不过幸运的是，这是一个内部使用的工具，干不过技术的时候，就只好去干产品咯。后续有时间再去研究更好用的插件或者自己开发吧。

二、说一说这个json如何适应schema编辑器吧

1、json-schema的格式如下（请自行搜索规范格式）

"type": "object", "title": "title", "properties": { "name": { "type": "string", "default": "张三" "age": { "type": "number", "default": "11" "hobby": { "type": "array", "items": { "type": "string", "default": "跑步" "aaaa": { "type": "object", "properties": { "addr": { "type": "string", "default": "北京1" "required": [ "addr" "required": [ "age", "hobby", "aaaa"

这个其实和下面的json是一样的

"name": "张三", "age": "11", "hobby": [ "aaaa": { "addr": "北京1"

2、我有一个导入功能，就是上图的json编辑器，编辑一段json然后回显到schema编辑器的功能，所以需要有一个转换的方法，网上没有找到js 转换的，或者你有空在找一下也行

data(){
	return{
	 dataType: ["string", "boolean", "number"],
  handleJson2JsonSchema2(data) {
      let obj = {};
      for (let key in data) {
        let param = data[key];
        let type = typeof param;
        obj[key] = {};
        if (this.dataType.includes(type)) {
          obj[key].type = type;
          obj[key].default = param;
        } else if (param instanceof Array) {
          let item = param[0] || "";
          obj[key].type = "array";
          let itemType = typeof item;
          if (this.dataType.includes(itemType)) {
            obj[key].items = {
              type: itemType || "string",
              default: item || ""
          } else if (item instanceof Object) {
            obj[key].items = {};
            obj[key].items.type = "object";
            obj[key].items.properties = this.handleJson2JsonSchema2(item);
        } else if (param instanceof Object) {
          obj[key].type = "object";
          obj[key].properties = this.handleJson2JsonSchema2(param);
      return obj;
3、后来吧，后台其实并不想要schema格式的，但是前端又必须要用这个编辑器来展示，没办法，自己适应自己吧，再转回来呗 
data(){
	reutrn{
		dataType: ["string", "boolean", "number", "integer"]
handleJsonSchema2Json(data) {
      let obj = {};
      for (let key in data) {
        let param = data[key];
        let type = param.type;
        obj[key] = {};
        if (this.dataType.includes(type)) {
          obj[key] = param.default || "";
        } else if (type === "array") {
          let items = param.items;
          if (this.dataType.includes(items.type)) {
            obj[key] = [items.default];
          } else {
            obj[key] = [this.handleJsonSchema2Json(items.properties)];
        } else if (type === "object") {
          obj[key] = this.handleJsonSchema2Json(param.properties);
      return obj;
4、就这样吧，一个转来又转去的小小工具
var jfs = require ( 'json-from-schema' ) ;
var schema1 = {
  id : 'http://www.example.com/herp#'
  , type : "object"
  , properties : {
    someString : { type : 'string' , pattern : 'bl(a){1,10}h' }
    , someInt : { type : 'integer' , minimum : 23 , maximum : 42 }
    , someEnum : { $ref : '#/definitions/blaEnum' }
    , someEnumArray : { type : 'array' ,
分叉它（  ）
 创建您的功能分支（ git checkout -b my-new-feature ）
 提交您的更改（ git commit -am 'Add some feature' ）
 推送到分支（ git push origin my-new-feature ）
 创建一个新的拉取请求
				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:(JavaScript Object Notation, JS对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
Schema，即XML Schema，XSD (XML Schema Definition)是W3C于2001年5月发布的推荐标准，指出如
				String smodelJson="";//json字符串
JSONObject modelJsons = JSON.parseObject(modelJson);//json字符串转为json对象
JSONArray array= modelJsons.getJSONArray("metadata");//json对象转为json数组
String obj = array.getJSONOb...
CommonJS (node.js) 
 var defaults = require ( './path/to/index.js' ) ;
defaults ( { ... } ) ;
 要求JS 
 // in require.js config
paths: {
  'defaults' : './path/to/lib/defaults.js'
// in a file
define ( [ 'defaults' ] , function ( defaults ) {
  defaults (
Json Schema是用来描述Json的语言。
Json Schema定义了一套词汇和规则，这套词汇和规则用来定义Json元数据，且元数据也是通过Json数据形式表达的。Json元数据定义了Json数据需要满足的规范，规范包括成员、结构、类型、约束等。
举个例子：
通过有右图的JsonSchema，来描述左图的Json。type规定了字段的类型
关键字-类型 Type
				Json：
Json是一种轻量级的数据交互交互格式，方便人们进行交互，并且方便计算机进行解析，Json是一种独立的完全独立的文本文本格式。
Json 是一种轻量级的数据交换格式。
轻量级指的是跟 xml 做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式。
json 是由键值对组成，并且由花括号（大括号）包围。每个键由引号引起来，键和值之间使用冒号进行分隔，
多组键值对之间进行逗号进行分隔。
var JsonObj ={“key1”:“悟空”
,"key2":悟能
如果Json中有多
				json模式编辑器
JSON模式的直观编辑器，提供树视图以显示模式结构，并提供属性检查器以编辑模式元素的属性。 使用Vue.js 2和Firebase开发。 请参考了解详细信息。
模式元素托盘
JSON模式的所有元素的列表，可以拖放到树状视图。
用户模式托盘
所有用户架构的列表，这些架构存储在Firebase中。 用户可以保存，加载，删除和导入模式，模式可以拖放到树状视图。
模式元素的树状视图
模式的结构可以在任何级别扩展或崩溃。
上下文菜单
在树视图中右键单击该元素可以弹出该元素的上下文菜单，并执行该元素特定的操作。
架构元素的属性检查器
用于编辑架构元素属性的面板。
模式的文本视
cd /usr/local
wget https://nodejs.org/download/release/v12.9.0/node-v12.9.0-linux-x64.tar.gz
tar -xvzf node-v12.9.0-linux-x64.tar.gz
#配置环境变量
				摘要：由于项目需要，需要一款基于vue平台的json schema编辑器，github上找了一圈没找到合适的组件，索性用两天时间自己造一个轮子吧。方便自己，方便生态圈。
源码地址:
Github：json-schema-editor-vue
Gitee : json-schema-editor-vue
Example：国外Demo，国内请访问：国内Demo
####一、json-schema-editor-vue特征
1.按照json schema的规范用可视化的方式定义json结构
2.节点的属性可