运维平台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 ...

随机推荐

Hibernate主键生成策略详解
转载自:http://blog.csdn.net/wanghuan203/article/details/7562395 hibernate提供的主键生成策略,使我们可以在实体类的映射xml文件中设定 ...
Hibernate常见配置详细解释
 <?xml version='1. ...
Express 开发与部署最佳实践 -- 待续
链接 nginx 代理缓存压缩等全部采用异步使用try catch 处理同步异常 promise 处理异步异常, 而不是使用 domains 或者 uncaughtExceptio ...
Shell 命令行实现将一个站点页面全部下载到本地并替换其中链接的脚本
Shell 命令行实现将一个站点页面全部下载到本地并替换其中链接的脚本不知道为什么,我总想用 Shell 脚本来实现把一个站点内容给下载下来.但是下载什么站点我确不知道.今天尝试了一下利用 curl ...
Gradle2.0用户指南翻译——第三章. 教程
翻译项目请关注Github上的地址:https://github.com/msdx/gradledoc本文翻译所在分支:https://github.com/msdx/gradledoc/tree/2 ...
zookeeper 学习命令
ls /TianheSoft/nodesls /TianheSoft/nodes/localhost_2181-0000000000ls /TianheSoft/propsls /TianheSoft ...
[IC]Lithograph(1)光刻技术分析与展望
文章主体转载自: 1.zol摩尔定律全靠它 CPU光刻技术分析与展望 2.wiki:Extreme ultraviolet lithography 3.ITRS 2012 1. 光刻技术组成和关键点 ...
Linux usleep for shell
/**************************************************************************** * Linux usleep for she ...
librec库
固定初始化矩阵值 net.librec.math.structure -> class DenseMatrix -> void init()
【NodeJs】入门笔记一
忙乎了两周,把一个后台模型项目完成了,整个过程又进步不少,私喜一下. 暂时可以悠闲两天,又一次把node教程拿出来,每次都看一点点,积少成多吧. 查了很多资料,觉得从<Node入门>开始看 ...

运维平台cmdb开发-day3

后台管理

运维平台cmdb开发-day3的更多相关文章

随机推荐

热门专题