一、目录结构

二、获取数据，模板语言渲染

web\views.py

import json

from django.shortcuts import render,HttpResponse

from django.http import JsonResponse

from repository import models

def server(request):

    return render(request,'server.html')

def server_json(request):

    server_list = models.Server.objects.values('hostname','sn','os_platform')

    response = {

	    'status':True,

        'data_list': list(server_list),

    }

    return JsonResponse(response)

server.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css" />

</head>

<body>

<h1>服务器列表</h1>

<script src="/static/js/jquery-3.2.1.js"></script>

<script>

    $(function () {

       init();

    });

    /*

    像后台获取数据

     */

    function init() {

        $.ajax({

            url:'/server_json.html',

            type: 'GET',

            data: {},

            dataType: 'JSON',

            success:function (response) {

                console.log(response.data);

            }

        })

    }

</script>

</body>

</html>

三、js获取数据，js动态创建table标签

订制表头：table_config

解决了什么问题？

  1. 以前我们都是写死的多少行多少咧
  2. 我这个表有几列？就写三列，这三列叫什么就得订好了
  3. 如果是这样，前端也要按照这种方式去写，
  4. 用户管理的页面的时候，又得把这个写一遍
  5. 前端以后我不写了，到底显示几列？我也不知道，到底多少列，根据我后台的配置文件决定

具体代码如下：

import json

from django.shortcuts import render,HttpResponse

from django.http import JsonResponse

from repository import models

def server(request):

    return render(request,'server.html')

def server_json(request):

    table_config = [

        {

            'q': 'hostname',

            'title': '主机名',

        },

        {

            'q': 'sn',

            'title': '序列号',

        },

        {

            'q': 'os_platform',

            'title': '系统',

        },

    ]

    values = []

    for item in table_config:

        values.append(item['q'])

    server_list = models.Server.objects.values(*values)

    response = {

        'data_list': list(server_list),

        'table_config': table_config

    }

    return JsonResponse(response)

订制显示内容: table_config，data_list

解决了什么问题？

1、前后端分离

  1. 我在页面生成一个表格 ，在表格里面全都列出来你说行不
  2. 以后我通过配置文件控制多少列，分别是什么

2、data里面再写个列表，

  1. 我可以把所有的数据放到我的页面上
  2. 内容是去数据库里拿
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css" />

</head>

<body>

<div class="container">

    <h1>服务器列表</h1>

    <table class="table table-bordered">

        <thead id="tHead">

            <tr>

            </tr>

        </thead>

        <tbody id="tBody">

        </tbody>

    </table>

</div>

<script src="/static/js/jquery-3.2.1.js"></script>

<script>

    $(function () {

       init();

    });

    /*

    像后台获取数据

     */

    function init() {

        $.ajax({

            url:'/server_json.html',

            type: 'GET',

            data: {},

            dataType: 'JSON',

            success:function (response) {

                /* 处理表头 */

                initTableHead(response.table_config);

                console.log(response.table_config);

                console.log(response.data_list);

            }

        })

    }

    function initTableHead(table_config) {

        /*

         table_config = [

                {

                    'q': 'hostname',

                    'title': '主机名',

                },

                {

                    'q': 'sn',

                    'title': '序列号',

                },

                {

                    'q': 'os_platform',

                    'title': '系统',

                },

            ]

         */

        $('#tHead tr').empty();

            $.each(table_config,function (k,conf) {

                var th = document.createElement('th');

                th.innerHTML = conf.title;

                $('#tHead tr').append(th);

            });

    }

</script>

</body>

</html>

四、运行截图

五、在工作中如何开发一个你没有学过的项目

学习流程：

  1. - 搜现成模块
  2. - 基本使用，找文档
  3. - 看源码
  4. - stackoverflow

整体和单独那个先行

先整体后单独

CMDB服务器管理系统【s5day92】：定制表头的更多相关文章

  1. CMDB服务器管理系统【s5day87】：需求讨论-设计思路

    自动化运维平台愿景和服务器管理系统背景 服务器管理系统 管理后台示例 需求和设计 为什么开发服务器管理系统? 背景: 原来是用Excel维护服务器资产,samb服务[多个运维人员手动维护] 搭建运维自 ...

  2. CMDB服务器管理系统【s5day92】：服务器管理回顾

    一.服务器管理回顾 1.requests 发送: requests.post(url='',data=,json=) requests.get() Django接受: request.POST, co ...

  3. CMDB服务器管理系统【s5day88】：采集资产之Agent、SSH和Salt模式讲解

    在对获取资产信息时,简述有四种方案. 1.Agent  (基于shell命令实现) 原理图 Agent方式,可以将服务器上面的Agent程序作定时任务,定时将资产信息提交到指定API录入数据库 优点: ...

  4. CMDB服务器管理系统【s5day88】：采集资产-文件配置(一)

    django中间件工作原理 整体流程: 在接受一个Http请求之前的准备 启动一个支持WSGI网关协议的服务器监听端口等待外界的Http请求,比如Django自带的开发者服务器或者uWSGI服务器. ...

  5. CMDB服务器管理系统【s5day89】：部分数据表结构-资产入库思路

    1.用django的app作为统一调用库的好处 1.创建repository app截图如下: 2.好处如下: 1.app的本质就是一个文件夹 2.以后所有的app调用数据就只去repository调 ...

  6. CMDB服务器管理系统【s5day90】：API验证

    1.认证思路刨析过程 1.请求头去哪里拿? 1.服务器端代码: def test(request): print(request) return HttpResponse('你得到我了') 2.客户端 ...

  7. CMDB服务器管理系统【s5day90】：API构造可插拔式插件逻辑

    1.服务器端目录结构: 1.__init__.py from django.conf import settings from repository import models import impo ...

  8. CMDB服务器管理系统【s5day90】：获取今日未采集主机列表

    1.目录结构 1.服务器端 2.客户端 2.具体代码如下 1.数据库增加两个字段 class Server(models.Model): """ 服务器信息 " ...

  9. CMDB服务器管理系统【s5day90】：创建资产更新服务器硬盘信息

    1.创建硬件资产信息 import json from django.shortcuts import render,HttpResponse from django.views.decorators ...

随机推荐

  1. AngularJS学习之旅—AngularJS SQL(十二)

    一.使用 PHP 从 MySQL 中获取数据 <div ng-app="myApp" ng-controller="customersCtrl"> ...

  2. Linux Collection：用户管理

    adduser 添加(新建)用户账户 $ sudo adduser username groups 添加组 $ groups username # 查看用户已有的组 $ groups username ...

  3. 做为一个Python程序员的基本素养

    今天在学习的过程中,明白了一些不是Python标准所必须要做的事情,二是做为一个合格的Python程序员应该所遵从的一些规范 分享给大家,有不足的地方请大家指正,此下是我学习的一点心得: 1．在给变量 ...

  4. vmware centos7 minimal 配置共享文件夹

    使用的是VMware安装CentOS7 minimal版,系统镜像是CentOS-7-x86_64-DVD-1708.iso. 宿主机系统为win10,CentOS7 minimal过程省略,可参考h ...

  5. Linux内核入门到放弃-无持久存储的文件系统-《深入Linux内核架构》笔记

    proc文件系统 proc文件系统是一种虚拟的文件系统,其信息不能从块设备读取.只有在读取文件内容时,才动态生成相应的信息. /proc的内容 内存管理 系统进程的特征数据 文件系统 设备驱动程序 系 ...

  6. AI 生成式对抗网络（GAN）

    生成式对抗网络(Generative Adversarial Network,简称GAN),主要由两部分构成:生成模型G和判别模型D.训练GAN就是两种模型的对抗过程. 生成模型:利用任意噪音(ran ...

  7. MSIL学习------从HelloWorld开始

    我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3889z1y72b28 ...

  8. 手把手教你发布一个Python包

    本文主题如下: 编写一个包(Python 源代码),但不是本文的重点. 编译包,观察编译后的文件. 发布包,发布的包可以有多种类型. 如何在 Pypi 中查看已发布的包 注意: 本文编写的包在 Pyt ...

  9. 基于 HTML5 的 3D 工业互联网展示方案

    前言 通用电气(GE).IBM.英特尔等公司主推的“工业互联网”正在经历“产品-数据分析平台-应用-生态”的演进.这主要得益于 Predix 数据分析平台对工业互联网应用的整合能力.Predix 就像 ...

  10. VisualStudio2017下ASP.NET CORE的TagHelper智能提示不能使用的解决办法

    之前在VS2017RC中就发现该问题,安装了依赖,但是前段一直点不出来asp-for,后来查了发行说明, 才知道在VS2017rc中暂时无法解决,所以一直等到VS2017正式版的发布,急冲冲的装好, ...