Django--母版

目录

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

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

母版

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

语法

  1. 母版
# layout.html

写三个占位符：
a. 内容占位符 
{% block mycontent %}

{% endblock %}

b. css占位符
{% block mycss %}

{% endblock %}

c. js占位符
{% block myjs %}

{% endblock %}
  1. 子版
继承母版页面：
{%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;
             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;
             500px;
            left: 500px;
            top: 100px;
            background-color: white;
            display: none;
            border-radius: 10px;
            }

        .model {
            margin-top: 10px;
            margin-left: 40px;
        }

        .model input {
            height: 34px;
             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;
             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 %}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Hades123/p/11366294.html