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

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

前言

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

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

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

教程项目地址: https://github.com/×××/husky/

教程文档地址: https://github.com/×××/husky/tree/master/doc

前端模板

• 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    ## 安装所有模块，如有增加模块，需要加到这里面

templates 增加 base模板文件。具体可以参考 https://github.com/×××/husky/tree/master/templates/base

• 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 %}               标题    {% 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 %}