运维平台cmdb开发-day3
后台管理
1. 访问过程
我们在前面2天得到了各个客户端的资产数据信息，我们将各个这个数据打包发送到api，这个api其实就是django的url传参，之后按照数据的格式对比数据库增删改
2. 后台页面显示数据1
首先我们来通通思路
当用户发来get请求，我需要展示资产列表给用户，那我处理get请求，给视图去数据库中匹配内容，最后展示在页面上，我们采用ajax提交
我们最开始得到如下数据格式 table_config
table_config = [{
'q': 'id', # 数据库查询条件
'title': 'ID', # 前端页面显示
'display': False, # 是否在前端显示
},]
然后我们从数据库中根据q的查询条件筛选出内容 data_list，最后将上面 table_config 和 data_list 传给前端
# 数据库中拿到data_list
q_list = []
for i in table_config:
q_list.append(i['q'])
from repository import models
data_list = models.Asset.objects.all().values(*q_list)
data_list = list(data_list) # 格式化数据
result = {
'table_config':table_config,
'data_list':data_list,}
return HttpResponse(json.dumps(result))
前端拿到table_config 和 data_list 会根据里面的key来判断显示什么，内容是什么？
3. 后台页面显示数据2
很显然上面的数据并不很理想，因为显示的内容都只是数据库里面的，我只能对它做一些显示不显示的操作，如果说我要在显示的内容上进行格式化数据，每一行数据后面加一个操作就需要如下格式
table_config = [{
'q':'cabinet_order', 机柜号
'title':'机柜号',
'dispaly':TRUE, 显示
'text':{'content':"{n}-{m}",'kwargs':{'n':"机柜",'m':'xxx'}} # 自己随便写的字符串进行格式化
}，
{
'q': None,
'title': '操作', # 指的是，查看信息，编辑等
'display': True,
'text': {'content': "<a href='/assetdetail-{m}.html'>{n}</a>",'kwargs': {'n': '查看详细','m': '@id'}},
@ 表示从数据库查询（data_list）的字段，并不是自己随便写的字符串格式化
'attrs': {},
}
}]
然后我们从数据库中根据q的查询条件筛选出内容 data_list，最后将上面 table_config 和 data_list 传给前端
# 数据库中拿到data_list
q_list = []
for i in table_config:
if not i['q']: # 这个表示q为NONE的时候， 不会添加到q_list里面，但是我页面需要显示这个操作，从而引入text 相比上面的数据，这里新加
continue
q_list.append(i['q']) from repository import models data_list = models.Asset.objects.all().values(*q_list)
data_list = list(data_list)
print(data_list) # 格式化数据
result = {
'table_config':table_config,
'data_list':data_list,
}
return HttpResponse(json.dumps(result))
js字符串格式化方式如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
在原型里面自定义方法
String.prototype.format = function (kwargs) {
// this ="laiying: {age} - {gender}";
// kwargs = {'age':18,'gender': '女'}
var ret = this.replace(/\{(\w+)\}/g,function (km,m) {
return kwargs[m];
});
return ret;
}; // 自定义joker格式化 == joker == format
var v = "laiying: {age} - {gender}";
var result = v.shizhengwen({'age': 18, 'gender': '女'});
console.log(result);
*/
String.prototype.joker = function (kwargs) {
console.log(this); // mokey,因为是monkey调用的这个方法,this就是调用当前方法的对象,String {"monkey:{age}-{sex}"}
// this 'monkey:{age}-{sex}'
// kwargs {'age':18,'sex':'women'}
// 字符串格式化
var ret = this.replace(/\{(\w+)\}/g, function (km, m) {
// km 带括号的所有匹配项 m 是在km的基础上拿到分组的内容
console.log(km, m); // {age} age {sex} sex
return kwargs[m] // kwargs[age] kwargs[sex]
});
// 将 KM {age} 替换成 kwargs[m] == value
return ret;
}; var s = 'monkey:{age}-{sex}';
var result = s.joker({'age': 18, 'sex': 'women'});
console.log(result); // monkey:18-women
// 就会打印ok
alert(result)
</script>
</body>
</html>
js自定义字符串格式化
前端拿到table_config 和 data_list 会根据里面的key来判断显示什么，内容是什么？
4. 后台页面显示数据3
上面的数据还不是很理想，因为表字段里面还有choice类型，外键，显示字段的标签属性等，所以我们在上面的基础上增加一些格式如下
table_config = {
'q': 'device_type_id',
'title': '资产类型', # choice ，我们要显示的应该是中文而不是数字
'display': True, # @@ 表示 chioce
'text': {'content': "{n}",'kwargs'{'n':"@@device_type_choices"}},
'attrs': {} # 标签属性
},
{
'q': 'idc__name', # 外键
'title': 'IDC',
'display': True,
'text': {'content': "{n}", 'kwargs': {'n': "@idc__name"}},
attrs': {}
}
然后我们从数据库中根据q的查询条件筛选出内容 data_list，最后将上面 table_config 和 data_list 传给前端
# 数据库中拿到data_list
q_list = []
for i in table_config:
if not i['q']: # 这个表示q为NONE的时候， 不会添加到q_list里面，但是我页面需要显示这个操作，从而引入text
continue
q_list.append(i['q']) from repository import models data_list = models.Asset.objects.all().values(*q_list)
data_list = list(data_list)
print(data_list) # 格式化数据
result = {
'table_config':table_config,
'data_list':data_list,
'global_dict': {
# choices 类型
'device_type_choices': models.Asset.device_type_choices,
'device_status_choices': models.Asset.device_status_choices
} }
return HttpResponse(json.dumps(result))
5. 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>资产列表</h1>
<table border="">
<thead id="table_th"></thead>
<tbody id="table_tb"></tbody>
</table> <script src="/static/js/jquery-1.12.4.js"></script> <script>
{# 访问这里就会加载这个匿名函数#}
$(function () {
init();
}); // 字符串格式化，详情件test.html
String.prototype.format = function (kwargs) {
// this ="laiying: {age} - {gender}";
// kwargs = {'age':18,'gender': '女'}
var ret = this.replace(/\{(\w+)\}/g, function (km, m) {
return kwargs[m];
});
return ret;
}; {# 发送ajax请求给asset-json.html#}
function init() {
$.ajax({
url: '/web/asset-json.html',
type: 'GET',
dataType: 'JSON',
success: function (result) {
// 这是需要判断@ @@
initGlobalData(result.global_dict);
// 资产头部
initHeader(result.table_config);
// 资产内容
initBody(result.table_config, result.data_list)
}
}) }
{# 资产显示头部#}
function initHeader(table_config) {
/*
table_config = [
{
'q': 'id',
'title': 'ID',
'display':false
},
{
'q': 'name',
'title': '随便',
'display': true
}
]
*/ /*
<tr>
<th>ID</th>
<th>用户名</th>
</tr>
*/
var tr = document.createElement('tr');
$.each(table_config, function (k, item) {
if (item.display) {
var th = document.createElement('th');
th.innerHTML = item.title;
$(tr).append(th);
} });
$('#table_th').append(tr);
}
{# 资产显示内容部#}
function initBody(table_config, data_list) {
console.log(table_config);
console.log(data_list);
// 这个循环多少行
$.each(data_list, function (k, row) {
// data_list 信息，机柜信息，q查询获取的 row = {'cabinet_num': '12B', 'cabinet_order': '', 'id': 1},
var tr = document.createElement('tr'); // 这个循环多少列，而列的内容都可以在row里面取到
$.each(table_config, function (i, colConfig) {
console.log(colConfig);
/* colConfig 内容
{
'q':'id',
'title':'ID',
'dispaly':FALSE, 不显示
}
{
'q':'cabinet_num',
'title':'机柜号',
'dispaly':TRUE, 显示
}
*/
console.log('aaaaaaaaaaaaaaaaaaaaaaa'+colConfig.display);
console.log(colConfig.text.content);
if (colConfig.display){
// 之前不考虑 操作 的时候
// 列内容就是colconfig.q
var td = document.createElement('td');
// colconfig.q ==> 'cabinet_num'
// td.innerHTML = row[colconfig.q]
// $(tr).append(td); // 我们考虑到操作 加入了text
// colconfig.text 'text':{'content':"{n}-{m}",'kwargs':{'n':"机柜",'m':'xxx'}}
// colconfig.text.content "{n}-{m}"
// colconfig.text.kwargs {'n':"机柜",'m':'@xxx'} // str.strip lenth python
// js字符串叫string类型 string.length
// string.prototype 所有字符串方法都在这里面，这叫原型 测试文件是test.html /* 生成文本信息 @ 表示从数据库取，没有@表示就用该字符串*/
var kwargs = {};
console.log('');
$.each(colConfig.text.kwargs, function (key, value) { // @@ 如果是@@ 表示 是chioce
if (value.substring(0, 2) == '@@') {
var globalName = value.substring(2, value.length); // 全局变量的名称
var currentId = row[colConfig.q]; // 获取的数据库中存储的数字类型值
var t = getTextFromGlobalById(globalName, currentId);
kwargs[key] = t;
}
// 表示以@开头，切割 1=-1，不要第一个@字符，要后面的 xx
else if (value[0] == '@') {
kwargs[key] = row[value.substring(1, value.length)]; //cabinet_num
} else {
kwargs[key] = value;
}
});
console.log(1111);
console.log(222);
// 字符串格式化
console.log(colConfig.text.content);
var temp = colConfig.text.content.format(kwargs);
td.innerHTML = temp; /* 属性colConfig.attrs = {'edit-enable': 'true','edit-type': 'select'} */
$.each(colConfig.attrs, function (kk, vv) {
td.setAttribute(kk, vv);
}); $(tr).append(td);
}
}); $('#table_tb').append(tr);
});
}
/*
* [
* {'cabinet_num': '12B', 'cabinet_order': '', 'id': 1},
* {'cabinet_num': '12B', 'cabinet_order': '', 'id': 1},
* ]
*
* <tr>
<td>12B</td>
<td>1</td>
</tr>
<tr>
<td>12C</td>
<td>1</td>
</tr>
*
* */ // 解决 choioce 数字转中文，全局
function initGlobalData(global_dict) {
$.each(global_dict, function (k, v) {
// k = "device_type_choices"
// v= [[0,'xx'],[1,'xxx']]
// 设置全局变量的三种写法
{# device_type_choices = 123;#}
{# window.v = 123;#}
window[k] = v;
})
} // q 查询得到数字，在跟全局的比对，然后得出结果
function getTextFromGlobalById(globalName, currentId) {
// globalName = "device_type_choices"
// currentId = 1
var ret = null;
// 全局变量 "device_type_choices"：[[0,'xx'],[1,'xxx']]
$.each(window[globalName], function (k, item) {
console.log(item[0], item[1], currentId);
if (item[0] == currentId) {
ret = item[1];
return // 终止each 循环
}
});
return ret;
}
</script> </body>
</html>
前端代码，最后的数据格式
运维平台cmdb开发-day3的更多相关文章
- 运维平台cmdb开发-day1
序读项目由来 终极目标,运维平台.自动化.装机,监控,安装软件,部署基础服务,资产管理,之前是excel,现在是客户端自动获取,变更记录 后台管理 api 采集资产 四种模式agent 定时,每天执行 ...
- 运维平台cmdb开发-day2
一 发送数据到api(Django的URL) 发送请求携带参数 requests.get(url='http://127.0.0.1:8000/api/asset/?k1=123') # <Qu ...
- #研发解决方案#iDB-数据库自动化运维平台
郑昀 创建于2015/12/2 最后更新于2015/12/2 关键词:数据库,MySQL,自动化运维,AutoDDL,刷库,帐号授权,审核,回滚 提纲: 数据库自动化运维什么?别人家是怎么玩的? 我们 ...
- 《开源安全运维平台：OSSIM最佳实践》内容简介
<开源安全运维平台:OSSIM最佳实践 > 李晨光 著 清华大学出版社出版 内 容 简 介在传统的异构网络环境中,运维人员往往利用各种复杂的监管工具来管理网络,由于缺乏一种集成安全运维平台 ...
- 《开源安全运维平台OSSIM最佳实践》
<开源安全运维平台OSSIM最佳实践> 经多年潜心研究开源技术,历时三年创作的<开源安全运维平台OSSIM最佳实践>一书即将出版.该书用80多万字记录了,作者10多年的IT行业 ...
- saltstack---自动化运维平台
https://github.com/ixrjog/adminset[自动化运维平台:CMDB.CD.DevOps.资产管理.任务编排.持续交付.系统监控.运维管理.配置管理 ] https://ww ...
- sso 自动化运维平台
单点登录SSO(Single Sign-On)是身份管理中的一部分.本文中作者开发了一个自动化运维平台中的统一认证接口,单点登录平台通过提供统一的认证平台,实现单点登录.因此,应用系统并不需要开发用户 ...
- python自动化运维之CMDB篇-大米哥
python自动化运维之CMDB篇 视频地址:复制这段内容后打开百度网盘手机App,操作更方便哦 链接:https://pan.baidu.com/s/1Oj_sglTi2P1CMjfMkYKwCQ ...
- 运维平台之CMDB系统建设
CMDB是运维的基础核心系统,所有的元数据和共享数据管理源,类似于业务中的账号平台的作用.本篇文章,我将从概念篇.模型篇.到实现与实施篇具体的进行阐述. CMDB也称配置管理,配置管理一直被认为是 I ...
随机推荐
- HTML, CSS. JS的各种奇葩bug
1. block包含inline-block的时候, inline-block 没有内容的时候,会根据 font 产生一个 line-height 来产生一个空白块. 解决方法: <div cl ...
- 自己总结 C++ 代码规范
.编写原则,代码尽量简单,简洁,高效,自己写的代码让自己和别人容易看懂 .命名: a. 类的成员变量加前缀 m_(表示 member). 常量全用大写的字母,用下划线分割单词(;) 循环变量和简单变量 ...
- IOS开发Block详细用法
Block简介: ios4.0系统已开始支持block,在编程过程中,blocks被Obj-C看成是对象,它封装了一段代码,这段代码可以在任何时候执行.Blocks可以作为函数参数或者函数 ...
- java面试题大纲
跳槽时时刻刻都在发生,但是我建议大家跳槽之前,先想清楚为什么要跳槽.切不可跟风,看到同事一个个都走了,自己也盲目的开始面试起来(期间也没有准备充分),到底是因为技术原因(影响自己的发展,偏移自己规划的 ...
- Unity是什么？
Unity是patterns & practices团队开发的一个轻量级.可扩展的依赖注入容器,具有如下的特性: 1. 它提供了创建(或者装配)对象实例的机制,而这些对象实例可能还包含了其它被 ...
- HDU3853LOOPS （师傅逃亡系列•三）（基础概率DP）
Akemi Homura is a Mahou Shoujo (Puella Magi/Magical Girl). Homura wants to help her friend Madoka sa ...
- 实现一个 WPF 版本的 ConnectedAnimation
Windows 10 的创造者更新为开发者们带来了 Connected Animation 连接动画,这也是 Fluent Design System 的一部分.它的视觉引导性很强,用户能够在它的帮助 ...
- eclipse 无用代码扫描工具UCDetector
本文主要介绍UCDetector(无用代码扫描工具)使用方法及局限 对于沉积或多方接手开发的项目经常会遇到一坨一坨无用的代码,但一个一个类查找又相当费时,这里介绍一个eclipse插件扫描没有引用的类 ...
- 安装WampServer关闭mysql服务后打不开了
WampServer自带了mysql精简班的数据库了 WampServer自带 的mysql和你独立安装的mysql端口号冲突了 mysql默认的端口号是3306 建议你修改WampServer的数据 ...
- goreman 多进程管理工具
Linux下多进程管理工具对开发和运维都很有用,常见的功能全面的主流工具主要有monit.supervisor.不过开发中使用则推荐轻量级小工具goreman 举个例子:coreos的etcd就是使用 ...