母版
- 语法
- 案例

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

随机推荐

Palindrome Mouse(2019年牛客多校第六场C题+回文树+树状数组)
目录题目链接题意思路代码题目链接传送门题意问\(s\)串中所有本质不同的回文子串中有多少对回文子串满足\(a\)是\(b\)的子串. 思路参考代码:传送门本质不同的回文子串肯定是要 ...
java Atomic compareAndSet部分原理分析
以AtomicLong的compareAndSet方法举例.先说结论:如果CPU支持,则基于CPU指令(CMPXCHG8)实现:否则使用ObjectLocker锁实现. 分析过程如下: 该方法在jdk ...
[RN] React Native代码转换成微信小程序代码的转换引擎工具
React Native代码转换成微信小程序代码的转换引擎工具 https://github.com/areslabs/alita
About Her
突然想给黑寡妇写点儿东西......(也许很多都不是我写的,但是能表达我的心意) 1. 众人进量子领域前最后一句话是她笑着说"一分钟后见." 而最终没有回来的,只有她自己一个 2. ...
苹果 appstore 上架 ipv6 服务配置
前言好久之前的事了,苹果审核突然要求ipv6,一片哀嚎. 研究了好久找到了基于阿里云经典网络Windows Server的配置方法. https://bbs.aliyun.com/read/2849 ...
docker镜像编码注意事项
第一步:下面这些话如果你不知道我在说什么,只管粘贴复制然后按回车键等待执行完成就行,一步步来不要着急. 首先安装docker,ubuntu18.04安装docker很简单只需要一行命令 wget - ...
Ansible之playbook的使用
playbook介绍一. 为什么引入playbook 我们完成一个任务,例如安装部署一个httpd服务,我们需要多个模块(一个模块也可以称之为task)提供功能来完成.而playbook就是组织多个 ...
Golang微服务实践
背景在之前的文章<漫谈微服务>我已经简单的介绍过微服务,微服务特性是轻量级跨平台和跨语言的服务,也列举了比较了集中微服务通信的手段的利弊,本文将通过RPC通信的方式实现一个增删查Redi ...
HTML5微信长按图片不会弹出菜单的解决方法
HTML5微信长按图片不会弹出菜单的解决方法 <pre><div ontouchstart = "return false;"></div>&l ...
centos8 安装 docker
centos 安装docker 官方参考地址:https://docs.docker.com/install/linux/docker-ce/centos/ 里面包含包下载地址: https://d ...

Django--母版

母版

语法

案例

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

随机推荐

热门专题