母版
- 语法
- 案例

在之前的两个小程序中，可以发现在写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 ...

随机推荐

中国网络安全行业分类及全景图2019H1
中国网络安全行业分类及全景图2019H1 概述中国网络安全行业分类及全景图: 一级分类包含了端点安全.网络安全.应用安全.数据安全.身份与访问管理和安全管理六个一级分类,这些一级分类分别对应了网 ...
任务型对话（二）—— DST（对话状态追踪）
1,概述关于任务型对话的简介看任务型对话(一)—— NLU(意识识别和槽值填充). 首先我们来看下对话状态和DST的定义. 对话状态:在$t$时刻,结合当前的对话历史和当前的用户输入来给出当前每个s ...
Rxjava学习笔记
1.使用Observable.range(int start, int count)创建一个发射特定整数序列的Observable,第一个参数为起始值,第二个为发送的个数,如果为0则不发送,负数则抛异 ...
Idea如何快速生成Junit测试类
测试是保证代码必不可少的环节,自己构建测试方法太慢,并且命名也不规范,idea中提供了,一键构建测试结构的功能... 2.步骤 1.在需要做测试的类的当前窗口,直接按快捷键:按ctrl+shift+t ...
rf增加产品的例子
Open Browser http://xxx.xxx.xxx.xxx:1000/portal/login/init.htm gcMaximize Browser Window sleep 2 #Ge ...
【笔试题】python文件操作
请说出下面代码结果及原因,很easy. 说明:test.txt文件不存在 with open('test.txt','w+') as f: f.write('34') f.seek(0) f.writ ...
CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);
CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]); [, maxWidth]的意思是,方括号代表可有可无,有fillText(tex ...
原始js---JavaScript注册用正则验证用户名密码手机号邮箱验证码
注册文件 reg.html <html><style> #btn{ background-color: red; color:white; width: 235px; } sp ...
使用css怎么让谷歌支持小于12px的文字比如10px
1.小于12px的字体,如果内容固定,可以将内容切除做图片,没有兼容问题. 2.-webkit-text-size-adjust:none;老版本谷歌,27版本之后无用 3.-webkit-trans ...
Windows快速批量删除大量文件的命令
命令分别如下: rmdir [drive:]path [/S] [/Q] del [drive:]path [/S] [/Q] 其中rmdir 与rd命令相同. /S 表示除目录本身外,还将删除指定目 ...

Django--母版

母版

语法

案例

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

随机推荐

热门专题