CMDB4 總結CMDB，數據展現先後端不分離(xadmin第二種安裝方法)，先後端分離(vue-element-admin,iview-admin), 畫圖工具(highcharts,echarts

時間 2020-08-20

標籤 cmdb4 cmdb 總結數據展現後端不分離 xadmin 二種安裝方法分離 vue element admin iview 畫圖工具 highcharts echarts 简体版

原文原文鏈接

1.CMDB的架構是啥？css

agent方案html

將採集的腳本放置在每一臺待採集的服務器上，這個腳本本質上就是使用subprocess 模塊來執行linux的命令，最終獲取命令執行的結果，進行第一次分析。而後將分析獲得的結果發送給API端。API獲取以後，進行數據分析和比對，而後將數據入庫，最後django起一個webserver將數據從數據庫中獲取出來，進行展現管理。前端

ssh類方案vue

在中控機上安裝paramiko模塊，就能夠登陸到帶採集的服務器上進行採集。python

2.總共分紅幾部分？你linux

架構分紅三部分，須要三我的，採集端是一我的，API數據分析和入庫是一我的，前端是vue作的，也須要一個專業的前端總共作了半年的時間git

我負責數據的採集。github

敏捷開發：就是快速的開發一個功能，快速的上線，搶佔市場。接下來就開始對項目進行迭代。　　web

3.你負責的這一部分寫的時候，怎麼作的？遇到了啥問題？怎麼解決的？數據庫

參考了django的高級配置文件，此項目中集成用戶自定製的配置和高級的配置。代碼中大量的使用反射在採集信息的時候，使用了高內聚低耦合的原則，將每個服務器的信息作成了一個一個獨立的文件，方便後續的功能擴展和問題的查找

參考django的中間件，實現了插件的可插拔式的採集 django的中間件 (django的聲明週期)

遇到的問題：linux的命令不熟解決：查資料、請教運維 traceback模塊

數據展現

先後端不分離

後端代碼和前端代碼寫在一個項目中。

1.本身寫前端代碼

2.用現成的框架代碼好比：bootstrap，xadmin， layui等

使用 xadmin 來完成數據的展現

Django-xadmin的介紹

Django是python的重量級web框架,寫得少,作得多,很是適合後端開發,它很大的一個亮點是,自帶後臺管理模塊,但它自帶的後臺管理有點醜,而Xadmin是基於bootstrap開發的一套後臺管理框架,界面很是美觀,只需幾步就能夠替換自帶的Django_admin，能夠導出數據

具體的安裝步驟

1.xadmin在python2.x時代的安裝方法

在python2.x時代，安裝xadmin是經過以下命令

pip install xadmin

2.xadmin在python3.6.x時代的安裝方法

須要安裝以下的包

pip3 install django-import-export
pip3 install django-reversion
pip3 install django-formtools==2.1
pip3 install future
pip3 install httplib2
pip3 install six
pip3 install django-crispy-forms

2.1 下載xadmin

https://github.com/sshwsfc/xadmin

2.二、解壓縮，獲得xadmin文件夾，複製到項目的extra_apps,解壓縮，獲得xadmin文件夾, 以下圖所示：

2.三、在django中的根目錄下建立Python Package，命名爲extra_apps（若是不存在此文件夾則建立, 而後鼠標右鍵extra_app 隨後 mark as sources root）（Python Package是帶init文件的，跟普通Package不一樣）

建立完extra_apps，須要在settings中配置一下extra_apps。設置爲可搜索的路徑

import os
import sys

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps')) # 把extra_apps文件夾添加到搜索目錄中

2.四、把xadmin文件夾複製到extra_apps

2.五、xadmin的配置

配置到 INSTALLED_APPS

## 顯示中文
# Application definition
# LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'zh-hans'
 
# TIME_ZONE = 'UTC'
TIME_ZONE = 'Asia/Shanghai'

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'xadmin',
    'crispy_forms', # 注意crispy_forms之間是下劃線隔開，不是橫線
]

2.六、修改urls.py的admin

import xadmin
from django.conf.urls import url
from django.contrib import admin

urlpatterns = [
    # url('admin/', admin.site.urls),
    url(r'^xadmin/', xadmin.site.urls),
]

2.七、遷移文件

python3 manage.py makemigrations
python3 manage.py migrate

遷移完成後，咱們看到數據庫多了幾張表

2.八、pycharm建立superuser 用戶

python3 manage.py makemigrations
python3 manage.py migrate

至此完成。

若是報錯，請先把原先舊的app裏面admin.py裏面的註冊代碼去掉，再試試

運行一下項目，訪問

http://127.0.0.1:8000/xadmin/

xadmin的使用

1.須要在app中建立adminx.py文件

import xadmin
from repository import models
from xadmin import views

class UserProfileAdmin(object):    # 設定顯示錶的樣式，有搜索功能
    ### 顯示的字段名稱
    list_display = ['id','name' ,'email','phone','mobile']
    
    # 搜索時可輸入的字段內容
    search_fields = ['id', 'name', 'email', 'phone']
    
    # 點擊id可進入詳細界面進行編輯（默認的）
    list_display_links = ('id',)  
    
    ## 可編輯的列名
    list_editable = ['name' ,'email','phone','mobile']
    # list_filter = ['name' ,'email','phone','mobile']
    
    # 每頁顯示多少條
    list_per_page = 20 
    
    #根據id排序 
    ordering = ('id',)　
    　
    #設置只讀字段　
    readonly_fields = ('user_email',) 
    
    #顯示本條數據的全部信息
    show_detail_fields = ['asset_name'] 

xadmin.site.register(models.UserProfile,UserProfileAdmin)    # 此處註冊頁面，不可再次註冊該頁面

3.數據導出若是想要導出Excel數據，須要安裝xlwt。

默認狀況下，xadmin會提供Excel，CSV,XML，json四種格式的數據導出，能夠經過設置OptionClass的list_export屬性來指定使用哪些導出格式（四種格式分別用xls，csv，xml，json表示）或是將list_export設置爲None來禁用數據導出功能

list_export = ('xls', 'xml', 'json')
list_export_fields = ('id', 'name', 'title')

4.設置全局的配置

# 全局修改，固定寫法
class GlobalSettings(object):
    # 修改title
    site_title = 'xxx後臺管理界面'
    # 修改footer
    site_footer = 'xxx的公司'
    # 收起菜單
    menu_style = 'accordion'    # 手風琴樣式
    
    # 設置 models圖標
    # https://v3.bootcss.com/components/
    # http://www.yeahzan.com/fa/facss.html
    global_search_models = [models.Disk, models.Server]
    global_models_icon = {
        # Server: "glyphicon glyphicon-tree-conifer", Pool: "fa fa-cloud"
        models.Server: "fa fa-linux", models.Disk: "fa fa-cloud"    # 修改左側Server表左側圖標爲企鵝
    }

    
# 將title和footer信息進行註冊
xadmin.site.register(views.CommAdminView,GlobalSettings)

5.圖表顯示

data_charts = {
        "host_service_type_counts": {
            'title': '部門機器使用狀況',
            'x-field': "business_unit",
            'y-field': ("business_unit"),
            'option': {
                "series": {"bars": {"align": "center", "barWidth": 0.8, "show": True}},
                "xaxis": {"aggregate": "count", "mode": "categories"}
            },
        },
        "host_idc_counts": {
            'title': '機房統計',
            'x-field': "idc",
            'y-field': ("idc",),
            'option': {
                "series": {"bars": {"align": "center", "barWidth": 0.3, "show": True}},
                "xaxis": {"aggregate": "count", "mode": "categories"}
            }
        }
    }

6.註冊模型與對應的管理類

xadmin.site.register(models.Disk, DiskAdmin)
xadmin.site.register(models.Server, ServerAdmin)
xadmin.site.register(models.IDC, IDCAdmin)
xadmin.site.register(models.UserProfile, UserProfileAdmin)
xadmin.site.register(models.UserGroup, UserGroupAdmin)