前端组件越来越多，组件的配置一般都是JSON格式的。有些面向用户展示的组件，很多时候运营人员是要修改配置的的，但是把代码暴漏给运营人员是相当不靠谱的，无论是json还是html。一直想有个工具，可以直接按照一定格式，生成一套html的表单，运营人员通过修改表单的值，来修改json中的内容。之前搜索过很多json编辑器，但是对json不熟悉的人，使用成本略高。于是就做了这个JSON TEMPLATE，可以直接把按照模版，生成一套html表单，然后按照模版定义的格式，转换成JSON。

• 不侵入后端逻辑，改造需要手写json的后端管理系统，也可搭配template工具改造填写html版的后端管理系统。编写组件demo配置页面，让用户自己动手修改组件的展示。
• 可以做到前后端数据分离，HTML页面只需要解析生成的JSON来用作页面显示。

演示地址

• object
• string
• integer
• array

  如果此属性为object, 则该属性有子属性, 该属性为json object, 必须要有properties属性. 例如:

		{
		    "location": {
		        "type": "object",
		        "properties": {
		            "city": {
		                "type": "string"
		            }
		        }
		    }
		}
	

  如果此属性为string, 则该属性为单纯的input标签. 例如:

		{
		    "city": {
		        "type": "string"
		    }
		}
	

  如果此属性为integer, 则该属性为单纯的input标签并带有检验数字类型. 例如:

		{
		    "city": {
		        "type": "integer"
		    }
		}
	

  如果此属性为array, 则该属性为表格, 表格的"头"(th)为properties中的元素. 例如:

		{
		    "pets": {
		        "type": "array",
		        "properties": {
		            "animal": {
		                "type:": "string",
		                "default": "your animal name"
		            },
		            "category": {
		                "type": "string",
		                "enum": [
		                    "dog",
		                    "cat"
		                ]
		            }
		        }
		    }
		}
</pre>
anaimal与category为th. 生成的字符串为json array.



  属性


	
type
	
enum
	
default
	
min
	
max

type


	  标识该属性类型.

enum


	  标识该属性为select下拉框, enum中为每一个option. 例如:
	
		{
		    "gender": {
		        "type": "string",
		        "enum": [
		            "man",
		            "woman"
		        ]
		    }
		}
	

default


	  标识此属性default值. 例如:
	
		{
		    "city": {
		        "type": "string",
		        "default": "Bei jing"
		    }
		}
	

min


	  标识此属性最小值或最小长度.如果"type":"string", 那么min为最小长度;如果"type":"integer", 那么min为最小值, 例如:
	
		{
		    "properties": {
		        "first-name": {
		            "type": "string",
		            "description": "First and Last name",
		            "min": 4,
		            "max": "10",
		            "default": "Jeremy Dorn"
		        },
		        "age": {
		            "type": "integer",
		            "default": 25,
		            "min": 18,
		            "max": 99
		        }
		    }
		}
	

max

  标识此属性最大值或最大长度, 同上min
To be continued...