Django之入门CMDB系统(二)前端模板-创新互联

Django之入门 CMDB系统 (二) 前端模板


前言

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

网站设计制作过程拒绝使用模板建站;使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统;成都做网站、网站设计收费合理;免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了十余年的创新互联网站建设公司。

通过此教程完成从零入门,能够独立编写一个简单的CMDB系统。

目前主流的方法开发方式,分为2种:mvc 和 mvvc方式。本教程为 mvc 方式,即 django负责渲染html。后面会推出 mvvc(前后端分离)的入门教程。

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

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

Django之入门 CMDB系统  (二) 前端模板

前端模板

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





    
    

    {% block  title %} {% endblock %} 标题

    {% include  "base/_css.html" %}            整体默认加载css
    {% block header-css %}       网页单独加载css部分
    {% endblock %}




{% include "base/_nav.html" %} 加载 导航条
{% include "base/_navbar-static-top.html" %} 加载顶部 {% block page-content %} 网页中间内容 {% endblock %} {% include "base/_footer.html" %} 加载 页脚
{% include "base/_js.html" %} {% block footer-js %} 网页单独加载js部分 {% endblock %}
  • index.html 例子
{% extends "base/base.html" %}   加载base.html 
{% load static %}
{% block  title %} 首页{% endblock %}   标题

{% block header-css %}
可以写本页面需要的css
{% endblock %}

{% block page-content %}
    
欢迎使用本项目!
{% endblock %} {% block footer-js %} 可以写本页面需要的js {% endblock %}

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站栏目:Django之入门CMDB系统(二)前端模板-创新互联
URL标题:http://myzitong.com/article/isjos.html