Django之入門(mén) CMDB系統(tǒng) (二) 前端模板

前言

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

網(wǎng)站設(shè)計(jì)制作過(guò)程拒絕使用模板建站；使用PHP+MYSQL原生開(kāi)發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺(tái)管理系統(tǒng)；成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)收費(fèi)合理；免費(fèi)進(jìn)行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運(yùn)營(yíng)了十余年的創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司。

通過(guò)此教程完成從零入門(mén)，能夠獨(dú)立編寫(xiě)一個(gè)簡(jiǎn)單的CMDB系統(tǒng)。

目前主流的方法開(kāi)發(fā)方式，分為2種：mvc 和 mvvc方式。本教程為 mvc 方式，即 django負(fù)責(zé)渲染html。后面會(huì)推出 mvvc(前后端分離)的入門(mén)教程。

教程項(xiàng)目地址: https://github.com/×××/husky/

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

前端模板

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

項(xiàng)目創(chuàng)建 static文件，將前端模板里面的 css,font-awesome,fonts,js ,復(fù)制到static下面.（對(duì)于里面用不到的 js插件，可以根據(jù)自己的需求，刪除掉，節(jié)省體積）

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 頁(yè)腳
  • _js.html 加載js
  • _nav.html 左槽導(dǎo)航欄
  • _navbar-static-top.html 頂部信息展示
  • base.html 基礎(chǔ)模板

模板文件重點(diǎn)解析

• base.html

{% load staticfiles %}  加載靜態(tài)文件
{% load static %}       
{% load bootstrap3 %}  





    
    

     標(biāo)題

    {% include  "base/_css.html" %}            整體默認(rèn)加載css
    {% block header-css %}       網(wǎng)頁(yè)單獨(dú)加載css部分
    {% endblock %}






    {% include "base/_nav.html" %}   加載 導(dǎo)航條

    

        {% include  "base/_navbar-static-top.html" %}    加載頂部

        {% block page-content %}   網(wǎng)頁(yè)中間內(nèi)容 

        {% endblock %}
        {% include  "base/_footer.html" %}   加載 頁(yè)腳

    




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

{% block footer-js %}   網(wǎng)頁(yè)單獨(dú)加載js部分
{% endblock %}

• index.html 例子

{% extends "base/base.html" %}   加載base.html 
{% load static %}
{% block  title %} 首頁(yè){% endblock %}   標(biāo)題

{% block header-css %}
可以寫(xiě)本頁(yè)面需要的css
{% endblock %}

{% block page-content %}
    


歡迎使用本項(xiàng)目！

    

{% endblock %}

{% block footer-js %}
可以寫(xiě)本頁(yè)面需要的js
{% endblock %}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。