Django之入門 CMDB系統 (二) 前端模板

時間 2019-11-06

原文原文鏈接

Django之入門 CMDB系統 (二) 前端模板

前言

做者: 何全，github地址: https://github.com/××× QQ交流羣: ×××css

經過此教程完成從零入門，可以獨立編寫一個簡單的CMDB系統。html

目前主流的方法開發方式，分爲2種：mvc 和 mvvc方式。本教程爲 mvc 方式，即 django負責渲染html。後面會推出 mvvc(先後端分離)的入門教程。前端

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

教程文檔地址: https://github.com/×××/husky/tree/master/docgithub

前端模板

inspinia 2.9 model (加上面的QQ羣羣共享有)
bootstrap3 前端框架

項目建立 static文件，將前端模板裏面的 css,font-awesome,fonts,js ,複製到static下面.（對於裏面用不到的 js插件，能夠根據本身的需求，刪除掉，節省體積）django

settings文件增長bootstrap

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 %}  
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{% block  title %} {% endblock %}</title> 標題

    {% include  "base/_css.html" %}            總體默認加載css
    {% block header-css %}       網頁單獨加載css部分
    {% endblock %}

</head>

<body>
<div id="wrapper">

    {% include "base/_nav.html" %}   加載 導航條

    <div id="page-wrapper" class="gray-bg">
        {% include  "base/_navbar-static-top.html" %}    加載頂部

        {% block page-content %}   網頁中間內容 

        {% endblock %}
        {% include  "base/_footer.html" %}   加載 頁腳

    </div>
</div>

</body>

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

{% block footer-js %}   網頁單獨加載js部分
{% endblock %}

</html>

index.html 例子

{% extends "base/base.html" %}   加載base.html 
{% load static %}
{% block  title %} 首頁{% endblock %}   標題

{% block header-css %}
能夠寫本頁面須要的css
{% endblock %}

{% block page-content %}
    <div class="wrapper wrapper-content">

歡迎使用本項目！

    </div>

{% endblock %}

{% block footer-js %}
能夠寫本頁面須要的js
{% endblock %}