缘由

一般意义上前端的组件具体内容（如输入框、纯文本、复选框、下拉框等）均由前端自行定义渲染，但在某些时候，为了日后或当前已有的过多类型的通用性，我们也可以将某一部分的可配置组件交由后端定义，如此各类型下的可配置属性仅需后端一方维护；前端则可以直接获取到该类型下的一系列组件定义后直接渲染即可

实现思路

例如，某项目下有多种不同类型的 ”people“ 需要进行基本信息及可配置的信息展示，不同类型 people 的基本信息相同，均包括姓名、性别、年龄等；同时，根据身份的不同，需要对各个类型配置一些不同的其他信息。例如对学生需要配置下拉框单选学习级别、下拉复选框配置已选课程、checkbox配置是否已毕业等；而对老师需要输入框配置工作签名、下拉框配置教授课程、下拉框配置职称等

此时，不同于传统的创建父类 people ，子类 student、teacher，再根据各自属性设定相应的特征字段，同时前端根据获取到的数据类型，做出不同的组件渲染，我们可以采用由后端定义组件的方式，将所有类型的 people 抽象成单一的具备一个称作 setting 字段的 people 类

举个栗子

{
   "nodeType": "学生",
   "iconName": "图标名称",
   "name": "这是学生的名字",
   "info": "学生的介绍信息",
   "setting": 
    [{
        "defaultValue": "options 中的默认值",
        "options": [
            {
            "value": "3",            # 查询所选中信息的 id（如果是对应数据库中的数据）
            "label": "dev"           # 所选信息展示名
            },
            {
            "value": "4",
            "label": "next"
            },
            {
            "value": "5",
            "label": "t-next"
            }
        ],
        "filterName": "用于搜索的关键字",  # 提供对 options 的搜索功能
        "label": "属性名",               # 该组件所表示的属性名
        "required": true,               # 是否必填
        "type": "select"                # 组件类型
    },
    {                                   ######## 第二个可配置属性
        "defaultValue": "",             # 无默认值，即默认为空
        "envOption": [                  # 向该组件的输入框内插入可配置的变量选项，如{{善良}}
            "善良",
            "大方",
            "勇敢"
        ],
        "filterName": "用于搜索的关键字",  # 用户键入后传至后端
        "label": "特质",
        "required": false,
        "type": "template_input"                   
    }],
   "empty": "",                          # 该项下无可配置组件时展示的文字信息
   "classType": "三好学生"                # 有多种类型的学生 
}

{
   "nodeType": "老师",
   "iconName": "图标名称",
   "name": "这是老师的名字",
   "info": "老师的介绍信息",
   "setting":"
    [{
        "default" : "",
        "options" : [{
                        "value": "1101",
                        "label": "语文"
                    }, {
                        "value": "1102",
                        "label": "数学"
                    }]
        "filterName": "",
        "label": "教授课程",
        "required": true,
        "type": "select"        
    }, {    
        "default" : "",
        "options" : [, {
                        "value": "100",
                        "label": "见习教师"
                    }{
                        "value": "101",
                        "label": "初级教师"
                    }, {
                        "value": "102",
                        "label": "中级教师"
                    }, {
                        "value": "103",
                        "label": "高级教师"
                    }]
        "filterName": "",
        "label": "职称",
        "required": true,
        "type": "select"      
    }]"
}