页面动态添加分类-模板-属性-值

2019-05-02

在线demo: http://www.devopser.org:9999
项目地址:https://github.com/fish2018/cmdb-demo

这个设计原本是想用来做CMDB的,可以不更改表结构的情况下非常灵活的在线添加分类-模板-属性-值。

这里主要用到了Mysql 5.7+ 版本支持的Json的特性,添加属性时只需要在json串中添加一个新的key/value即可,这样就不用变更表结构了。

分类:

这个很好理解,就是创建最顶级的分类,如硬件、软件等等。
image.png

数据库中的体现也是比较简单的文本。
image.png

模板:

这是最关键的一环,模板与分类做关联,再通过模板来定制属性,动态添加。key是将来要录入的key,value相当于元数据,将来用于字段校验和前端渲染。比如是否为必填项,是否逻辑删除,类型是什么(string,date,object,若为object说明有关联关系)。

属性object类型是这个设计中的亮点,比如服务器模板,有一个叫“APP“的属性关联了软件模板,体现在页面操作就是在录入服务器实例该属性值的时候,就可以通过选择器关联app了。
image.png

体现在数据库字段,就是一个约定好格式的json串
image.png
如果object类型,“relate”的value是选择的关联模板id的列表

服务器模板
{
	"cpu": {
		"type": "STRING",
		"relate": null,
		"required": true,
		"logic_del": false
	},
	"mem": {
		"type": "STRING",
		"relate": null,
		"required": true,
		"logic_del": false
	},
	"型号": {
		"type": "STRING",
		"relate": null,
		"required": true,
		"logic_del": false
	},
	"应用": {
		"type": "OBJECT",
		"relate": [2],
		"required": false,
		"logic_del": false
	}
}
sso(单点登录应用)模板
{
	"管理员": {
		"type": "OBJECT",
		"relate": [3],
		"required": true,
		"logic_del": false
	},
	"开发语言": {
		"type": "STRING",
		"relate": null,
		"required": true,
		"logic_del": false
	}
}
系统运维模板
{
	"姓名": {
		"type": "STRING",
		"relate": null,
		"required": false,
		"logic_del": false
	},
	"联系方式": {
		"type": "STRING",
		"relate": null,
		"required": false,
		"logic_del": false
	}
}

实例

实例与模板做关联,最终要录入的数据就是根据模板定制好的字段,插入数据即可。
image.png

查看实例的时候,如果属性类型是Object的,就会被渲染成超链接到关联的实例,可以点击查看关联实例的属性
image.png
image.png
image.png

体现在数据库也是json串,key与模板的一样,把录入的数据作为相应的value,录入的时候会根据模板中属性的元数据进行相应的校验。
involved_by说明实例被依赖,值为依赖其的实例id列表,非空时删除会有提示。
image.png

视图

这是关联关系价值体现的一环,录入的数据有关联,要显示的时候,总不希望一个一个点进去看,最好在一个页面就展示出当前实例嵌套的深层次的属性信息,视图就是做个的。

创建视图

想要展示指定模板的哪些属性,直接选择即可,并且可以选择其关联的模板的属性
image.png
保存成一个视图,在渲染视图时以供选择。
image.png
体现在数据库,被保存成一个属性列表
image.png

渲染视图

选择好之前创建的视图模板,勾选想要显示的属性。实现参考根据checkbox勾选动态渲染表头
image.png
这一步其实是实现起来最麻烦的地方,后端根据模板视图选择的属性对实例表中的数据进行处理,把关联的实例的属性值也一起取出来,最后再拼接成我们希望展示的数据格式。

[{
	"NAME": {
		"demo主机": 6
	},
	"型号": "R730",
	"cpu": "2核4线程",
	"mem": "8G",
	"应用/开发语言": ["登录单点: php"],
	"应用/管理员/姓名": ["登录单点/demo运维: 张三"],
	"应用/管理员/联系方式": ["登录单点/demo运维: zhangsan@qq.com"]
}]

我这里直接多次循环查询关联实例的值进行拼接的,由于还要大量查库,性能比较差,所以限制了最多三层嵌套,且实例数量不能太多,超过1000就会比较慢了,因此我这里还用到了redis,把查询的结果缓存起来。(有能力的朋友可以尝试调整数据结构和算法来提升性能)

表结构UML

5c8efaa9d7a15.png


标题:页面动态添加分类-模板-属性-值
作者:fish2018
地址:http://www.devopser.org/articles/2019/05/02/1556764621087.html