table of Contents

Master
- grammar
- Case

In the previous two little program, you can find a lot of duplicate code when writing html page

In python, in order to avoid writing duplicate code, we carried out by function, module or class implementation, so Django which also has such a feature, to help us master the basic html page become inheritable, equivalent to write python base class

Master

Master is written in our project, html page there will always be a part of is fixed, we can extract out of this part, to become a master, and then by the placeholder placeholder in the master version, sub-version can add content to placeholder in succession after the master

grammar

Master

# layout.html

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

{% endblock %}

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

{% endblock %}

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

{% endblock %}

Sub-version

继承母版页面：
{%extends 'layout.html'%}

{% block mycontent %}
    写自己的内容
{% endblock %}

Case

# 母版  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-- Master

Master

grammar

Case

Guess you like