CMDB服務器管理系統【s5day92】：定製表頭

時間 2019-11-07

標籤 cmdb 服務器管理系統 s5day92 定製表頭简体版

原文原文鏈接

1、目錄結構

2、獲取數據，模板語言渲染

web\views.pycss

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.htmlhtml

<!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>

3、js獲取數據，js動態建立table標籤

訂製表頭：table_config

解決了什麼問題？前端

之前咱們都是寫死的多少行多少咧
我這個表有幾列？就寫三列，這三列叫什麼就得訂好了
若是是這樣，前端也要按照這種方式去寫，
用戶管理的頁面的時候，又得把這個寫一遍
前端之後我不寫了，到底顯示幾列？我也不知道，到底多少列，根據我後臺的配置文件決定

具體代碼以下：jquery

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

解決了什麼問題？web

一、先後端分離ajax

我在頁面生成一個表格，在表格裏面全都列出來你說行不
之後我經過配置文件控制多少列，分別是什麼

二、data裏面再寫個列表，數據庫

我能夠把全部的數據放到個人頁面上
內容是去數據庫裏拿

<!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>