项目

1，layout.html

有板块的替换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .menu .item:hover{
                background-color: black;
                color: white;
            }
        </style>
        {% block css %}
        {% endblock %}
    </head>
    <body>
     <div class="menu" style="position: absolute; top:40px; bottom: 0px; left: 0px; right: 200px; background: #eee;">   <div>用户名：{{username}} | <a href="/logout.html">注销</a></div>
        <div>
            <div class="menu">
                <a id="menu_class" href="/classes.html" class="item">班级管理</a>
                <a id="menu_student" href="/student.html" class="item">学生管理</a>
                <a id="menu_teacher" href="teacher.html" class="item">老师管理</a>
            </div>
           <div style="position: absolute; top: 40px; left: 200px; right: 0px; bottom: 0px;">
                {% block content    %}
                {% endblock %}
            </div>
            <script src=""></script>
            {% block js %}
            {% endblock %}
        </div>
    </body>
</html>

2，c'l'ass.html

{% block css %}
{% endblock %}


{% block content %}
<h1>班级了列表</h1>
{% endblock %}



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

{% endblock %}

View Code

3,teacher.html

{% block css %}
{% endblock %}


{% block content %}
<h1>老师列表</h1>
{% endblock %}



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

{% endblock %}

View Code

4，student.html

{% block css %}
{% endblock %}


{% block content %}
<h1>学生列表</h1>
{% endblock %}



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

{% endblock %}

View Code

5，弹出框

layout.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .menu .item:hover{
                background-color: black;
                color: white;
            }
            .modal{
                position: fixed;
                top:50%;
                left: 50%;
                 500px;
                height: 400px;
                margin-top: -250px;
                margin-left: -250px;
                z-index: 100;
                background-color: white;
            }
            .shade{
                position: fixed;
                top: 0px;
                left: 0px;
                bottom: 0px;
                right: 0px;
                background-color: black;
                opacity: 0.5;
                z-index: 99px;
            }
        </style>
        {% block css %}
        {% endblock %}
    </head>
    <body>
        <div style="background: black; height: 40px;">用户名：{{username}} | <a href="/logout.html">注销</a></div>
        <div>
            <div class="menu" style="position: absolute; top:40px; bottom: 0px; left: 0px; right: 200px; background: #eee;">
                <a id="menu_class" href="/classes.html" class="item">班级管理</a>
                <a id="menu_student" href="/student.html" class="item">学生管理</a>
                <a id="menu_teacher" href="teacher.html" class="item">老师管理</a>
            </div>
            <div style="position: absolute; top: 40px; left: 200px; right: 0px; bottom: 0px;">
                {% block content    %}
                {% endblock %}
            </div>
            <script src=""></script>
            {% block js %}
            {% endblock %}
        </div>
    </body>
</html>

View Code

class.html

{% block css %}
{% endblock %}


{% block content %}
<h1>班级了列表</h1>
<table border="1">
    <thead>
        <tr>
            <th>id</th>
        <th>名称</th>
        <th>操作</th>
        </tr>
        
    </thead>
    <tbody>
        {% for in class_list %}
        <tr>
            <td>{{class_list.id}}</td>
            <td>{{class_list.name}}</td>
            <td><a href="" id="id_remove">删除</a>|<a id="id_add">添加</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<div class="modal hide">
    <input type="text" placeholder="标题">
</div>
<div class="shade hide" ></div>
{% endblock %}



{% block js %}
    <script>
        $(function(){
            $('#menu_class').addClass('active');
            bindAddEvent();
        })
        function bindAddEvent(){
            $('#id_add').click(function(){
                $('.modal,.shade').removeClass('hide');
            });
        }
        function bindCancelEvent(){
            $('#id_remove').click(function(){
                $('.modal,.shade').addClass('hide');
            });
        }
    </script>

{% endblock %}

View Code

6，事件委托

当要动态的添加一个子元素，并且该元素要绑定事件，则必须要通过委托的形式绑定事件，否则无效。

$("已经存在的父元素").('事件名','要绑定事件的元素',处理函数)

$("ul").on('click','li',function (){

Pass

}

7，Ajax提交


class.html

{% block css %}
{% endblock %}


{% block content %}
<h1>班级了列表</h1>
<button type="submit" id="id_add">添加</button>
<table border="1">
    <thead>
        <tr>
            <th>id</th>
        <th>名称</th>
        <th>操作</th>
        </tr>
        
    </thead>
    <tbody>
        {% for in class_list %}
        <tr>
            <td>{{class_list.id}}</td>
            <td>{{class_list.name}}</td>
            <td><a href="" id="id_remove">删除</a>|<a >添加</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<div class="modal hide">
    <form>
        <input type="text" name="caption" placeholder="标题">
        <input hidefocus="id_modal_cancel" type="button" value="取消"/>
        <input type="submit" value="submit确定" />
        <input type="button" id="modal_ajax_submit" value="ajax确定" />
    </form>
    <input type="text" placeholder="标题">
</div>
<div class="shade hide" ></div>
{% endblock %}



{% block js %}
    <script>
        $(function(){
            $('#menu_class').addClass('active');
            bindAddEvent();
        })
        function bindAddEvent(){
            $('#id_add').click(function(){
                $('.modal,.shade').removeClass('hide');
            });
        }
        function bindCancelEvent(){
            $('#id_remove').click(function(){
                $('.modal,.shade').addClass('hide');
            });
        }
        
        function bindSubmitModal(){
            $('#modal_ajax_submit').click(function(){
                var value=$('.modal input[name="caption"]').val();
                $.ajax({
                    type:"POST",
                    url:"/class.html",
                    data:{caption:value},
                    dataType:"JSON",
                    success:function(data){
                        //data = JSON.parse(data);
                        if(!data.status){
                            alert(data.error);
                        }
                        else{
                            //方法一
                            //location.reload();
                            //通过js添加一行代码
                            /*
                             <tr>
            <td>{{class_list.id}}</td>
            <td>{{class_list.name}}</td>
            <td><a href="" id="id_remove">删除</a>|<a >添加</a></td>
        </tr>
                             */
                            //方法三  通过添加对象
                            var tr=document.createElement('tr');
                            var td1=document.createElement('td');
                            var td2=document.createElement('td');
                            var td3=document.createElement('td');
                            td3.innerText='|';
                            var a1=document.createElement('a');
                            a1.innerHTML="编辑";
                            
                            var a2=document.createElement('a');
                            a2.className="td-delete";
                            a2.innerHTML="删除";
                            $(td3).prepend(a1);
                            $(td3).apppend(a1);
                            $(tr).prepend(td1);
                            $(tr).prepend(td2);
                            $(tr).prepend(td3);
                            $('table tbody').append(tr);
                            
                            
                        }
                    }
                    async:true
                });
            })
        }
    </script>

{% endblock %}

views.py

def handle_add_classes(request):
    message=""
    if request.method="GET"
        return render(request,'add_classes.html',{'msg':message})
    elif request.method="POST"
        caption=request.POST.get("caption",none)
        if caption:
            models.Classes.objects.create(caption=caption)
        else:
            message="标题不能为空"
            return render(requset,'add_classes.html',{'msg':message})
    return redirect('/class.html')
    else:
        return redirect('index.html')

8，分页类

补充：

1，绑定指定的外键

Model.ForeignKey('Provnce',to_filed='nid')

2,checkbox,与复选框，multiple获取内容时要用list

request.POST.getlist('key')

3.自定义属性的用法：

避免以后添加或删除元素后更改下标。

4，(除数，余数)=divmod(98,10)

5，级联绑定

class A_to_B(model.Model):
    bid=models.ForeignKey(Book)
    aid=models.ForeignKey(Author)
    
    class Meta:
        unique_together=(
            ('bid','aid'),
        )    //里面可添加多个属性组进行绑定

二，老师管理

1，多对多，前台处理

#cls是老师于课程的多对多属性

{% block css %}
{% endblock %}


{% block content %}
<table>
    <thead>
        
    </thead>
    <tbody>
        {% for obj in teacher_list %}
        <tr>
            <td>{{obj.id}}</td>
            <td>{{obj.name}}</td>
            <td>
                {% for c in obj.cls.all %}
                    <span class="tag" nid="{{c.id}}">{{c.caption}}</span>
                {%endfor%}
            </td>
        </tr>
    </tbody>
</table>

{% endblock %}


{% block css %}
{% endblock %}

2，前端的模板用后台的方法，会变成属性的调用

//对字典循环默认为键
<ul>
    {% for u in user_dict %}
        <li>{{u}}</li>
        {% endfor %}
    
</ul>
//对字典的键循环
<ul>
    {% for u in user_dict.keys %}
        <li>{{u}}</li>
        {% endfor %}
    
</ul>
//对字典的值循环
<ul>
    {% for u in user_dict.values %}
        <li>{{u}}</li>
        {% endfor %}
    
</ul>
//对字典的键,值对循环
<ul>
    {% for u,v in user_dict.items %}
        <li>{{u}}-{{v}}</li>
        {% endfor %}
    
</ul>

3，

老师类

class Teacher(models.Model):
    name=models.CharField(max_length=32)
    cls=models.ManyToManyField('classes')

teacher.html

{% block css %}
{% endblock %}


{% block content %}
<table>
    <thead>
        
    </thead>
    <tbody>
        {% for obj in teacher_list %}
        <tr>
            <td>{{obj.id}}</td>
            <td>{{obj.name}}</td>
            <td>
                {% for c in obj.cls.all %}
                    <span class="tag" nid="{{c.id}}">{{c.caption}}</span>
                {%endfor%}
            </td>
        </tr>
    </tbody>
</table>
<ul>
    {% for u in user_dict %}
        <li>{{u}}</li>
        {% endfor %}
    
</ul>
{% endblock %}


{% block css %}
{% endblock %}

View Code

处理teacher的方法

创建了一个新的数据结构，避免多次访问数据库。可以通过字典的方式，也可以通过创建一个类来实现。

<!--
    作者：2827363471@qq.com
    时间：2020-09-22
    描述：
    result={
        1:{
            'nid':1,
            'name':'文向波',
            'cls_list':{
                {'id':1,'caption':'全站一班'},
                {'id':2,'caption':'全站二班'},
            }
        }，
        2:{
            'nid':2,
            'name':'小梁',
            'cls_list':{
                {'id':5,'caption':'一班'},
                {'id':7,'caption':'二班'},
            }
    }
-->
def teacher(request):
    teacher_list=models.Teacher.objects.all()
    result={}
    for t in teacher_list:
    if t['id'] in results:
        if t['cls__id']:
            result[t['id']]['cls_list'].append({'id':t['cls__id'],'caption':t['cls__caption']})
    else:
        if t['cls__id']:
            temp=[
                {'id':t[cls__id],'caption':t['cls__caption']}
            ]
        else:
            temp=[]
            result[t['id']]={
                'nid':t['id'],
            'name':t['name'],
            'cls_list':temp
            }

4，添加老师

add_teacher.html

{% block css %}
{% endblock %}


{% block content %}
<h1>添加老师</h1>
<form action="/add_teacher.html" method="post">
    <p>
        老师姓名：<input name="name" type="text" />
        
    </p>
    <p>
        班级:
        <select name="cls" multiple="">
            {% for row in cls_list%}
                <option value="{{ row.id }}">{{ row.caption }}</option>
        </select>
    </p>
</form>
{% endblock %}


{% block css %}
{% endblock %}

View Code

处理add_teacher.html的对应方法：

def add_teacher(request):
    if request.method=='GET':
        cls_list=models.Classes.objects.all()
        return render(request,'add_teacher.html',{'cls_list':cls_list})
    elif request.method=='POST':
        name=request.POST.get('name')
        cls=request.POST.get('cls')
        #创建老师
        obj=models.Teacher.objects.create(name=name)
        #创建老师和班级的对应关系
        obj.cls.add(*cls)
        return redirect('/teacher.html')

5，编辑老师

{% block css %}
{% endblock %}

{% block css %}
{% endblock %}


{% block content %}
<h1>编辑老师</h1>
<form action="/edit_teacher-{{obj.id}}.html" method="post">
    <input type="hidden" id="nid" value="{{obj.id}}" />
    <p>
        老师姓名：<input name="name" type="text" value="{{obj.name}}" />
        
    </p>
    <p>
        班级:
        <select name="cls" multiple="">
            {% for row in cls_list %}
                {% if row.id in id_list %}
                    <option value="{{ row.id }}" selected="selected">{{ row.caption }}</option>
                {% else %}
                    <option value="{{ row.id }}" >{{ row.caption }}</option>
                {%endif%}
            {%endfor%}
        </select>
    </p>
</form>
{% endblock %}


{% block css %}
{% endblock %}

注意对应的urls.py

url(r'^edit_teacher-(d+).html$',views.edit_teacher)
//处理函数会多传一个参数

处理函数

def edit_teacher(request,nid):
    if request.method=='GET':
        obj=models.Teacher.objects.get(id=nid)
        obj_cls_list=obj.cls.all().values_list('id')
        #获取对应值的列表,这里是对应的老师已经选择的课的id列表
        #[(1,),(2,),(3,)]
        id_list=list(zip(*obj_cls_list))[0]
        #[1,2,3]
        cls_list=models.Classes.objects.all()
        return render(request,'edit_teacher.html',{'obj':obj,'cls_list':cls_list,'id_list':id_list})
    elif request.method=='POST'：
        #nid=request.POST.get('nid')
        name=request.POST.get('name')
        cls_li=request.POST.getlist('cls')
        obj=models.Teacher.objects.get(id=nid)
        obj.name=name
        obj.save()
        obj.cls.set(cls_li)
        return redirect('/teacher.html')

升级版，可以移动。

edit_teacher.html

{% block css %}
{% endblock %}

{% block content %}
<h1>编辑老师</h1>
<form action="/edit_teacher-{{obj.id}}.html" method="post">
    <input type="hidden" id="nid" value="{{obj.id}}" />
    <p>
        老师姓名：<input name="name" type="text" value="{{obj.name}}" />
        
    </p>
    <p>
        已管理班级:
        <select id="sel" name="cls" multiple="">
            {% for row in obj_cls_list %}
                
                    <option value="{{ row.0 }}" >{{ row.1 }}</option>
                
            {%endfor%}
        </select>
        未管理班级：
        <select id="none" multiple="">
            {% for row in cls_list %}
                {% if row.id not in id_list %}
                    
                    <option value="{{ row.id }}" >{{ row.caption }}</option>
                {%endif%}
            {%endfor%}
        </select>
        <div>
            <a id="removeCls" > >> </a>
            <a id="addCls"><<</a>
        </div>
        <input id="submit_form" type="submit" value="提交">
    </p>
</form>
{% endblock %}


{% block js %}
    <script>
        $(function(){
            bindAddCls();
            bindRemoveCls();
            bindSubmitForm();
        })
        function bindRemoveCls(){
            $('#removeCls').click(function(){
                var options=$('#sel')[0].selectedOptions;
                while(options.length>0){
                    $(options[0]).appendTo('#none');
                }
            })
        }
        function bindAddCls(){
            $('#removeCls').click(function(){
                var options=$('#none')[0].selectedOptions;
                while(options.length>0){
                    $(options[0]).appendTo('#sel');
                }
            })
        }
        function bindSubmitForm(){
            $('#submit_form').click(function(){
                $('#sel').children().each(function(){
                    $(this).prop('selected',true);
                })
                
            })
        }
    </script>
{% endblock %}

处理文件

def edit_teacher(request,nid):
    if request.method=='GET':
        obj=models.Teacher.objects.get(id=nid)
        obj_cls_list=obj.cls.all().values_list('id','caption')
        #获取对应值的列表,这里是对应的老师已经选择的课的id列表
        #[(1,),(2,),(3,)]
        id_list=list(zip(*obj_cls_list))[0]
        #[1,2,3]
        #获取不包括已管理的班级
        #cls_list=models.Classes.objects.fliter(id__in=id_list)
        cls_list=models.Classess.objects.exclude(id__in=id_list)
        return render(request,'edit_teacher.html',{'obj':obj,
                                            'cls_list':cls_list,
                                            'id_list':id_list,
                                            'obj_cls_list':obj_cls_list
                                            })
    elif request.method=='POST'：
        #nid=request.POST.get('nid')
        name=request.POST.get('name')
        cls_li=request.POST.getlist('cls')
        obj=models.Teacher.objects.get(id=nid)
        obj.name=name
        obj.save()
        obj.cls.set(cls_li)
        return redirect('/teacher.html')