python前端模板_Django之入门 CMDB系统 (二) 前端模板

Django之入门 CMDB系统 (二) 前端模板

前言

作者: 何全，github地址: https://github.com/××× QQ交流群: ×××

通过此教程完成从零入门，能够独立编写一个简单的CMDB系统。

目前主流的方法开发方式，分为2种：mvc 和 mvvc方式。本教程为 mvc 方式，即 django负责渲染html。后面会推出 mvvc(前后端分离)的入门教程。

前端模板

inspinia 2.9 model (加上面的QQ群 群共享有)

bootstrap3 前端框架

项目创建 static文件，将前端模板里面的 css,font-awesome,fonts,js ,复制到static下面.(对于里面用不到的 js插件，可以根据自己的需求，删除掉，节省体积)

settings文件 增加

STATICFILES_DIRS = (

os.path.join(BASE_DIR, 'static'),

)

pip3 install -r requirements.txt ## 安装所有模块，如有增加模块，需要加到这里面

base

_css.html 加载css

_footer.html 页脚

_js.html 加载js

_nav.html 左槽导航栏

_navbar-static-top.html 顶部信息展示

base.html 基础模板

模板文件重点解析

base.html

{% load staticfiles %} 加载静态文件

{% load static %}

{% load bootstrap3 %}

{% block title %} {% endblock %} 标题

{% include "base/_css.html" %} 整体默认加载css

{% block header-css %} 网页单独加载css部分

{% endblock %}

{% include "base/_nav.html" %} 加载 导航条

{% include "base/_navbar-static-top.html" %} 加载顶部

{% block page-content %} 网页中间内容

{% endblock %}

{% include "base/_footer.html" %} 加载 页脚

{% include "base/_js.html" %}

{% block footer-js %} 网页单独加载js部分

{% endblock %}

index.html 例子

{% extends "base/base.html" %} 加载base.html

{% load static %}

{% block title %} 首页{% endblock %} 标题

{% block header-css %}

可以写本页面需要的css

{% endblock %}

{% block page-content %}

欢迎使用本项目！

{% endblock %}

{% block footer-js %}

可以写本页面需要的js

{% endblock %}