前端框架AdminLTE
阿新 • • 發佈：2019-01-10
作為CMDB資產管理專案，必須有一個豐富、直觀、酷炫的前端頁面。
適合運維平臺的前端框架有很多，開源的也不少，這裡選用的是AdminLTE。
AdminLTE託管在GitHub上，可以通過下面的地址下載：
AdminLTE自帶JQuery和Bootstrap3框架，無需另外下載。
AdminLTE自帶多種配色面板，可根據需要實時調整。
AdminLTE是移動端自適應的，無需單獨考慮。
AdminLTE自帶大量外掛，比如表格、Charts等等，可根據需要載入。
但是AdminLTE的原始檔包內，缺少font-awesome-4.6.3和ionicons-2.0.1這兩個圖示外掛，它是通過CDN的形式載入的，如果網路不太好，載入可能比較困難或者緩慢，最好用本地靜態檔案的形式。教程在Github的包內附帶上了這兩個外掛，可以直接使用，當然你自己下載安裝也行。
一、建立base.html
AdminLTE原始檔包裡有個index.html頁面檔案，可以利用它修改出我們CMDB專案需要的基本框架。
在專案的根目錄cmdb下新建static目錄，在settings檔案中新增下面的配置：
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
為了以後擴充套件的方便，將AdminLTE原始檔包裡的bootstrap、dist和plugins三個資料夾，全部拷貝到 static目錄中，這樣做的話檔案會比較大，比較多，但可以防止出現引用檔案找不到、外掛缺失等情況的發生，等以後對AdminLTE非常熟悉了，可以對static中無用的檔案進行刪減。
在cmdb根目錄下的templates目錄下，新建base.html檔案，將AdminLTE原始檔包中的index.html中的內容拷貝過去。然後，根據我們專案的具體情況修改檔案引用、頁面框架、title、CSS、主體和script塊。nainaitea.com
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
< 這是一個適合當前CMDB的精簡版本。在Github中，還提供了一個全功能的版本base-backup.html，方便大家擴充套件修改。
二、建立路由、檢視
這裡設計了三個檢視和頁面，分別是：
- dashboard：儀表盤，圖形化的資料展示
- index：資產總表，表格的形式展示資產資訊
- detail：單個資產的詳細資訊頁面
將assets/urls.py修改成下面的樣子：
#!/usr/bin/env python # -*- coding:utf-8 -*- from django.conf.urls import url from assets import views app_name = 'assets' urlpatterns = [ url(r'^report/', views.report, name='report'), url(r'^dashboard/', views.dashboard, name='dashboard'), url(r'^index/', views.index, name='index'), url(r'^detail/(?P<asset_id>[0-9]+)/$', views.detail, name="detail"), url(r'^$', views.dashboard), ]
在assets/views.py中，增加下面三個檢視：
from django.shortcuts import get_object_or_404 def index(request): assets = models.Asset.objects.all() return render(request, 'assets/index.html', locals()) def dashboard(request): pass return render(request, 'assets/dashboard.html', locals()) def detail(request, asset_id): """ 以顯示伺服器型別資產詳細為例，安全裝置、儲存裝置、網路裝置等參照此例。 :param request: :param asset_id: :return: """ asset = get_object_or_404(models.Asset, id=asset_id) return render(request, 'assets/detail.html', locals())
注意需要提前from django.shortcuts import get_object_or_404匯入get_object_or_404()方法，這是一個非常常用的內建方法。
三、建立模版
1.dashboard.html
在assets目錄下建立templates/assets/dashboard.html檔案，寫入下面的程式碼：
{% extends 'base.html' %} {% load staticfiles %} {% block title %}儀表盤{% endblock %} {% block css %} <!-- Theme style --> <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}"> <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}"> {% endblock %} {% block content %} <!-- Content Header (Page header) --> <section class="content-header"> <h1> 儀表盤 <small>dashboard</small><