js json-schema 转换 json

一、仿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、就这样吧，一个转来又转去的小小工具