在之前的两个小程序中，可以发现在写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;
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;
500px;
left: 500px;
top: 100px;
background-color: white;
display: none;
border-radius: 10px;
}
.model {
margin-top: 10px;
margin-left: 40px;
}
.model input {
height: 34px;
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;
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 %}