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 %}
原文地址：https://blog.51cto.com/hequan/2447143
时间： 2024-10-12 23:26:05