说明
本文中所有内容仅作为学习使用,请勿用于任何商业用途。
本文为原创,遵循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目录中新建一个base.html,作为我们整个工程的基础模板。