用户管理系统之老师

今天开始回顾一下老师页面的代码

先看下html的页面效果图

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 首先看下如何实现页面渲染老师列表，这里实现了两种方法

先看视图函数，老师页面对应的视图还是是teacher

 然后我们来看视图函数

下面是视图函数所有的代码

@outer
def teacher(request):

    if request.method == "GET":
        from urtil import page
        count = models.teacher.objects.all().count()

        current_page = int(request.GET.get("p",1))
        per_page_num = 10
        base_url = request.path
        teacher_dict = {}
        t_page = page.page_helper(count,current_page,per_page_num,base_url)
        # print(t_page.page_count())
        t = models.teacher.objects.filter(id__in=models.teacher.objects.all()[t_page.db_start()-1:t_page.db_end()-1]).values("id","teacher_name","teacher_class__id","teacher_class__classes_name")
        for i in t:

            if i["id"] in teacher_dict.keys():
                if i["teacher_class__id"] == None:
                    pass
                else:
                    teacher_dict[i["id"]]["t_class_info"].append(
                        {
                            i["teacher_class__id"]: i["teacher_class__classes_name"],
                        }
                    )
            else:
                if i["teacher_class__id"] != None:
                    teacher_dict[i["id"]] = {
                        "t_name":i["teacher_name"],
                        "t_class_info":[
                            {
                                i["teacher_class__id"]:i["teacher_class__classes_name"],
                            }
                        ]
                    }
                else:
                    teacher_dict[i["id"]] = {
                        "t_name": i["teacher_name"],
                        "t_class_info":[]
                    }

        page_str = t_page.page_list()
        teacher_list = models.teacher.objects.all()[t_page.db_start()-1:t_page.db_end()-1]
        return render(request,"teacher.html",locals())
    else:
        return HttpResponse("POST")

　　

 先看方法1是如何实现的

这里我们导入了我们自己写的page_helper的类，用来构建分页的效果

因为前端渲染，首先要拿到老师的id，老师的名称，老师所教的班级的id,老师所教的班级的名称，所有，我们先拿到所有的老师，然后通过page_helper的类进行分页，分页成功后，然后在通过values方法，拿到每个老师对应的班级的字典对象，然后把这个对象在前端渲染，我们先看下上面这个t打印出来是个什么东西

是一个QuerySet对象

 这个时候我们在前端然后这个对象就可以了，我们看下前端是如何渲染的

先把前端所有的代码贴出来，然后在一一分析

{% extends "base.html" %}
{% block css %}
    <style>
        .tag{
            border: 1px;
            background-color: pink;
            color: red;
            font-size: 15px;
            border-radius: 5px;
            cursor: pointer;
        }
        tbody span:hover{
            font-size: 20px;
        }
        table{
            display: inline-block;
        }
        .page_class a{
            color: red;
            font-size: larger;
            padding: 5px;
        }
        .shade{
            position: fixed;
            background-color: pink;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.8;
            z-index: 100;
        }
    .modal{
        position: fixed;
        background-color: red;
        color: black;
        left: 50%;
        top: 50%;
         200px;
        height: 150px;
        margin-left: -100px;
        margin-right: -75px;
        z-index: 101;
    }
    .hide{
        display: none;
    }
    </style>


{% endblock %}

{% block right %}
    <h1>老师管理</h1>
    <p><a href="/app1/add_teacher/">添加老师</a></p>
    <table border="1">
        <caption>老师列表方式1</caption>
        <thead>
            <tr>
                <th>老师id</th>
                <th>老师名称</th>
                <th>老师班级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for obj in teacher_list %}
                <tr>
                    <td>{{ obj.id }}</td>
                    <td>{{ obj.teacher_name }}</td>

                    <td>
                        {% for i in obj.teacher_class.all %}
                            <span class="tag">{{ i.classes_name }}</span><span class="tag">{{ i.id }}</span>
                        {% endfor %}
                    </td>
                    <td>
                        <a href="#">删除</a>|<a href="/app1/edit_teacher/?tid={{ obj.id }}">编辑1</a>|<a href="/app1/edit_teacher_new/?tid={{ obj.id }}">编辑2</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <div class="page_class">
        {{ page_str|safe }}
    </div>
    <table border="3">
        <caption>老师列表方式2</caption>
        <thead>
            <tr>
                <th>老师id</th>
                <th>老师名称</th>
                <th>老师班级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for k,v in teacher_dict.items %}
                <tr>
                    <td>{{ k }}</td>
                    <td>{{ v.t_name }}</td>

                    <td>
                        {% for c_info in v.t_class_info %}
                            {% for m,n in c_info.items %}
                                <span class="tag">{{ m}}</span><span class="tag">{{ n}}</span>
                            {% endfor %}
                        {% endfor %}
                    </td>
                    <td>
                        <a href="#">删除</a>|<a href="/app1/edit_teacher/">编辑1</a>|<a href="/app1/edit_teacher_new/">编辑2</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="page_class">
        {{ page_str|safe }}
    </div>
    <div class="hide shade" id="ajax_del_class_shade">
        hhhhhhhhhhh
    </div>
    <div class="hide modal" id="ajax_del_class_modal">
        是否删除班级<span class="del_class"></span>
        <input type="button" value="确定删除" class="ajax_del_teacher_class">
        <input type="button" value="取消" class="not_ajax_del_teacher_class">
    </div>
{% endblock %}


{% block jq %}
    <script src="/static/jq/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $("#menu_teacher").addClass("active");
            del_teacher_class();
            not_del_teacher_class();
        });
        function del_teacher_class() {
            $(".tag").bind("click",function () {
                $("#ajax_del_class_shade").removeClass("hide");
                $("#ajax_del_class_modal").removeClass("hide");
            })
        }
        function not_del_teacher_class() {
            $(".tag").bind("click",function () {
                $("#ajax_del_class_shade").addClass("hide");
                $("#ajax_del_class_modal").addClass("hide");
            })
        }

    </script>
{% endblock %}

　　

先看第一种前端是如何渲染的

            {% for obj in teacher_list %}
                <tr>
                    <td>{{ obj.id }}</td>
                    <td>{{ obj.teacher_name }}</td>

                    <td>
                        {% for i in obj.teacher_class.all %}
                            <span class="tag">{{ i.classes_name }}</span><span class="tag">{{ i.id }}</span>
                        {% endfor %}
                    </td>
                    <td>
                        <a href="#">删除</a>|<a href="/app1/edit_teacher/?tid={{ obj.id }}">编辑1</a>|<a href="/app1/edit_teacher_new/?tid={{ obj.id }}">编辑2</a>
                    </td>
                </tr>
            {% endfor %}

　　

我们看到一个老师对应的所有班级我们放在td中的不同的span标签中，同样我们对span标签做一个css处理

        .tag{
            border: 1px;
            background-color: pink;
            color: red;
            font-size: 15px;
            border-radius: 5px;
            cursor: pointer;
        }
        tbody span:hover{
            font-size: 20px;
        }

　　

同样也要显示分页，这里的分页，我们是通过管道付+safe来实现的

    <div class="page_class">
        {{ page_str|safe }}
    </div>

　　

 同样我也为这个page_class弄一个样式，这样好看一些

        .page_class a{
            color: red;
            font-size: larger;
            padding: 5px;
        }

　　

 在渲染的时候我们做了两层的循环

 首先后端给前端一个老师的对象，然后由前端通过模板语言去数据库中查询数据，这里有一个问题就是会频繁的去查询数据库，这个方法不够好

第一层是循环所有的老师，当拿到一个老师的对象，在通过obj.teacher_class.all拿到这个老师对应的所有班级的信息，然后把班级的id和名称渲染到html页面行

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

第二种方法，就是后端直接把所有的数据准备好，然后把这个数据返回给前端就可以了，我们需要先在后端准备数据

首先在后端通过value的方法把老师的信息，老师对应的班级的信息全部拿到，放在一个字典中

 我在后端循环处理上面的querySet对象，拿到我们想要的数据，我们的数据结构是这样的

teacher_id :{

　　t_name:teacher_name,

　　t_class_info:[

　　　　{t_class_Id:t_class_id}

]

}

首先是一个大的字典，id是为每个teacher的id，每个teacher的id对应的v值又是一个字典，这个字典的第一个k值是t_name，v值就是teacher_name，第二个k值为t_class_info，这个k值对应的v值是一个列表，而这个列表的每个元素是一个字典，这个字典的k值是t_class_id，v值是班级的id，

     for i in t:

            if i["id"] in teacher_dict.keys():
                if i["teacher_class__id"] == None:
                    pass
                else:
                    teacher_dict[i["id"]]["t_class_info"].append(
                        {
                            i["teacher_class__id"]: i["teacher_class__classes_name"],
                        }
                    )
            else:
                if i["teacher_class__id"] != None:
                    teacher_dict[i["id"]] = {
                        "t_name":i["teacher_name"],
                        "t_class_info":[
                            {
                                i["teacher_class__id"]:i["teacher_class__classes_name"],
                            }
                        ]
                    }
                else:
                    teacher_dict[i["id"]] = {
                        "t_name": i["teacher_name"],
                        "t_class_info":[]
                    }

　　

然后我们在前端通过渲染字典的方式渲染这个大的字典即可

 这样，我们在后端就通过一次数据库查询，拿到所有的数据，在通过组织数据结构，返回给前端，这样效率最高

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

下面我们看下添加老师是如何实现的

 

我们看url中这个url对应的视图函数

 我们在到视图函数查看add_teacher这个函数是如何实现的

@outer
def add_teacher(request):
    class_list = models.classes.objects.all()
    if request.method == "GET":
        return render(request,"add_teacher.html",locals())
    else:
        new_teacher_name = request.POST.get("new_add_teacher_name",None)
        print("--------------------------------")
        print(new_teacher_name)
        if not new_teacher_name:
            error = "名称不允许为空"
            return render(request,"add_teacher.html",locals())
        elif models.teacher.objects.filter(teacher_name=new_teacher_name).exists():
            error = "名称{new_name}已经存在，请输入新的名字".format(new_name=new_teacher_name)
            return render(request, "add_teacher.html", locals())
        else:
            new_class_list = request.POST.getlist("new_add_teacher_class",None)
            print(new_class_list)
            new_teacher = models.teacher.objects.create(
                teacher_name = new_teacher_name
            )
            new_teacher.teacher_class.add(
                *new_class_list
            )
            return redirect("/app1/teacher/")

　

首先如何是get请求，则需要把所有班级渲染到前端页面

    class_list = models.classes.objects.all()
    if request.method == "GET":
        return render(request,"add_teacher.html",locals())

　　

我们看下前端是如何渲染的

原来是一个form表单，里面有有一个input框，用来输入新的老师的名称，另外一个是一个select框，，这个select标签之前说的比较少，这里我在说一下

select的name属性，就是k值，

size是当前的框中显示几条数据

multiple是当前是多选的

　

 看下前端的效果

 在看后端是如何处理post请求的

这里需要注意，如果前端是select的方式向后端发送多选的信息，这里必须要通过request.POST.getlist（“k值”）去获取信息

        new_teacher_name = request.POST.get("new_add_teacher_name",None)
        print("--------------------------------")
        print(new_teacher_name)
        if not new_teacher_name:
            error = "名称不允许为空"
            return render(request,"add_teacher.html",locals())
        elif models.teacher.objects.filter(teacher_name=new_teacher_name).exists():
            error = "名称{new_name}已经存在，请输入新的名字".format(new_name=new_teacher_name)
            return render(request, "add_teacher.html", locals())
        else:
            new_class_list = request.POST.getlist("new_add_teacher_class",None)
            print(new_class_list)
            new_teacher = models.teacher.objects.create(
                teacher_name = new_teacher_name
            )
            new_teacher.teacher_class.add(
                *new_class_list
            )
            return redirect("/app1/teacher/")

　　

同样这里也做了一下判断，比如是否为空，是否存在，前端也是通过一个span标签来接受错误信息

如果判断都通过，则先使用create方法添加老师的对象

 然后拿到老师的对象，在使用add方法为这个老师添加班级对象

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

然后我们看下编辑1的是如何实现的，编辑1我们的效果是前端只有一个select框

先看下效果

 下面我们看下html的代码

是一个a标签，href指向一个新的url，且传递了一个参数t_id给后端

 我们到后端去看下url

在看视图函数

@outer
def edit_teacher(request):
    method = request.method.lower()
    if method == "get":
        t_name = models.teacher.objects.get(id=request.GET.get("tid")).teacher_name
        t_id = request.GET.get("tid")
        all_class_list = models.classes.objects.all()
        select_class_list = models.teacher.objects.get(id=request.GET.get("tid")).teacher_class.all()
        return render(request,"edit_teacher.html",locals())

    else:
        t_id = request.POST.get("t_id")
        new_teacher_name = request.POST.get("new_edit_teacher_name")
        new_class_list = request.POST.getlist("new_edit_class_list")
        new_teacher = models.teacher.objects.filter(id=t_id).update(
            teacher_name = new_teacher_name
        )
        models.teacher.objects.get(id=t_id).teacher_class.set(new_class_list)

        return redirect("/app1/teacher")

　　

先看下get方式的处理

先拿到老师的id，然后在拿到所有班级的列表，最后在拿到这个老师对应的所有的班级

然后把上面拿到信息发送给前端

    if method == "get":
        t_name = models.teacher.objects.get(id=request.GET.get("tid")).teacher_name
        t_id = request.GET.get("tid")
        all_class_list = models.classes.objects.all()
        select_class_list = models.teacher.objects.get(id=request.GET.get("tid")).teacher_class.all()
        return render(request,"edit_teacher.html",locals())

　　

我们在看前端是怎么处理的

    <h1>编辑老师1</h1>
    <form method="post" action="/app1/edit_teacher/">
        <input type="text" style="display: none" name="t_id" value="{{ t_id }}">
        <p>
            老师名称:<input type="text" placeholder="新的老师名称" name="new_edit_teacher_name" value="{{ t_name }}">
        </p>
        <p>
            <select multiple="multiple" size="10" name="new_edit_class_list">
                {% for i in all_class_list %}
                    {% if i in select_class_list %}
                        <option selected="selected" value="{{ i.id }}">{{ i.classes_name }}</option>
                    {% else %}
                        <option value="{{ i.id }}">{{ i.classes_name }}</option>
                    {% endif %}

                {% endfor %}
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
        </p>
    </form>

　　

也是一个form表单，先渲染出当前老师的名称，然后循环所有的班级，在循环所有的班级的时候嵌套循环老师的班级，如果所有的班级中的某个元素在老师的班级中的list中，则给这个元素加一个select=“selected”，标记为选中状态

我们在视图函数中post方式是怎么处理的

拿到新的名称，新的class_list，通过update方法先更新老师的名称，然后通过id获取老师的对象，然后通过set方法更新老师的班级信息，set方法就是多对多的更新的方法

        t_id = request.POST.get("t_id")
        new_teacher_name = request.POST.get("new_edit_teacher_name")
        new_class_list = request.POST.getlist("new_edit_class_list")
        new_teacher = models.teacher.objects.filter(id=t_id).update(
            teacher_name=new_teacher_name
        )
        models.teacher.objects.get(id=t_id).teacher_class.set(new_class_list)

        return redirect("/app1/teacher")

　　

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 下面看下第二种方法是如何实现的

 然后我们看下视图函数

@outer
def edit_teacher_new(request):
    method = request.method.lower()
    if method == "get":
        t_id = request.GET.get("tid")
        t_name = models.teacher.objects.get(id=t_id).teacher_name
        select_class_list = models.teacher.objects.get(id=t_id).teacher_class.all()

        not_select_class_list = models.classes.objects.exclude(id__in=select_class_list)

        return render(request,"edit_teacher_new.html",locals())
    else:
        t_id = request.POST.get("t_id")
        t_name = request.POST.get("t_name")
        new_class_list = request.POST.getlist("select_class_name",None)
        print(t_id,t_name,new_class_list)
        models.teacher.objects.filter(id=t_id).update(
            teacher_name = t_name
        )
        models.teacher.objects.get(id=t_id).teacher_class.set(
           new_class_list
        )
        return redirect("/app1/teacher/")

　　

先看下get方式是怎么处理的

exclude是取反的意思，拿到id不在当前老师班级的列表中的班级

看下前端是否如何渲染的

  <h1>编辑老师2</h1>
    <form method="post" action="/app1/edit_teacher_new/">
            <input class="hide" type="text" name="t_id" value="{{ t_id }}">
            <input type="text" name="t_name" value="{{ t_name }}">
            <div>
                <span>已经绑定的班级</span>
                <select multiple="multiple" size="10" name="select_class_name" id="select_left">
                    {% for i in select_class_list %}
                        <option value="{{ i.id }}">{{ i.classes_name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <input type="button" value="------->" id="del_many_class">
                <input type="button" value="<-------" id="add_many_class">
                <input type="button" value="========>" id="del_all_class">
                <input type="button" value="<========" id="add_all_class">
            </div>

            <div>
                <select multiple="multiple" size="10" name="not_select_class_name" id="not_select_right">
                    {% for i in not_select_class_list %}
                        <option value="{{ i.id }}">{{ i.classes_name }}</option>
                    {% endfor %}
                </select>
                <span>未绑定的班级</span>
            </div>
    <hr>
        <input type="submit" value="提交">|<a href="/app1/teacher/">返回</a>
    </form>

　　

看下具体的效果

写了2个select标签，第一个存放已经绑定的班级，第二个 存放为绑定的班级

只要我们可以实现左边的框移到到右边的框，右边的框可以移动到左边的框就可以了

重点看下4个按钮是如何实现的

第一个按钮，del_many_class实现从左边向右边移动一个或者多个班级。我们看下jquery的代码

主要是实现思路就是把左边的标签append到右边就可以了

第一步，通过dom的方式获取右边的select标签，这个就是我们将要往这个标签下面添加标签

第二步，通过dom的方式获取左边的select标签下面的所有标签

第三步，拿到左边标签的子标签的个数

第四步，执行for循环语句，判断左边的子标签如果select=true，则appendChild到右边，这个appendChild方法会向右边添加该标签，同时会删除左边的标签

第五步，这里为什么要执行一个i--语句呢，因为appendChild一个后，原来的列表就少一个标签，所有列表id要往前推一个

        function del_many_class_func() {
            $("#del_many_class").bind("click",function () {
                var father_ele = document.getElementById("not_select_right")
                var del_ele = document.getElementById("select_left").children
                var del_ele_length = del_ele.length
                for(var i=0;i<= del_ele_length;i++){
                    if(del_ele[i].selected==true){
                        del_ele[i].selected=false;
                        father_ele.appendChild(del_ele[i]);
                        i--
                    }
            }
            })
        }

　　

在看add_many_class的按钮

思路和上面的函数是一样的

        function add_many_class_func() {
            $("#add_many_class").bind("click",function () {
                var father_ele = document.getElementById("select_left")
                var del_ele = document.getElementById("not_select_right").children
                var del_ele_length = del_ele.length
                for(var i=0;i<=del_ele_length;i++){
                    if(del_ele[i].selected==true){
{#                        del_ele[i].selected=true;#}
                        father_ele.appendChild(del_ele[i])
                        i--
                    }
                }

            })
        }

　　

下面在看del_all_class，删除所有班级

第一步，获取右边的select的标签，作为父标签

第二步，获取左边标签的所有的子标签

第三步，获取左边标签的所有的子标签的个数

第四步，使用for循环，循环左边的子标签的长度，如果左边的子标签为select=true，则设在false，然后添加到右边，

        function del_all_class_func() {
            $("#del_all_class").bind("click",function () {
                var father_ele = document.getElementById("not_select_right")
                var del_ele = document.getElementById("select_left").children
                var del_ele_length = del_ele.length
                for(var i=0;i<=del_ele_length;i++){
                    if(del_ele[0].selected==true){
                        del_ele[0].selected=false;

                    }
                    father_ele.appendChild(del_ele[0])
                }
            })
        }

　　

第四个按钮，add_all_class

思路和上面的函数一样

        function add_all_class_func() {
                $("#add_all_class").bind("click",function () {
                var father_ele = document.getElementById("select_left")
                var del_ele = document.getElementById("not_select_right").children
                var del_ele_length = del_ele.length
                for(var i=0;i<=del_ele_length;i++){
                    if(del_ele[0].selected==false){
                        del_ele[0].selected=true;

                    }
                    father_ele.appendChild(del_ele[0])
                }
            })
        }

　　

最后在$function函数中绑定上面的四个函数即可

        $(function () {
            $("#menu_teacher").addClass("active")
            del_many_class_func();
            add_many_class_func();
            del_all_class_func();
            add_all_class_func();
            submit()
        })

　　

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------