母版
- 语法
- 案例

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

随机推荐

为什么说JAVA程序员必须掌握SpringBoot?
原文链接:https://w.url.cn/s/AuDahfb SpringBoot 2.0 的推出又激起了一阵学习 SpringBoot 热,那么, SpringBoot 诞生的背景是什么?Spri ...
RabbitMQ消息幂等性问题
文章目录 1. 什么是幂等性?1.1 消息队列的幂等性1.2 模拟重试机制1.2.1 生产者代码1.2.2 消费者代码1.2.3 消费者 application.yml 配置2. 如何保证消息幂等性, ...
Unable to instantiate Action, xxxAction, defined for 'showBlogDetails'
(忘了截图错误信息...) 使用SSH框架配置applicationContext.xml与struts.xml之间的映射关系解决方案:保证applicationContext.xml中注册的bea ...
Vim编辑器点滴积累
Vim编辑器点滴积累 vim tab键空格数量控制参考链接临时:进入VIM,执行: :set tabstop=4 永久:编辑用户目录下.vimrc文件,添加:set tabstop=4 vim 安 ...
[RN] React Native 权限申请 react-native-permissions
React Native 权限申请 react-native-permissions 一.安装 npm i -S react-native-permissions link: react-native ...
selenium篇之滑动验证码
一.介绍现在出现了一种通过用户鼠标移动滑块来填补有缺口图片的验证码,我们叫做滑动验证码.它的原理很简单,首先生成一张图片,然后随机挖去一块,在页面展示被挖去部分的图片,再通过js获取用户滑动距离,以 ...
LOJ2778 [BOI2018]基因工程随机化
题面不想写了...留坑吧... 基本思想可参照随机化解决判同问题的总结代码: #include<bits/stdc++.h> using namespace std; #define ...
Linux性能优化实战学习笔记：第六讲1
一.环境准备 1.安装软件包终端1 机器配置:2 CPU,8GB 内存预先安装 docker.sysstat.perf等工具 [root@luoahong ~]# docker -v Docker ...
C语言实现聊天室软件
/* common.h */ /*服务器端口信息*/ #define PORTLINK ".charport" /*缓存限制*/ #define MAXNAMELEN 256 #d ...
第08组 Beta冲刺（2/5）
队名:955 组长博客:点这里! 作业博客:点这里! 组员情况组员1(组长):庄锡荣过去两天完成了哪些任务文字/口头描述 ?按照时间进度的安排进行相应的检查展示GitHub当日代码/文档签入记 ...

Django--母版

母版

语法

案例

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

随机推荐

热门专题