• CMDB服务器管理系统【s5day92】:定制表头


    一、目录结构

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

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

     整体和单独那个先行

    先整体后单独

  • 相关阅读:
    《Redis内存数据库》Redis主复制集(主从复制)
    《Redis内存数据库》Redis消息模式
    《Redis内存数据库》redis配置文件说明
    《Redis内存数据库》Redis事务
    《Redis内存数据库》Redis持久化实现方式和原理
    《Redis内存数据库》Redis基本操作命令
    《Redis内存数据库》Redis权限管理
    yum install 与 yum groupinstall 的区别
    LNMP卸载
    Vim配置 终端背景色配置
  • 原文地址:https://www.cnblogs.com/luoahong/p/9429858.html
Copyright © 2020-2023  润新知