MySQL加入了JSON支持，NoSQL的特性，让我们多了一种应对业务快速增长的方法，不过使用JSON后，就不能像表字段那样方便的加入注释，对于团队协作开发、后期维护无疑是个障碍。最近发现利用 json schema 技术可以给JSON加上注释，甚至可以生成可视化UI编辑器，对于需要手动维护JSON字段的人来说简直就是福音。说了这么多，还不知是何物，不如一起来看看。
json-editor
图中，最右边是我们存储在数据表中的格式，中间是自动生成的编辑UI，而最左边就是需要额外定义的 json schema。举个例子，假如储存这样的结构在表中：
{
"histories": {
"tv":[
{"title": "切尔诺贝利", "type": "美剧", "cur": 3, "at_time": "18m14s"},
{"title": "爵迹临界天下", "type": "国产剧", "cur": 19, "at_time": "42m54s"}
],
"area": "CN"
}
}
我们不能给其中的JSON字段加上注释，比如 cur 、at_time表达的意思并不清晰，协同工作时，必然会增加额外的沟通成本。当修改JSON对象的某个值时，手动编辑json也很容易出错，毕竟JSON也只是阅读方便，大量编辑起来也很容易出错。
设想一下，我们的JSON数据有个图形可编辑界面，可以将每个字段的具体含义显示出来，并且便于编辑和保存，就最好不过了。用传统的方式实现，需要为每个不同的JSON结构设计用户界面，还得将各个字段正确的显示在界面上……开发成本过高，还不如手动修改简便，毕竟我们更想用一种方式解决这件事。但是，如果不用我们设计界面，只写配置，就能自动生成UI，再实现读写数据库，建立数据与配置的对应关系，就能实现我们的设想，用一种方式达到目的，倒也挺划算。让我们看看自动生成的UI效果
使用json-editor效果
看起来不错，不过界面上完全隐藏了真实的JSON字段，如果我们需要明确JSON字段，也完全可以通过调整配置达到目的。
通过title与description增强对应关系
这完全达到我的预期，现在只需要编辑 json-schema 就能制定出各种JSON结构的UI，至于 json-schema 的格式就像这样。
{
"type": "object",
"title": "当JSON遇上UI",
"properties": {
"histories": {
"title": "histories",
"type": "object",
"description": "编辑用户历史",
"properties": {
"tv": {
"title": "tv",
"type": "array",
"format": "table",
"description": "电视剧",
"uniqueItems": true,
"items": {
"type": "object",
"properties": {
"title": {
"type": "string",
"title": "title 名称",
"options": {
"inputAttributes": {
"placeholder": "爵迹临界天下"
}
}
},
"type": {
"type": "string",
"title": "type 类型",
"default": "国产剧",
"enum": [
"美剧",
"国产剧"
]
},
"cur": {
"title": "cur 更新至",
"type": "integer",
"mininum": 1,
"default": 1
},
"at_time": {
"title": "at_time 播放至",
"type": "string",
"options": {
"inputAttributes": {
"placeholder": "10m32s"
}
}
}
}
}
},
"area": {
"title": "area",
"description": "所在地区",
"type": "string",
"default": "CN"
}
}
}
}
}
现在，我再也不需要为JSON注释和编辑烦恼，json-editor 让我解脱（已飘
PS：汉化请修改 json-editor/src/default.js，我自译的土味英语就不分享了。
// 复制一份 JSONEditor.defaults.languages.en 并翻译到字符串中
JSONEditor.defaults.languages.zh = {
/**
* When a property is not set
*/
error_notset: "必须设置属性",
/**
* When a string must not be empty
*/
error_notempty: "必填值",
// ...
}
// 翻译完别忘记修改默认语言
// Translation strings and default languages
JSONEditor.defaults.default_language = 'zh';
// grunt 编译后就是汉化版了
Bye~
网友评论