Django之学员管理二

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 ----------

   

posted @ 2019-05-27 15:13  王先生是胖子  阅读(245)  评论(0编辑  收藏  举报