|
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 %} <!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 %} |
|