母版
- 语法
- 案例

在之前的两个小程序中，可以发现在写html页面的时候有很多重复的代码

而在python中，为了避免写重复代码，我们通过函数、模块或者类来进行实现，所以在Django里面也有这样的功能，帮我们把html基本母版页面变成可继承的，相当于python中写了基类

母版

母版就是在我们写的项目中，html页面总是会有一部分是固定不变的，我们可以把这部分抽取出来，变成一个母版，然后在母版中通过占位符进行占位，子版在继承母版后就可以在占位符中进行添加内容

语法

母版

# layout.html

写三个占位符：

a. 内容占位符

{% block mycontent %}

{% endblock %}

b. css占位符

{% block mycss %}

{% endblock %}

c. js占位符

{% block myjs %}

{% endblock %}

子版

继承母版页面：

{%extends 'layout.html'%}

{% block mycontent %}

	写自己的内容

{% endblock %}

案例

# 母版  layout.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>学生管理系统</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .body {

            position: fixed;

            top: 0;

            right: 0;

            left: 0;

            bottom: 0;

            background: url("/static/img/5b73957e18ee0.jpg") no-repeat -20px -100px;

            background-size: 1300px;

        }

        .head {

            margin-top: 20px;

            margin-left: 20px;

        }

        .title {

            color: floralwhite;

            font-size: 40px;

            font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;

        }

        .body-nav {

            position: absolute;

            width: 250px;

            height: 600px;

            background-color: black;

            opacity: 0.6;

            text-align: center;

        }

        .main {

            position: absolute;

            left: 250px;

            right: 0;

            height: 600px;

            background-color: lightgrey;

            opacity: 0.8;

            padding: 20px;

        }

        li a {

            color: white;

        }

    </style>

    <style>

        .shadow {

            position: fixed;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.4;

            display: none;

        }

        .add_model, .update_model {

            position: fixed;

            height: 300px;

            width: 500px;

            left: 500px;

            top: 100px;

            background-color: white;

            display: none;

            border-radius: 10px;

            }

        .model {

            margin-top: 10px;

            margin-left: 40px;

        }

        .model input {

            height: 34px;

            width: 203px;

            padding: 6px 12px;

            border: 1px solid #ccc;

            border-radius: 4px;

            background-color: #fff;

        }

    </style>

    {% block mycss %}

    {% endblock %}

</head>

<body>

<div class="body">

    <div class="head">

        <h1 class="title">学生管理系统</h1>

    </div>

    <div class="body-nav">

        <ul class="nav nav-pills nav-stacked">

            <li style="margin-top: 30px;"><a href="/classes/">班级管理</a></li>

            <li><a href="/students/">学生管理</a></li>

            <li><a href="/teachers/">老师管理</a></li>

        </ul>

    </div>

    <div class="main">

        {% block mycontent %}

        {% endblock %}

    </div>

</div>

{#CDN导入jQuery#}

<script src="/static/js/jquery-1.12.4.min.js"></script>

{% block myjs %}

{% endblock %}

</body>

</html>

# 以clsses页面为例

# 继承母版

{% extends 'layout.html' %}

# 添加classes.html 独有的css内容

{% block mycss %}

    <style>

        select {

            height: 34px;

            width: 203px;

            padding: 6px 12px;

            border: 1px solid #ccc;

            border-radius: 4px;

            background-color: #fff;

        }

    </style>

{% endblock %}

# 添加classes.html 内容

{% block mycontent %}

    <h3>学生表</h3>

    <table class="table table-hover table-bordered">

        <tbody>

        <tr>

            <th>ID</th>

            <th>姓名</th>

            <th>年龄</th>

            <th>班级</th>

            <th>更新</th>

            <th>删除</th>

        </tr>

        {% for stu in students %}

            <tr>

                <td>{{ stu.sid }}</td>

                <td>{{ stu.name }}</td>

                <td>{{ stu.age }}</td>

                <td clsid="{{ stu.cid }}">{{ stu.cname }}</td>

                <td>

                    <button class="btn btn-info"><a href="/update_student/?id={{ stu.sid }}"

                                                    style="color: white;text-decoration: none;">更新</a></button>

                    <button class="ajax_update btn btn-primary">ajax更新</button>

                </td>

                <td>

                    <button class="btn btn-danger"><a href="/del_student/?id={{ stu.sid }}" class="delete"

                                                      style="color: white;text-decoration: none;">删除</a></button>

                    {#                <button class="ajax_delete">ajax删除</button>#}

                </td>

            </tr>

        {% endfor %}

        </tbody>

    </table>

    <br><br>

    <button class="btn btn-info"><a href="/add_student/" style="color: white;text-decoration: none;">添加学生</a></button>

    <button id="ajax_add" class="btn btn-primary">ajax添加学生</button>

    {# 遮罩层 #}

    <div class="shadow"></div>

    {# 弹出框层 #}

    {# 增加学生 #}

    <div class="add_model">

        {#    <input type="hidden" name="class_id">#}

        <div>

            <h4 style="text-align: center; margin-top: 20px;">增加学生</h4>

            <hr>

        </div>

        <div class="model" style="margin-left: 120px">

            名字：<input type="text" name="name" id="add_student"><br>

            年龄：<input type="text" name="age" id="add_age"><br>

            <div style="margin-top: 2px;margin-bottom: 2px">

                班级：<select name="add_cid" id="add_cid">

                {% for class in classes %}

                    <option value="{{ class.id }}">{{ class.cname }}</option>

                {% endfor %}

            </select></div>

            <span id="add_error" style="color:red; font-size: 12px; margin-bottom: 10px;"></span><br>

            <button id="add" class="btn btn-danger" style="margin-left: 48px;">添加</button>

            <button class="add_cancel btn btn-primary" style="margin-left: 40px;">取消</button>

        </div>

    </div>

    {# 更新学生 #}

    <div class="update_model">

        <div>

            <h4 style="text-align: center; margin-top: 20px;">更新学生</h4>

            <hr>

        </div>

        <div class="model" style="margin-left: 120px">

            <input type="hidden" name="sid" id="up_sid">

            姓名：<input type="text" name="name" id="up_name"><br>

            年龄：<input type="text" name="age" id="up_age">

            <div style="margin-top: 2px;margin-bottom: 2px">

                班级：<select name="up_cid" id="up_cid">

                {% for class in classes %}

                    <option value="{{ class.id }}">{{ class.cname }}</option>

                {% endfor %}

            </select>

            </div>

            <span id="up_error" style="color:red; font-size: 12px; margin-bottom: 10px;"></span><br>

            <button id="update" class="btn btn-danger" style="margin-left: 48px;">更新</button>

            <button class="up_cancel btn btn-primary" style="margin-left: 48px;">取消</button>

        </div>

    </div>

{% endblock %}

# 添加classes.html 独有的js内容

{% block myjs %}

    {# 删除学生 #}

    <script>

        $('.delete').click(function () {

            res = window.confirm('是否删除学生');

            return res;

        });

    </script>

    {# 增加学生 #}

    <script>

        $('#ajax_add').click(function () {

            $('.shadow, .add_model').css('display', 'block');

        });

        $('.add_cancel').click(function () {

            $('.shadow, .add_model').hide();

            window.location.href = '/students/'

        });

        $('#add').click(function () {

            var name = $('#add_student').val();

            var age = $('#add_age').val();

            var cid = $('#add_cid').val();

            $.ajax({

                type: 'POST',

                url: '/ajax_add_student/',

                data: {'name': name, 'age': age, 'cid': cid},

                success: function (data) {

                    var res = JSON.parse(data);

                    if (res['code'] == 10000) {

                        alert(res['msg']);

                        window.location.href = '/students/';

                    } else {

                        $('#add_error').text(res['msg']);

                    }

                }

            })

        });

    </script>

    {# 更新学生 #}

    <script>

        $('.ajax_update').click(function () {

            $('.shadow, .update_model').show();

            var info = $(this).parent().prevAll();

            var age = info[1].innerText;

            var name = info[2].innerText;

            var id = info[3].innerText;

            var cid = $(info[0]).attr('clsid');

            $('#up_age').val(age);

            $('#up_name').val(name);

            $('#up_sid').val(id);

            $('#up_cid').val(cid);

        });

        $('.up_cancel').click(function () {

            $('.shadow, .update_model').hide();

            window.location.href = '/students/';

        });

        $('#update').click(function () {

            var name = $('#up_name').val();

            var age = $('#up_age').val();

            var id = $('#up_sid').val();

            var cid = $('#up_cid').val();

            $.ajax({

                type: 'POST',

                url: '/ajax_update_student/',

                data: {'id': id, 'name': name, 'age': age, 'cid': cid},

                success: function (data) {

                    var res = JSON.parse(data);

                    if (res['code'] == 10000) {

                        alert(res['msg']);

                        window.location.href = '/students/';

                    } else {

                        $('#up_error').text(res['msg']);

                    }

                }

            })

        });

    </script>

{% endblock %}

Django--母版的更多相关文章

Django(母版和继承)
day66 参考:http://www.cnblogs.com/liwenzhou/p/7931828.html#autoid-2-3-6 内容回顾 1. 模板系统(字符串替换) ...
django 母版与继承
在子页面的页面最上方使用下面的语法来继承母版. {% extends 'layouts.html' %} 块: 通过在母版中使用{% block xxx %}来定义块.在子页面中通过定义母版中的blo ...
django -- 母版继承
csrf_token 在之前我们提交post请求的时候,都是在setting.py文件里注释掉了 'django.middleware.csrf.CsrfViewMiddleware' 这一行,这是因 ...
Django:母版、继承、组件、自定义标签
1.for循环应用 1.1for Variable Description forloop.counter 当前循环的索引值(从1开始) forloop.counter0 当前循环的索引值(从0开始) ...
Python - Django - 母版和继承
可以把多个页面相同的部分提取出来,放在一个母板里,这些页面只需要继承这个母板就好了通常会在母板中定义页面专用的 CSS 块和 JS 块,方便子页面替换定义块: {% block 名字 %} {% ...
python - django (母版与组件)
# 把多个页面通用的部分提取出来放在一个母版中 # 其它的页面只需要继承母版就可以 # 使用步骤:( 继承的语句要放在第一行 ) """ 1. 把公用的 HTML 部 ...
[oldboy-django][1初始django]后台管理页面的布局 + djano母版(继承html)
完善学员管理系统 - bootstrap fontawesome - 分页,路径导航,表格(class样式),消息图标(i标签),邮件图标(i标签) - 响应式导航 @media(min-width, ...
django html母版
08.12自我总结 django母版一.母版写的格式在需要导入的地方写 {% block 名字定义 %} {% endblock %} 二.导入模板 {% extends 'FUCK.html' ...
Django 学习笔记
day 1 : 一.web 框架本质: 1.http 建立在tcp 之上:一次互通后断开,无状态,短链接请求头: b'GET / HTTP/1.1 Host: 127.0.0.1:8080 Conn ...
python web框架 Django基本操作
django 操作总结! django框架安装: cmd安装: pip3 install django pycharm安装: 在python变量下搜索 django 安装创建django项目: c ...

随机推荐

python参数传递
1.形式参数:在定义函数时,函数名后面括号中的参数为“形式参数”,也称形参 2.实际参数:在调用一个函数时,函数名后面括号种的参数为“实际参数”,也就是将函数的调用者提供给函数的参数称为实际参数,也称 ...
python scapy中sniffer的用法以及过滤器
Sniff方法定义: sniff(filter="",iface="any", prn=function, count=N) 1.filter的规则使用 Ber ...
java.lang.IllegalArgumentException: Invalid character found in the request target. The valid charact
线上环境中部署的 Tomcat 项目,出现部分页面无法打开的情况,但本地环境是好的.经过排查发现,本地 Tomcat版本为 7.0.77,而线上版本为 7.0.88.报错的具体描述为java.lang ...
DFS_BFS（深度优先搜索和广度优先搜索）
package com.rao.graph; import java.util.LinkedList; /** * @author Srao * @className BFS_DFS * @date ...
Spring Cloud微服务安全实战_3-4_API安全机制之认证
认证:登录和认证是两个概念,比如你两周.一个月,可能只登录了一次,但认证却是每次访问都要经过的步骤. 对于图中的认证不成功,也要继续处理,这个我觉得得看业务,比如管理系统,不登录就不让你访问,但对 ...
BZOJ 4826: [Hnoi2017]影魔单调栈+可持久化线段树
Description 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄.每一个 ...
Pandas | 15 窗口函数
为了处理数字数据,Pandas提供了几个变体,如滚动,展开和指数移动窗口统计的权重. 其中包括总和,均值,中位数,方差,协方差,相关性等.本章讨论的是在DataFrame对象上应用这些方法. .rol ...
Linux系统中python默认版本为python2.7，修改为python3 项目上传码云
# 查询系统本系统中安装的python版本 ls -l /usr/bin/python* 1.在虚拟机上新建虚拟环境 # 系统中python默认版本为python2.,可以将其修改为python3 # ...
token的验证过程
1.用户向服务器发送用户名和密码. 2.服务端收到请求,验证用户名和密码. 3.验证成功后,服务端会签发一个token,并将这个token发送到客户端. 4.客户端收到token后将token存储起来 ...
flex布局整理以及demo
flex: 概念: flex容器: display:flex flex项: 轴:水平的主轴.垂直的交叉轴容器的属性: 1. flex-direction(决定主轴的方向.即项目的排列方向) 1.1 ...

Django--母版

母版

语法

案例

Django--母版的更多相关文章

随机推荐

热门专题