【IMU_Ops】------V------ IMU自动化运维平台之CMDB（前端）

说明
本文中所有内容仅作为学习使用，请勿用于任何商业用途。
本文为原创，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接和本声明。

　　上一章节完成CMDB的资产新增和更新，本章节主要是完成IMU平台及CMDB的展示界面。

　#A 前端框架

　　我这边其实对前端不是很了解，只是看了很多论坛和博客之后觉得AdminLTE比较容易上手。所以IMU暂时先用AdminLTE来做前端展示，待后期有能力做前后端分离了再考虑用其他的框架。AdminLTE托管在GitHub上的，访问地址：https://github.com/ColorlibHQ/AdminLTE/releases 。AdminLTE是一个完全响应管理模板。基于Bootstrap3，jQuery 3.3.1 这两个框架框架，易定制模板。适合多种屏幕分辨率，从小型移动设备到大型台式机。内置了多个页面，包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。对于后台站点的模板渲染，有很大的作用。

　　我这边就用最新版本3.0.1好了，下载解压就不在赘述了。下面我们简单看下最新的AdminLTE的结构：

build：编译前的源文件目录（包含未编译的 CSS、JS 文件）
dist：编译后的静态资源目录（包含已编译的 CSS、JS 文件），同时还提供压缩版本（.min的文件）
pages：目录下是一些示例页面
plugins：目录存放依赖的插件
starter.html ：是 AdminLTE 建议用来作为起点的参考示例
index.html：是AdminLTE中比较完善的展示品，用于参考、借鉴。

　#B 创建模板

　　接下来就是创建模板的过程，首先我们需要在settings文件中声明要使用静态文件。可以在settings文件的末尾加上一下代码：　

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

　　这里考虑到工程今后的可扩展性，我在整个工程的目录中创建一个公共的目录命名为“static”，今后各个功能模块需要的静态文件都来这个目录下加载即可。这样也便于后期的升级和管理。

　　接下来新建static目录，并将AdminLTE解压出来的plugins和dist两个文件夹拷贝至static。然后在工程中再新建一个名为templates的目录，这里用来创建我们工程相关的模板。同时检查settings文件中关于模板的配置是否正确，这里我贴出配置好的templates相关代码：

 1 TEMPLATES = [
 2     {
 3         'BACKEND': 'django.template.backends.django.DjangoTemplates',
 4         'DIRS': [os.path.join(BASE_DIR, 'templates')],
 5         'APP_DIRS': True,
 6         'OPTIONS': {
 7             'context_processors': [
 8                 'django.template.context_processors.debug',
 9                 'django.template.context_processors.request',
10                 'django.contrib.auth.context_processors.auth',
11                 'django.contrib.messages.context_processors.messages',
12             ],
13         },
14     },
15 ]

templates

　　然后在templates目录中新建一个base.html，作为我们整个工程的基础模板。

【IMU_Ops】------V------ IMU自动化运维平台之CMDB（前端）

猜你喜欢