用户管理系统之老师详解编程语言

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

先看下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%; 
        width: 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() 
        })

——————————————————————————————————————————————————————————

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/20820.html

用户管理系统之老师详解编程语言

相关推荐

发表回复