Django之入門 CMDB系統 (二) 前端模板
前言
作者: 何全，github地址: https://github.com/××× QQ交流羣: ×××
通過此教程完成從零入門，能夠獨立編寫一個簡單的CMDB系統。
目前主流的方法開發方式，分爲2種：mvc 和 mvvc方式。本教程爲 mvc 方式，即 django負責渲染html。後面會推出 mvvc(前後端分離)的入門教程。
教程項目地址: https://github.com/×××/husky/
前端模板
- 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 %}
<!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 %}