django建立管理系统之三----首页和页面设计

base是其它页面套用的模板:

1.base.html设计:

a.框架结构和hover效果设计:

b.至少3部分的 模板内容嵌套： css /js/ html content

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Information Manager System</title>
<style>
body {
margin:0;
}

{#-----------------------------------hover menu----------------------------------------模板注释格式-#} 
.menu .menu-item{
display:block;
padding: 5px 9px;
}
.menu .menu-item:hover{
background-color:black;
color:white;
}
.menu .menu-item.active{
background-color:black;
color:white;
}
</style>
{% block css %} {% endblock %}
</head>
<body>

{#-------------------------three block--------------------------------------------------------模板注释格式#}
<div style="height:48px;background-color:black;color:white; line-height:48px;">   
　　<div style="float:left; height:48px;margin-left:15px;">Information&nbsp;&nbsp;Manager&nbsp;&nbsp; System</div>
　　<div style="float:right; height:48px; margin-right:20px;">用户名: {{ username }}&nbsp; |&nbsp; <a > Logout</a></div>
</div>
<div class="menu" style="position:absolute; top:48px;left:0;bottom:0; width:200px; background-color:#eeeeee">
　　<a id="menu_classes" href="/classes.html" class="menu-item">班级管理</a>
　　<a id="menu_teacher" href="/teacher.html" class="menu-item">老师管理</a>
　　<a id="menu_student" href="/student.html" class="menu-item">学生管理</a>
</div>
<div style="position:absolute; top:48px;left:200px;bottom:0;right:0; ">
　　{% block content %} {% endblock %}
</div>
<script src="/static/jquery-2.1.4.min.js"></script>
{% block js %} {% endblock %}
</body>
</html>

2.其它页面套用:

 在index.html中套用模板:

{% extends "layout.html" %}

{% block css %}

{% endblock %}

{% block content %}
　　<h1>学籍管理系统</h1>
{% endblock %}

{% block js %}

{% endblock %}

student.html中套用并显示选中菜单:

{% extends "base.html" %}

{% block css %}

{% endblock %}

{% block content %}
<h1>学生管理</h1>
{% endblock %}

{% block js %}
<script>
$(function () {
　　$('#menu_student').addClass('active');
})
</script>
{% endblock %}

增加路由函数（handle_student, handle_teacher,handle_classes）和路由:

urlpatterns = [
path('admin/', admin.site.urls),
re_path('login.html', views.Login),
re_path('index.html', views.index),
re_path('classes.html', views.handle_classes),
re_path('teacher.html', views.handle_teacher),
re_path('student.html', views.handle_student),
]

def handle_classes(request):
　　current_user = request.session.get('username')
　　print('user:', current_user)
　　return render(request, 'classes.html', {'username': current_user})

 效果如下: