1. adminlie框架介绍

AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具,它提供了一系列响应的、

可重复使用的组件,并内置了多个模板页面;同时自适应多种屏幕分辨率,兼容PC和移动端。通

过AdminLTE,我们可以快速的创建一个响应式的Html5网站。AdminLTE框架在网页架构与设计

上,有很大的辅助作用,尤其是前端架构设计师,用好AdminLTE 不但美观,而且可以免去写很大

CSS与JS的工作量。

2. 下载框架

获取框架的方式有很多,我这里是直接在官方网站下载的 这里使用的是AdminLTE-2.4.18版本。

3. 把adminlte框架引入Django

①. 放入静态文件

在把目录bower_components、dist、plugins放置到项目static文件

969dc73eff02a3e79eaa870c779a6262.png

②. 配置settings文件

STATIC_URL = '/static/'# HERE = os.path.dirname(os.path.abspath(__file__))# HERE = os.path.join(HERE, '../')STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static/'),)

③. 在teamplete文件夹建立base.html

{% load static %}{% block title %}Databases{% endblock %}{% block css %}{% endblock %}
DBADatabasesAdminToggle navigation MAIN NAVIGATION业务信息Management User Log
{% block content %}{% endblock %}
{% block script %}{% endblock %}

④. 优化index.html界面

{% extends 'base.html' %}{% load static %}{% block title %}业务信息{% endblock %}{% block css %}{% endblock %}{% block content %}

VLAN号汇总表Product Info

主页VLAN号整合

VLAN号整合表

序号VLAN号单位{% for vlan in vlan_info %}{{ forloop.counter }}{{ vlan.vlanId }}{{ vlan.department }}{% endfor %}
{% endblock %}{% block script %}{% endblock %}{#{% block content %}#}{##}{# #}{# #}{# #}{# #}{# #}{# 序号#}{# VLAN号#}{# 单位#}{##}{# #}{# #}{# #}{# #}{# {% for vlan in vlan_info %}#}{# #}{# {{ forloop.counter }}#}{# {{ vlan.vlanId }}#}{# {{ vlan.department }}#}{# #}{# {% endfor %}#}{# #}{# #}{##}{#{% endblock %}#}
7fcda51a0a23745eecc79dd4b5046451.png

这样这个项目的基本功能就算大功告成了。剩下的就是优化adminlte导航栏框架之类的了。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐