CMDB-前端框架AdminLTE（九）

作为CMDB资产管理项目，必须有一个丰富、直观、酷炫的前端页面。

适合运维平台的前端框架有很多，开源的也不少，这里选用的是AdminLTE。

mark

AdminLTE托管在GitHub上，可以通过下面的地址下载：

https://github.com/almasaeed2010/AdminLTE/releases

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文件中添加下面的配置：

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "mycmdb/static"),
]

为了以后扩展的方便，将AdminLTE源文件包里的 bootstrap、dist 和 plugins 三个文件夹，全部拷贝到 static 目录中，这样做的话文件会比较大，比较多，但可以防止出现引用文件找不到、插件缺失等情况的发生，等以后对AdminLTE非常熟悉了，可以对static中无用的文件进行删减。

在cmdb根目录下的templates目录下，新建base.html文件，将AdminLTE源文件包中的index.html中的内容拷贝过去。然后，根据我们项目的具体情况修改文件引用、页面框架、title、CSS、主体和script块。

base.html
https://github.com/zhangduanya/mycmdb/blob/master/templates/base.html

这是一个适合当前CMDB的精简版本。

二、创建路由、视图

这里设计了三个视图和页面，分别是：

  • dashboard：仪表盘，图形化的数据展示
  • index：资产总表，表格的形式展示资产信息
  • detail：单个资产的详细信息页面

将assets/urls.py修改成下面的样子： 

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 文件，写入下面的代码： 

dashboard.html
https://github.com/zhangduanya/mycmdb/blob/master/templates/assets/dashboard.html

2.index.html

在assets目录下创建 templates/assets/index.html 文件，写入下面的代码： 

index.html
https://github.com/zhangduanya/mycmdb/blob/master/templates/assets/index.html

3.detail.html

在assets目录下创建 templates/assets/detail.html 文件，写入下面的代码：

detail.html
https://github.com/zhangduanya/mycmdb/blob/master/templates/assets/detail.html

以上三个模板都很简单，就是下面的流程：

  • extends继承‘base.html’；
  • load staticfiles：载入静态文件；
  • block title：资产详细endblock，定制title;
  • block css：载入当前页面的专用CSS文件；
  • block script：载入当前页面的专用js文件；
  • 最后在block content：中，编写一个当前页面的面包屑导航；
  • 页面的主体内容在后面的章节进行充实。

四、访问页面

重启CMDB服务器，访问http://192.168.1.3:8000/assets/dashboard/，可以看到下面的页面。

mark