母版
- 语法
- 案例

在之前的两个小程序中，可以发现在写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 文件读写操作实例详解
Python提供了必要的函数和方法进行默认情况下的文件基本操作.你可以用file对象做大部分的文件操作一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前 ...
利用easyui的行编辑自动增加一行来进行增删有详细注解
jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点. easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 j ...
【oracle】截取字符串
select id,name,substr(dept,1,2) from test; 提取字段dept前两位 substr(string,start,length)
[RN] React Native 获取验证码按钮
React Native 获取验证码按钮效果如图: 实现方法: 一.获取验证码按钮组件封装 CountDownButton.js "use strict"; import ...
网络协议 12 - HTTP 协议
日常开发中,我们经常会碰到查询网络是否畅通以及域名对应 IP 地址等小需求,这时候用的最多的应该就是 ping 命令了. 那你知道 ping 命令是怎么工作的吗?今天,我们就来一起认识下 ping 命 ...
网络协议 5 - ICMP 与 Ping
日常开发中,我们经常会碰到查询网络是否畅通以及域名对应 IP 地址等小需求,这时候用的最多的应该就是 ping 命令了. 那你知道 ping 命令是怎么工作的吗?今天,我们就来一起认识下 ping 命 ...
java插入代码块
粘贴1: 当代码写到一定程度之后,就会发现很多代码都被重复地敲了N多遍,甚至毫不夸张地说:闭着眼睛都能敲出来.大量地敲这些重复地代码,除了锻炼敲键盘的速度,基本上没有其他益处,但是长期下来会浪费很多时 ...
nodejs内存溢出 FATAL ERROR: CALL_AND_RETRY_0 Allocation failed – process out of memory
spa项目整体迁移转为ssr后,改动之后部署一切还好,就是突然有一天访问人数太多,node进程很容易就挂了自动重启. 最后经过压力测试,考虑到是堆内存溢出的问题,就报错误:FATAL ERROR: C ...
深入理解 HTTP/1.x、HTTP/2 和 HTTPS
很多站长可能到现在都没有理解 HTTP/1.x.HTTP/2 和 HTTPS 之间的区别和关系吧?说实话,明月也是“一知半解”的水准而已,今天看到了这篇文章感觉总结还算是比较全面,特此分享出来给大家就 ...
LRU缓存简单实现
缓存接口定义 /** * 缓存接口 * * @author zhi * */ public interface ICache<K, V> { /** * 添加缓存数据 * * @param ...

Django--母版

母版

语法

案例

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

随机推荐

热门专题