Django之学员管理二

　　学生表的一对多的增删改查

views.py

def students(request):

    #select students.sid,students.name,classes.title from students left JOIN classes on students.classes_id=classes.nid;

    conn = pymysql.connect(host="127.0.0.1",port=3306,user='root',passwd='redhat',db='weibo',charset='utf8')

    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) #改为字典

    cursor.execute("select students.sid,students.name,classes.title from students left JOIN classes on students.classes_id=classes.nid;")

    students_list = cursor.fetchall()

    print("students",students_list)

    cursor.close()

    conn.close()

    return render(request, "students.html", {"students_list": students_list})

def add_students_add(request):

    if request.method=="GET":

        conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', charset='utf8')

        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典

        cursor.execute("select nid,title from classes")

        class_list = cursor.fetchall()

        print("classes", class_list)

        cursor.close()

        conn.close()

        return render(request,"add_students.html",{"class_list":class_list})

    else:

        htminput_name = request.POST.get("name")

        classes_id = request.POST.get("classes_id")

        conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', charset='utf8')

        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典

        cursor.execute("insert into students(name,classes_id) value(%s,%s)",[htminput_name,classes_id])

        conn.commit()

        cursor.close()

        conn.close()

        return redirect("/students/")

def del_students_del(request):

    sid = request.GET.get("sid")

    conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', charset='utf8')

    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典

    cursor.execute("delete from students where sid=%s",[sid,])

    conn.commit()

    cursor.close()

    conn.close()

    return redirect("/students/")

from utils import sqlheper

def edit_students_edit(request):

    if request.method == "GET":

        sid = request.GET.get("sid")

        class_list = sqlheper.get_list("select * from classes",[])

        students_name = sqlheper.get_one("select sid,name,classes_id from students where sid=%s",[sid,])

        return render(request,"edit_students.html",{"class_list":class_list,"students_name":students_name})

    else:

        sid = request.GET.get("sid")

        name = request.POST.get("name")

        classes_id = request.POST.get("classes_id")

        sqlheper.modify("update students set name=%s,classes_id=%s where sid=%s",[name,classes_id,sid])

        return redirect("/students/")

sqlheper.py

import pymysql

def get_list(sql,args):

    """

    获取列表信息

    :param sql:

    :param args:

    :return:

    """

    conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', charset='utf8')

    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典

    cursor.execute(sql,args)

    result = cursor.fetchall()

    cursor.close()

    conn.close()

    return result

def get_one(sql,args):

    """

    获取一条数据信息

    :param sql:

    :param args:

    :return:

    """

    conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', charset='utf8')

    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典

    cursor.execute(sql, args)

    result = cursor.fetchone()

    cursor.close()

    conn.close()

    return result

def modify(sql,args):

    """

    提交事务，以便执行增删改操作

    :param sql:

    :param args:

    :return:

    """

    conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', charset='utf8')

    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典

    cursor.execute(sql,args)

    conn.commit()

    cursor.close()

    conn.close()

students.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>学生列表</h1>

    <div>

        <a href="/add_students_add/">添加学生</a>

    </div>

    <table>

        <thead>

            <tr>

                <th>ID</th>

                <th>学生姓名</th>

                <th>所属班级</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

            {% for students in students_list %}

                <tr>

                    <td>{{ students.sid }}</td>

                    <td>{{ students.name }}</td>

                    <td>{{ students.title }}</td>

                    <td>

                        <a href="/del_students_del/?sid={{ students.sid }}">删除</a>

                        |

                        <a href="/edit_students_edit/?sid={{ students.sid }}">编辑</a>

                    </td>

                </tr>

            {% endfor %}

        </tbody>

    </table>

</body>

</html>

add_students_add.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>添加学生</h1>

    <form method="post" action="/add_students_add/">

        <p>学生姓名：<input type="text" name="name" placeholder="please input your name"></p>

        <p>所属班级：

            <select name="classes_id">

                {% for foo in class_list %}

                    <option value="{{ foo.nid }}">{{ foo.title }}</option>

                {% endfor %}

            </select>

        </p>

        <input type="submit" value="submit" >

    </form>

</body>

</html>

edit_studetns_edit.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>编辑学生</h1>

    <form method="post" action="/edit_students_edit/?sid={{ students_name.sid }}">

        <p>学生姓名：<input type="text" name="name" value="{{ students_name.name }}"></p>

        <p>学生班级：

            <select name="classes_id">

                {% for row in class_list %}

                    {% if row.nid == students_name.classes_id %}

                        <option selected value="{{ row.nid }}">{{ row.title }}</option>

                    {% else %}

                        <option value="{{ row.nid }}">{{ row.title }}</option>

                    {% endif %}

                {% endfor %}

            </select>

        </p>

        <input type="submit" value="submit">

    </form>

</body>

</html>

模态对话框添加班级classes：

　　模态对话框就是在页面上做两层处理。第一层是遮罩层，第二层是呈现对话框的显示层

　　对话框的处理在页面的头《head》里要写样式：

classes.html

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .shadow{

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.4;

            z-index: 999;

        }

        .model{

            z-index: 1000;

            position: fixed;

            left: 50%;

            top: 50%;

            height: 300px;

            width: 400px;

            background-color: white;

            margin-left: -200px;

            margin-top: -150px;

        }

    </style>

</head>

　　在《body》里是：

    <div id="shadow" class="shadow "></div>

    <div id="model" class="model ">

        <form method="post" action="/model_ajax_classes_add/">

            <p>添加班级：<input type="text" name="title"></p>

            <input type="submit" value="submit">{{ msg }}

        </form>

    </div>

    <script>

        function showModal(){

            document.getElementById("shadow").classList.remove("hide");

            document.getElementById("model").classList.remove("hide");

        }

    </script>

</body>

</html>

　　在模态对话框里，用到的form提交方式，期特点是提交页面就刷新。其弊病是在提交数据错误时。也依旧刷新，而不是在当前页面显示错误值。

　　比如，在输入空班级时，后端判断不得为0时，form依旧刷新，并没有提示词。

　　Form表单的特性就是刷新

　　　　在form表单中，使用form表单，在正常提交跳转是没有问题的，但是bug在于错误提交数据，页面还是会刷新，而不是在原有的页面中反馈错误信息。

　　　　所以，这里就需要用到Ajax操作。

　　另建对应单独的执行函数：

views.py

def model_ajax_classes_add(request):

    model_ajax_add_classes_title = request.POST.get("title")

    if len(model_ajax_add_classes_title)>0:

        sqlheper.modify("insert into classes(title) values(%s)",[model_ajax_add_classes_title,])

        return redirect("/classes/")

    else:

        return render(request,"classes.html",{"msg":"班级名称不能为空"})

Ajax对话框提交班级信息的实现方式：

　　Ajax的特点和知识点：

　　　　特点：Ajax提交，页面不刷新，形象理解为偷偷的提交数据给后端处理

　　　　　　　实现ajax方法，要使用jQuery

　　　　知识点：1、ajax以什么方式提交数据type。

　　　　　　　　2、ajax往哪里提交要指定url。

　　　　　　　　3、ajax提交什么数据要指定data。

　　　　　　　　4、ajax提交成功和失败分别要干什么。

　　　　　　　　　1-3执行完，会等待。

　　　　　　　　　data是提交的数据，是字典的类型，values值提交的url中，data{"key":().val()} val是标定id里输入的值

　　　　　　　　　success:function(data) 当服务端处理完函数返回数据时，自动调用这个function函数，这里的data是服务端返回的值.

　　　　　　　　　　比如：console.log（data）

　在ajax执行完需要跳转时，是不能自行跳转的，需要些js来实现跳转。在django里用redirect也是实现不了的。

　　　　js的实现就是用location.href = "/url/"

　ajax的执行流程，触发ajax，作为服务端的ajax获取到前端传输的数据data，以字典的value值的形式传给后端服务，当后端收到数据后，给前端一个返回值，执行success的function函数返回前端应该收到的返回值。在前端代码的console里可看到

ajax的班级添加demo示例：

classes.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>classes</title>

    <style>

        .hide{

            display: none;

        }

        .shadow{

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.4;

            z-index: 999;

        }

        .modal{

            z-index: 1000;

            position: fixed;

            left: 50%;

            top: 50%;

            height: 300px;

            width: 400px;

            background-color: white;

            margin-left: -200px;

            margin-top: -150px;

        }

    </style>

</head>

<body>

    <h1>classes_list</h1>

    <div>

        <a href="/add_class/">添加</a>

        |

        <a onclick="showModal();">对话框添加</a>

        |

        <a>对话框</a>

    </div>

    <table>

        <thead>

            <tr>

                <th>ID</th>

                <th>班级名称</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

            {% for item in class_lsit %}

                <tr>

                    <td>{{ item.nid }}</td>

                    <td>{{ item.title }}</td>

                    <td>

                        <a href="/del_class/?nid={{ item.nid }}">删除</a>

                        |

                        <a onclick="modelEdit();">对话框编辑</a>

                        |

                        <a href="/edit_class/?nid={{ item.nid }}">编辑</a>

                    </td>

                </tr>

            {% endfor %}

        </tbody>

    </table>

    <div id="shadow" class="shadow hide"></div>

    <div id="modal" class="modal hide">

        <p>添加班级：<input id="title" type="text" name="title" placeholder="班级名称"></p>

        <input type="button" value="submit" onclick="AjaxSend();"/>

        <input type="button" value="取消" onclick="cancleModal();"/><span id="errormsg"></span>

    </div>

    <script src="/static/jquery-1.12.4.js"></script>

    <script>

        function showModal() {

            document.getElementById("shadow").classList.remove("hide");   //找到遮罩层，并去挑遮罩层

            document.getElementById("modal").classList.remove("hide");

        }

        function cancleModal() {

            document.getElementById('shadow').classList.add('hide');

            document.getElementById('modal').classList.add('hide')

            document.getElementById('eidtModal').classList.add('hide')

        }

        function AjaxSend(){

            $.ajax({

                url:'/modal_add_classes_ajax/',   //往哪里提交

                type:'POST',                      //以什么方式提交

                data:{"title":$("#title").val()},  //拿到全段输入的值

                success:function (data) {

                    //当服务端处理完成后，返回数据时，该函数自动调用

                    //data是服务端返回的值

                    console.log(data);

                    if(data=="ok"){

                        location.href='/classes/'; //指定提交成功后跳转到哪里

                    }else {

                        $('#errormsg').text(data);

                    }

                }

            })

        }

    </script>

</body>

</html>

　　views.py的model_add_classes_ajax函数的操作示例：

def modal_add_classes_ajax(request):

    #获取前端的title

    title = request.POST.get('title')

    print(title)

    if len(title) > 0:

        sqlheper.modify('insert into classes(title) values(%s)',[title,])

        return HttpResponse('ok')

    else:

        return HttpResponse('班级标题不能为空')

--------- END ----------

巴特西

Django之学员管理二

最新文章

热门文章