Web開發基礎之CMDB系統開發之三

阿新 • • 發佈：2020-12-26

　　一，資產主機模組

　　1，資產主機模型設計

　　主機展示資訊表

　　常規性的收集：

　　主機模型：IP地址、連線埠、作業系統（Linux，Windows，Mac）、機器型別（虛擬機器，物理機）、主機名、CPU型號、CPU物理個數、記憶體資訊、系統平臺、系統平臺位數、UUID、SN、探測狀態、建立主機時間、更新主機時間

　　還要收集硬碟資訊，網絡卡資訊，注意一臺主機,硬碟可能有多個，網絡卡也會有多個。所以要單獨把硬碟和網絡卡各單獨設計成一張表，然後使用一對多跟主機模型連線起來。

　　硬碟模型：硬碟名、硬碟大小、外來鍵關聯（server）

　　網絡卡模型：網絡卡名、Ip地址、外來鍵關聯（server）

　　還需要一張探測表，把探測時候的一些資訊記錄下來，比如在探測的時候，要輸入主機IP，埠，要把這些資訊收集下來，並且跟主機表進行關聯。

　　建立新應用resources

python manage.py startapp resources

　　建立模板資料夾templates和路由urls

　　settings設定應用

　　①建立資料模型

class Idc(models.Model):
    name = models.CharField(max_length=10, verbose_name='機房簡稱')
    name_cn = models.CharField(max_length=32, verbose_name='機房名稱')
    address = models.CharField(max_length=64, verbose_name='機房地址')
    phone = models.CharField(max_length=11, verbose_name='機房座機電話')
    username = models.CharField(max_length=32, verbose_name='機房負責人姓名')
    username_email = models.EmailField(verbose_name='機房負責人郵箱')
    username_phone = models.CharField(max_length=11, verbose_name='機房負責人手機號')

    class Meta:
        default_permissions = []
        permissions = (
            ('add_idc', '新增IDC'),
            ('show_idc', '檢視IDC'),
            ('delete_idc', '刪除IDC'),
            ('update_idc', '更新IDC'),
        )

　　遷移資料

D:\web\syscmdb>python manage.py makemigrations resources
Migrations for 'resources':
  resources\migrations\0001_initial.py
    - Create model Idc

D:\web\syscmdb>python manage.py migrate resources
Operations to perform:
  Apply all migrations: resources
Running migrations:
  Applying resources.0001_initial... OK

　　檢視資料表

　　②路由

　　為了防止模板頁面報錯一次性把路由加齊了

　　③檢視

　　④模板

　　注意修改幾處名稱不對應的地方

{% extends 'base.html' %}

{% block load_css %}
    <link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
{% endblock %}

{% block mbx %}
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2>機房展示</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{% url 'index' %}">首頁</a>
                </li>
                <li>
                    <a href="">資源管理</a>
                </li>
                <li>
                    <a href="">機房展示</a>
                </li>
            </ol>
        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="col-lg-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>機房展示 </h5>
            </div>
            <div class="ibox-content">
                <a class="btn btn-w-m btn-primary" href="{% url 'idc_add' %}">建立機房</a>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th class="text-center">機房簡稱</th>
                        <th class="text-center">機房名稱</th>
                        <th class="text-center">機房地址</th>
                        <th class="text-center">機房座機電話</th>
                        <th class="text-center">機房負責人姓名</th>
                        <th class="text-center">機房負責人郵箱</th>
                        <th class="text-center">機房負責人手機號</th>
                        <th class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for object in object_list %}
                        <tr>
                            <td class="text-center">{{ object.name }}</td>
                            <td class="text-center">{{ object.name_cn }}</td>
                            <td class="text-center">{{ object.address }}</td>
                            <td class="text-center">{{ object.phone }}</td>
                            <td class="text-center">{{ object.username }}</td>
                            <td class="text-center">{{ object.username_email }}</td>
                            <td class="text-center">{{ object.username_phone }}</td>
                            <td class="text-center">
                                <a href="{% url 'idc_update' %}?id={{ object.id }}"
                                   class="btn btn-primary btn-sm">更新</a>
                                <a class="btn btn-danger btn-sm" onclick="idc_delete({{ object.id }})">刪除</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <center>
                    <div class="btn-group">
                        {% if page_obj.has_previous %}
                            <a href="{% url 'idc_list' %}?page={{ page_obj.previous_page_number }}"
                               class="btn btn-white">上一頁</a>
                        {% endif %}
                        {% for page in page_range %}
                            {% if page_obj.number == page %}
                                <a class="btn btn-white active">{{ page }}</a>
                            {% else %}
                                <a class="btn btn-white" href="{% url 'idc_list' %}?page={{ page }}">{{ page }}</a>
                            {% endif %}
                        {% endfor %}
                        {% if page_obj.has_next %}
                            <a href="{% url 'idc_list' %}?page={{ page_obj.next_page_number }}" class="btn btn-white">下一頁</a>
                        {% endif %}
                    </div>
                </center>
            </div>
        </div>
    </div>

{% endblock %}


{% block load_js %}
    <script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script>
        function idc_delete(id) {
            var data = {};
            data['id'] = id;
            data['csrfmiddlewaretoken'] = "{{ csrf_token }}";
            $.ajax({
                url: '{% url 'idc_delete' %}',
                type: 'post',
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        swal({
                            title: res.msg,
                            type: 'success',
                            confirmButtonText: "OK"
                        }, function () {
                            window.location.reload()
                        });
                    } else {
                        swal({
                            title: res.msg,
                            type: 'error',
                            confirmButtonText: "知道了"
                        });
                    }
                }
            })
        };
    </script>
{% endblock %}

　　　修改基礎模板base.html把IDC機房連結加入

　　MySQL插入測試資料

mysql> insert into resources_idc values (null,'aliyun','阿里雲','杭州','01011111111','張大媽','[email protected]','13333333333');

　　頁面檢視

　　3，新增資產機房

　　①路由

　　②檢視

class IdcAddView(TemplateView):
    template_name = 'idc_add.html'
    def post(self, request):
        data = request.POST
        print(data)
        res = {'status': 0, 'msg': '新增成功'}
        try:
            idc = Idc()
            idc.name = data.get('name')
            idc.name_cn = data.get('name_cn')
            idc.address = data.get('address')
            idc.phone = data.get('phone')
            idc.username = data.get('username')
            idc.username_email = data.get('username_email')
            idc.username_phone = data.get('username_phone')
            idc.save()
        except Exception as e:
            print(e)
            res = {'status': 1, 'msg': '新增失敗'}
        return JsonResponse(res)

　　③模板

{% extends 'base.html' %}

{% block load_css %}
    <link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
{% endblock %}

{% block mbx %}
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2>建立機房</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{% url 'index' %}">首頁</a>
                </li>
                <li>
                    <a href="">資產管理</a>
                </li>
                <li>
                    <a href="">建立機房</a>
                </li>
            </ol>
        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="ibox-content">
        <form id="submit_form" class="form-horizontal">
            {% csrf_token %}
            <div class="form-group"><label class="col-sm-2 control-label">機房簡稱</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="name"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-2 control-label">機房名稱</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="name_cn"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-2 control-label">機房地址</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="address"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-2 control-label">機房座機電話</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="phone"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-2 control-label">機房負責人姓名</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="username"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-2 control-label">機房負責人郵箱</label>
                <div class="col-sm-6"><input type="email" class="form-control" name="username_email"></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">機房負責人手機號</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="username_phone"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-2">
                    <button class="btn btn-white" type="submit">取消</button>
                    <button class="btn btn-primary" type="submit">儲存更改</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block load_js %}
    <script src="/static/js/plugins/validate/jquery.validate.js"></script>
    <script src="/static/js/plugins/validate/messages_zh.js"></script>
    <script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#submit_form").validate({
                rules: {
                    name: {
                        required: true
                    },
                    username: {
                        required: true
                    },
                    name_cn: {
                        required: true
                    },
                    address: {
                        required: true
                    },
                    username_email: {
                        required: true
                    },
                    username_phone: {
                        required: true
                    },
                    phone: {
                        required: true
                    }
                }, submitHandler: function () {
                    var str = $('#submit_form').serialize();
                    $.post('{% url 'idc_add' %}', str, function (res) {
                        if (res.status == 0) {
                            swal({
                                title: res.msg,
                                type: 'success',
                                confirmButtonText: "OK"
                            }, function () {
                                window.location.href = '{% url 'idc_list' %}';
                            });
                        } else {
                            swal({
                                title: res.msg,
                                type: 'error',
                                confirmButtonText: "知道了"
                            });
                        }
                    });
                }
            });
        });
    </script>
{% endblock %}

　　頁面顯示

　　頁面檢視heards可以看到表單提交的頁面資訊

　　補充：後端介紹json轉字典

　　修改前端在load_js內使用以下程式碼傳遞json資料

 <script>
        $(document).ready(function () {
            $("#submit_form").validate({
                rules: {
                    name: {
                        required: true
                    },
                    username: {
                        required: true
                    },
                    name_cn: {
                        required: true
                    },
                    address: {
                        required: true
                    },
                    username_email: {
                        required: true
                    },
                    username_phone: {
                        required: true
                    },
                    phone: {
                        required: true
                    }
                }, submitHandler: function () {
                    //建立物件
                    var formObject = {};
                    //收集表單元素  表單陣列
                    var formArray = $("#submit_form").serializeArray();
                    console.log(formArray)
                    //json物件
                    $.each(formArray, function (i, item) {
                        formObject[item.name] = item.value;
                    });
                    console.log(formObject)
                    //json字串
                    var formJson = JSON.stringify(formObject);
                    console.log(formJson)
                    $.post('{% url 'idc_add' %}', formJson, function (res) {
                        if (res.status == 0) {
                            swal({
                                title: res.msg,
                                type: 'success',
                                confirmButtonText: "OK"
                            }, function () {
                                window.location.href = '{% url 'idc_list' %}';
                            });
                        } else {
                            swal({
                                title: res.msg,
                                type: 'error',
                                confirmButtonText: "知道了"
                            });
                        }
                    });
                }
            });
        });
    </script>

　　修改settings.py註釋以下內容

　　修改檢視

class IdcAddView(TemplateView):
    template_name = 'idc_add.html'

    def post(self, request):
        # 接收到json字串
        data = request.body
        # 轉為json物件  字典
        data = json.loads(data)
        print(data)
        # 處理不需要資料 csrftoken
        data.pop('csrfmiddlewaretoken')
        print(data)
        res = {'status': 0, 'msg': '新增成功'}
        try:
            Idc.objects.create(**data)
        except Exception as e:
            print(e)
            res = {'status': 1, 'msg': '新增失敗'}
        return JsonResponse(res)

　　新增效果一樣

　　4，更新資產機房

　　①路由

　　②檢視

class IdcUpdateView(View):
    def get(self, request):
        id = request.GET.get('id')
        idc_obj = Idc.objects.get(id=id)
        return render(request, 'idc_update.html', {'idc_obj': idc_obj})
    def post(self, request):
        data = request.POST
        res = {'status': 0, 'msg': '修改成功'}
        try:
            idc = Idc.objects.get(id=request.POST.get('id'))
            idc.name = data.get('name')
            idc.name_cn = data.get('name_cn')
            idc.address = data.get('address')
            idc.phone = data.get('phone')
            idc.username = data.get('username')
            idc.username_email = data.get('username_email')
            idc.username_phone = data.get('username_phone')
            idc.save()
        except Exception as e:
            print(e)
            res = {'status': 1, 'msg': '修改失敗'}
        return JsonResponse(res)

　　③模板

{% extends 'base.html' %}

{% block load_css %}
    <link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
{% endblock %}

{% block mbx %}
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2>更新機房</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{% url 'index' %}">首頁</a>
                </li>
                <li>
                    <a href="">資產管理</a>
                </li>
                <li>
                    <a href="">更新機房</a>
                </li>
            </ol>
        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="ibox-content">
        <form id="submit_form" class="form-horizontal">
            {% csrf_token %}
            <div class="form-group"><label class="col-sm-2 control-label">機房簡稱</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="name" value="{{ idc_obj.name }}"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-2 control-label">機房名稱</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="name_cn" value="{{ idc_obj.name_cn }}"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-2 control-label">機房地址</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="address" value="{{ idc_obj.address }}"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-2 control-label">機房座機電話</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="phone" value="{{ idc_obj.phone }}"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-2 control-label">機房負責人姓名</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="username" value="{{ idc_obj.username }}"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group"><label class="col-sm-2 control-label">機房負責人郵箱</label>
                <div class="col-sm-6"><input type="email" class="form-control" name="username_email" value="{{ idc_obj.username_email }}"></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label">機房負責人手機號</label>
                <div class="col-sm-6"><input type="text" class="form-control" name="username_phone" value="{{ idc_obj.username_phone }}"></div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-2">
                    <input type="hidden" value="{{ idc_obj.id }}" name="id">
                    <button class="btn btn-white" type="submit">取消</button>
                    <button class="btn btn-primary" type="submit">儲存更改</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block load_js %}
    <script src="/static/js/plugins/validate/jquery.validate.js"></script>
    <script src="/static/js/plugins/validate/messages_zh.js"></script>
    <script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#submit_form").validate({
                rules: {
                    name: {
                        required: true
                    },
                    username: {
                        required: true
                    },
                    name_cn: {
                        required: true
                    },
                    address: {
                        required: true
                    },
                    username_email: {
                        required: true
                    },
                    username_phone: {
                        required: true
                    },
                    phone: {
                        required: true
                    }
                }, submitHandler: function () {
                    var str = $('#submit_form').serialize();
                    $.post('{% url 'idc_update' %}', str, function (res) {
                        if (res.status == 0) {
                            swal({
                                title: res.msg,
                                type: 'success',
                                confirmButtonText: "OK"
                            }, function () {
                                window.location.href = '{% url 'idc_list' %}';
                            });
                        } else {
                            swal({
                                title: res.msg,
                                type: 'error',
                                confirmButtonText: "知道了"
                            });
                        }
                    });
                }
            });
        });
    </script>
{% endblock %}

　　頁面顯示

　　5，刪除資產機房

　　①路由

　　②檢視

class IdcDeleteView(View):
    def post(self, request):
        res = {'status': 0, 'msg': '刪除成功'}
        idc_id = request.POST.get('id')
        print(idc_id)
        try:
            Idc.objects.get(id=idc_id).delete()
        except Idc.DoesNotExist:
            res = {'status': 1, 'msg': '機房不存在,刪除失敗'}
        except Exception:
            res = {'status': 1, 'msg': '未知錯誤,請聯絡管理員'}
        return JsonResponse(res)

　　刪除模板沒有單獨頁面

{% block load_js %}
     <script src="/static/js/plugins/validate/jquery.validate.js"></script>
    <script src="/static/js/plugins/validate/messages_zh.js"></script>
    <script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script>
        function idc_delete(id) {
            var data = {};
            data['id'] = id;
            data['csrfmiddlewaretoken'] = "{{ csrf_token }}";
            $.ajax({
                url: '{% url 'idc_delete' %}',
                type: 'post',
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        swal({
                            title: res.msg,
                            type: 'success',
                            confirmButtonText: "OK"
                        }, function () {
                            window.location.reload()
                        });
                    } else {
                        swal({
                            title: res.msg,
                            type: 'error',
                            confirmButtonText: "知道了"
                        });
                    }
                }
            })
        };
    </script>
{% endblock %}

　　頁面顯示