Django之入門 CMDB系統(tǒng) (二) 前端模板
Django之入門 CMDB系統(tǒng) ?(二) 前端模板前言作者: 何全，github地址: https://github.com/××× ??QQ交流群: ×××
通過此教程完成從零入門，能夠獨(dú)立編寫一個(gè)簡單的CMDB系統(tǒng)。
目前主流的方法開發(fā)方式，分為2種：mvc 和 mvvc方式。本教程為 mvc 方式，即 django負(fù)責(zé)渲染html。后面會(huì)推出 mvvc(前后端分離)的入門教程。
教程項(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下面.（對于里面用不到的 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 ???頁腳_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 %} ?<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<title>{% block ?title %} {% endblock %}</title> 標(biāo)題 ???{% include ?"base/_css.html" %} ???????????整體默認(rèn)加載css ???{% block header-css %} ??????網(wǎng)頁單獨(dú)加載css部分 ???{% endblock %}</head><body><div id="wrapper"> ???{% include "base/_nav.html" %} ??加載 導(dǎo)航條 ???<div id="page-wrapper"> ???????{% include ?"base/_navbar-static-top.html" %} ???加載頂部 ???????{% block page-content %} ??網(wǎng)頁中間內(nèi)容 ????????{% endblock %} ???????{% include ?"base/_footer.html" %} ??加載 頁腳 ???</div></div></body>{% include ?"base/_js.html" %} ?{% block footer-js %} ??網(wǎng)頁單獨(dú)加載js部分{% endblock %}</html>index.html ?例子{% extends "base/base.html" %} ??加載base.html {% load static %}{% block ?title %} 首頁{% endblock %} ??標(biāo)題{% block header-css %}可以寫本頁面需要的css{% endblock %}{% block page-content %} ???<div class="wrapper wrapper-content">歡迎使用本項(xiàng)目！ ???</div>{% endblock %}{% block footer-js %}可以寫本頁面需要的js{% endblock %}??
了解更多相關(guān)內(nèi)容歡迎關(guān)注http://www.kd010.com/
