在之前的两个小程序中,可以发现在写html页面的时候有很多重复的代码

而在python中,为了避免写重复代码,我们通过函数、模块或者类来进行实现,所以在Django里面也有这样的功能,帮我们把html基本母版页面变成可继承的,相当于python中写了基类

母版

母版就是在我们写的项目中,html页面总是会有一部分是固定不变的,我们可以把这部分抽取出来,变成一个母版,然后在母版中通过占位符进行占位,子版在继承母版后就可以在占位符中进行添加内容

语法

  1. 母版
# layout.html

写三个占位符:
a. 内容占位符
{% block mycontent %} {% endblock %} b. css占位符
{% block mycss %} {% endblock %} c. js占位符
{% block myjs %} {% endblock %}
  1. 子版
继承母版页面:
{%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--母版的更多相关文章

  1. Django(母版和继承)

    day66 参考:http://www.cnblogs.com/liwenzhou/p/7931828.html#autoid-2-3-6 内容回顾     1. 模板系统(字符串替换)        ...

  2. django 母版与继承

    在子页面的页面最上方使用下面的语法来继承母版. {% extends 'layouts.html' %} 块: 通过在母版中使用{% block xxx %}来定义块.在子页面中通过定义母版中的blo ...

  3. django -- 母版继承

    csrf_token 在之前我们提交post请求的时候,都是在setting.py文件里注释掉了 'django.middleware.csrf.CsrfViewMiddleware' 这一行,这是因 ...

  4. Django:母版、继承、组件、自定义标签

    1.for循环应用 1.1for Variable Description forloop.counter 当前循环的索引值(从1开始) forloop.counter0 当前循环的索引值(从0开始) ...

  5. Python - Django - 母版和继承

    可以把多个页面相同的部分提取出来,放在一个母板里,这些页面只需要继承这个母板就好了 通常会在母板中定义页面专用的 CSS 块和 JS 块,方便子页面替换 定义块: {% block 名字 %} {% ...

  6. python - django (母版与组件)

    # 把多个页面通用的部分提取出来 放在一个母版中 # 其它的页面只需要继承 母版就可以 # 使用步骤:( 继承的语句要放在第一行 ) """ 1. 把公用的 HTML 部 ...

  7. [oldboy-django][1初始django]后台管理页面的布局 + djano母版(继承html)

    完善学员管理系统 - bootstrap fontawesome - 分页,路径导航,表格(class样式),消息图标(i标签),邮件图标(i标签) - 响应式导航 @media(min-width, ...

  8. django html母版

    08.12自我总结 django母版 一.母版写的格式 在需要导入的地方写 {% block 名字定义 %} {% endblock %} 二.导入模板 {% extends 'FUCK.html' ...

  9. Django 学习笔记

    day 1 : 一.web 框架本质: 1.http 建立在tcp 之上:一次互通后断开,无状态,短链接 请求头: b'GET / HTTP/1.1 Host: 127.0.0.1:8080 Conn ...

  10. python web框架 Django基本操作

    django 操作总结! django框架安装: cmd安装: pip3 install django pycharm安装: 在python变量下 搜索 django 安装 创建django项目: c ...

随机推荐

  1. Palindrome Mouse(2019年牛客多校第六场C题+回文树+树状数组)

    目录 题目链接 题意 思路 代码 题目链接 传送门 题意 问\(s\)串中所有本质不同的回文子串中有多少对回文子串满足\(a\)是\(b\)的子串. 思路 参考代码:传送门 本质不同的回文子串肯定是要 ...

  2. java Atomic compareAndSet部分原理分析

    以AtomicLong的compareAndSet方法举例.先说结论:如果CPU支持,则基于CPU指令(CMPXCHG8)实现:否则使用ObjectLocker锁实现. 分析过程如下: 该方法在jdk ...

  3. [RN] React Native代码转换成微信小程序代码的转换引擎工具

    React Native代码转换成微信小程序代码的转换引擎工具 https://github.com/areslabs/alita

  4. About Her

    突然想给黑寡妇写点儿东西......(也许很多都不是我写的,但是能表达我的心意) 1. 众人进量子领域前最后一句话是她笑着说"一分钟后见." 而最终没有回来的,只有她自己一个 2. ...

  5. 苹果 appstore 上架 ipv6 服务 配置

    前言 好久之前的事了,苹果审核突然要求ipv6,一片哀嚎. 研究了好久找到了基于阿里云经典网络Windows Server的配置方法. https://bbs.aliyun.com/read/2849 ...

  6. docker镜像编码注意事项

    第一步:下面这些话如果你不知道我在说什么,只管粘贴复制然后按回车键等待执行完成就行,一步步来不要着急. 首先安装docker,ubuntu18.04安装docker很简单只需要 一行命令 wget - ...

  7. Ansible之playbook的使用

    playbook介绍 一. 为什么引入playbook 我们完成一个任务,例如安装部署一个httpd服务,我们需要多个模块(一个模块也可以称之为task)提供功能来完成.而playbook就是组织多个 ...

  8. Golang微服务实践

    背景 在之前的文章<漫谈微服务>我已经简单的介绍过微服务,微服务特性是轻量级跨平台和跨语言的服务,也列举了比较了集中微服务通信的手段的利弊,本文将通过RPC通信的方式实现一个增删查Redi ...

  9. HTML5微信长按图片不会弹出菜单的解决方法

    HTML5微信长按图片不会弹出菜单的解决方法 <pre><div ontouchstart = "return false;"></div>&l ...

  10. centos8 安装 docker

    centos 安装docker  官方参考地址:https://docs.docker.com/install/linux/docker-ce/centos/ 里面包含包下载地址: https://d ...