day-59Django

项目跟进

服务端：

## 模态对话框修改班级
def ajax_up_classes(request):
    classname = request.POST.get('classname')
    classid   = request.POST.get('classid')
    res = {"code":None, "data":None}
    try:
        import pymysql
        conn = pymysql.connect(host='127.0.0.1', user='root', password='123', db='s8day58', charset='utf8')
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        sql = "update classes set name = %s where id=%s"
        cursor.execute(sql, (classname,classid))
        conn.commit()
        res["code"] = 10000
        res['data'] = "success"

        # return HttpResponse(json.dumps(res))                              序列化字典发送
        return JsonResponse(res)

    except Exception as e:
        res['code'] = 10001
        res['data'] = str(e)
        # return HttpResponse(json.dumps(res))
        return JsonResponse(res)



### 查看学生列表
sqlhelper = SqlHelper()
def students(request):
    sql = "select students.id, students.name as sname, students.class_id as cid, classes.name as cname from students left join classes on students.class_id = classes.id"
    students = sqlhelper.getAll(sql)                            #学生id  学生name  学生关联班级cid(班级id)  班级的name

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

## 增加学生
def add_student(request):
    if request.method == 'GET':                                 #分流之数据发往html  
        sql = "select * from classes"
        classes = sqlhelper.getAll(sql)
        return render(request, "add_student.html", {"classes": classes})
    else:
        sname = request.POST.get('sname')
        classid = request.POST.get('classid')
        sql =  "insert into students (name, class_id) values (%s, %s)"
        sqlhelper.insert(sql, (sname, classid))

        return redirect('/students/')


def up_student(request):

    if request.method == 'GET':
        id = request.GET.get('id')
        sql = "select students.id as sid, students.name as sname, students.class_id as cid, classes.name as cname from students left join classes on students.class_id = classes.id where students.id=%s"
        student = sqlhelper.getOne(sql, (id))
        sql = "select * from classes"
        classes = sqlhelper.getAll(sql)

        return render(request, 'up_student.html', {"student":student, "classes":classes})

    else:
        classid = request.POST.get('classid')
        stuname = request.POST.get('stuname')
        stuid = request.POST.get('stuid')

        sql = "update students set class_id = %s, name = %s where id=%s"

        sqlhelper.update(sql, (classid, stuname, stuid))

        return redirect('/students/')



urlpatterns = [
    # url(r'^admin/', admin.site.urls),
    url(r'^classes/', classes),
    url(r'^add_class/', add_class),
    url(r'^modal_add_class/', modal_add_class),
    url(r'^del_class/', del_class),
    url(r'^up_class/', up_class),
    url(r'^ajax_up_classes/', ajax_up_classes),


    url(r'^students/', students),
    url(r'^add_student/', add_student),
    url(r'^up_student/', up_student),

]

class.html:

<div class="editshadow"></div>
<div class="editcontent">
        <input type="hidden" id="clasid">
        班级名: <input type="text" name="ajaxclassname" id="ajaxclassname">
        <input type="button" value="提交" id="ajaxtijiao">
        <input type="button" id="cancel" value="取消">
        <span id="error"></span>
</div>


</body>
<script
  src="http://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
  crossorigin="anonymous"></script>

<script>
    function xxxxx(){
        res = window.confirm("是否确定删除？");
        return res;
    }
    $('#btn').click(function () {
        $(".shadow").show();
        $(".content").show();
    });
    $('#cancel').click(function () {
        $(".shadow").hide();
        $(".content").hide();
    });

    $('.ajax_class_modal').click(function () {
        $('.editshadow, .editcontent').show();
       
        var tds = $(this).parent().prevAll();        #1. 获取当前的标签 $(this) 2. 获取他爹 $(this).parent() 3. 找 大爷和二爷  $(this).parent().prevAll()
        var classname = $(tds[0]).text();            #注：班级是0 id 是1
        var classid = $(tds[1]).text();

        $('#ajaxclassname').val(classname);
        $('#clasid').val(classid);                    #创建一个长链接储存的容器(存放id)

    });

    $('#tijiao').click(function () {
        $.ajax({
            type: "POST",
            url : "/modal_add_class/",
            data:  {"classname":$('#classname').val()},
            success: function (data) {
                if(data == 'ok'){
                    alert('添加成功!');
                    window.location.href = '/classes/';
                }else{
                    alert('添加失败！');
                    $('#error').text(data)
                }

            }
        })
    });

    $('#ajaxtijiao').click(function () {
        var classname = $('#ajaxclassname').val();
        var clasid = $('#clasid').val();

        $.ajax({
            type : "POST",
            url : '/ajax_up_classes/',
            data: {"classname":classname, "classid":clasid},
            success : function (data) {
              
                res = JSON.parse(data);                            #js反序列化:
                if (res['code'] == 10000){
                    //widnow.location.href = '/classes/';
                    window.location.reload();
                }*/
                console.log(data);
                //console.log(data['code']);

            }
        })

    })

</script>
</html>

add_student.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
<h2>添加学生</h2>
<form action="/add_student/" method="post">
    学生名称: <input type="text" name="sname"><br>
    班级名称:
    <select name="classid" id="">
       {% for item in classes %}
           <option value="{{ item.id }}">{{ item.name }}</option>        发往服务器的是id，方便数据库添加
       {% endfor %}
    </select>
    <input type="submit"  value="提交">
</form>

</body>
</html>

up_students.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
<h2>更新班级</h2>
<form action="/up_student/" method="post">
    <input type="hidden" name="stuid" value="{{ student.sid }}">    # 服务器发来的学生id（get请求）再次返回服务器，方便数据库的更改（post请求）
    
    学生名称: <input type="text" name="sname" value="{{ students.sname }}">
    选择班级:
    学生姓名: <input type="text" name="stuname" value="{{ student.sname }}" > <br>
    选择班级:
    <select name="classid" id="">                                {#如果学生的班级cid等于班级的id，表示找到,展现出来,只是为了将选中的学生的班级展现到输入框（option之selected的选中），
                                                                　　如果不是，就正常将id添加到name，方便返回服务器#}
                                                                
        {% for item in classes %}
            {% if item.id == student.cid %}
                <option value="{{ item.id }}" selected>{{ item.name }}</option>
            {%else%}
                 <option value="{{ item.id }}" >{{ item.name }}</option>
            {% endif %}
        {% endfor %}
    </select>
    <input type="submit"  value="提交">
</form>

</body>
</html>

补充常见表单

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>

<form action="http://127.0.0.1:8888/" method="post">
    姓名:<input type="text" name="username"> <br>                　　　　　　#没有name url没有显示，后台也无法拿到数据
    密码：<input type="password" name="pwd"> <br>
    爱好： <input  type="checkbox" name="hobby" value="football"> 足球
    <input  type="checkbox" name="hobby" value="basetball"> 蓝球            #复选框必须要有value，服务器取值的依据
     <input  type="checkbox" name="hobby" value="yumaoqiu"> 羽毛球 <br>
    性别： <input type="radio" name="gender" value="male" checked>男         #checked默认选中
    <input type="radio" name="gender" value="female">女 <br>                #复选框必须要有value，且name值必须一样，复选框也一样

    <select name="city">
          <option value="bj">北京</option>
        <option value="tj" selected>天津</option>
        <option value="hb">河北</option>
        <option value="sd">山东</option>
        <option value="nm">内蒙</option>
    </select><br>

    <textarea cols="30" rows="50" name="mytext">

    </textarea>



    <input type="submit" value="提交">
</form>

</body>
</html>

补充

json：

第一种方式交互：
　　后台返回的格式：

　　　　return HttpResponse(json.dumps(res))

　　前台js反序列化：
　　　　res = JSON.parse(data);

　　前台js的序列化：
　　　　JSON.stringify(res)


第二种方式：

　　后台返回的格式：
　　　　return JsonResponse((res)) 　　　　　　 # 相当于使用了json.dumps()

　　前台：
　　　　console.log(data) 　　　　　　　　　 　# data 已经反序列化好的字典

页面跳转两种方式：
　　widnow.location.href = '/classes/';　　　　　　  # 跳转页面
　　window.location.reload(); 　　　　　　　　　　# 刷新当前页面

if..else模板:
　　{% if item.id == student.cid %}
　　　　<option value="{{ item.id }}" selected>{{ item.name }}</option>
　　{%else%}
　　　　<option value="{{ item.id }}" >{{ item.name }}</option>
　　{% endif %}

DOM
　　DOM0：

　　　　 js事件绑定到标签里面
　　　　<a href="https://www.baidu.com" onclick="return del();">点击</a>

　　　　function del(){
　　　　　　res = window.confirm('是否确认删除？');　　　　　　　　  confiem返回的是ture或flase
　　　　　　return res;　　　　　　　
　　　　}

　　　　onclick依据收到的true或flase，来判断是否执行（比如阻止a标签的页面跳转）

　　DOM1:
　　　　<a href="https://www.baidu.com" id="mya">点击</a>
　　原生js：
　　　　var a = document.getElementById('mya') ;　　　　　　　　 获取到a标签
　　　　a.onclick = function () {
　　　　　　res = window.confirm('是否确认删除？');
　　　　　　return res;
　　　　}
　　jquery方法：
　　　　$('#mya').click(fucntion(){
　　　　　　res = window.confirm('是否确认删除？');
　　　　　　return res;
　　　　})

 注：如果想要绑定多个相同的标签的时候， 不要用id选择器， 要用class类别选择器

　　否则发生第一个生效，其他不生效