Django-- many operating table

Today with a student management system, for example, to perform many tables operated by pymysql this module, there are two ways

The new url is: Direct to open a new page to operate
ajax mode frame mode: by operating in the present embodiment mode page frame

demand

Students table CRUD

step

He began to write function
1. Add Route
2. Design Templates
3. Write the corresponding interface function

Add Route mapping relationship

urlpatterns = [
    # 新url方式
    url(r'^students/', students),
    url(r'^add_student/', add_student),
    url(r'^del_student/', del_student),
    url(r'^update_student/', update_student),
    # ajax方式
    url(r'^ajax_add_student/', ajax_add_student),
    url(r'^ajax_update_student/', ajax_update_student),
]

Additions and deletions to change search student table

# students.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生表</title>
    <style>
        a {
            color: black;
            text-decoration: none;
        }

        .shadow {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.4;
            display: none;
        }

        .add_model, .update_model {
            position: fixed;
            height: 300px;
            width: 500px;
            left: 500px;
            top: 100px;
            background-color: white;
            display: none;
        }

        .model {
            margin-top: 20px;
            margin-left: 40px;
        }

    </style>
</head>
<body>
<h2>学生表</h2>
<table border="1" cellspacing="0">
    <tbody>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>
        <th>更新</th>
        <th>删除</th>
    </tr>
    {% for stu in students %}
        <tr>
            <td>{{ stu.sid }}</td>
            <td>{{ stu.name }}</td>
            <td>{{ stu.age }}</td>
            <td clsid="{{ stu.cid }}">{{ stu.cname }}</td>
            <td>
                <button><a href="/update_student/?id={{ stu.sid }}">更新</a></button>
                <button class="ajax_update">ajax更新</button>
            </td>
            <td>
                <button><a href="/del_student/?id={{ stu.sid }}" class="delete">删除</a></button>
{#                <button class="ajax_delete">ajax删除</button>#}
            </td>
        </tr>
    {% endfor %}

    </tbody>
</table>
<br><br>
<button><a href="/add_student/" target="_blank">添加学生</a></button>
<button id="ajax_add">ajax添加学生</button>

</body>
</html>

# add_student.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加学生</title>
    <style>
        a {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
<h2>增加学生</h2>
<form action="/add_student/" method="post">
    姓名：<input type="text" name="sname"><br>
    年龄：<input type="text" name="sage"><br>
    <div style="margin-top: 2px;margin-bottom: 10px">
        班级：<select name="cid" id="" style="width: 166px; height: 21.5px">
        {% for class in classes %}
            <option value="{{ class.id }}">{{ class.cname }}</option>
        {% endfor %}
    </select>
    </div>
    <span style="color:red; font-size: 12px;">{{ data }}</span><br>
    <span style="margin-left: 48px;"><input type="submit" value="添加"></span>
    <span style="margin-left: 40px;"><button><a href="/students/">取消</a></button></span>
</form>
</body>
</html>

# uodate_student.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息更新</title>
    <style>
        a {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
<h2>更新学生信息</h2>
<form action="/update_student/" method="post">
    <input type="hidden" name="sid" value="{{ student.id }}">
    姓名：<input type=" text" name="sname" value="{{ student.name }}"><br>
    年龄：<input type="text" name="sage" value="{{ student.age }}"><br>
    <div style="margin-top: 2px;margin-bottom: 10px">
        班级：<select name="cid" id="" style="width: 166px; height: 21.5px">
        {% for class in classes %}
            {% if student.cid == class.id %}
                <option value="{{ class.id }}" selected>{{ class.cname }}</option>
            {% else %}
                <option value="{{ class.id }}">{{ class.cname }}</option>
            {% endif %}
        {% endfor %}
    </select></div>
    <span style="color:red; font-size: 12px;">{{ data }}</span><br>
    <span style="margin-left: 48px;"><input type="submit" value="更新"></span>
    <span style="margin-left: 40px;"><button><a href="/students/">取消</a></button></span>
</form>
</body>
</html>

# urls.py

# 获取学生信息
@deco
def students(request):
    sql = 'select students.id as sid,name,age,classes.id as cid,cname from students left join classes on students.cid = classes.id order by sid'
    students = mysql(sql)[0]

    sql = 'select * from classes'
    classes = mysql(sql)[0]

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

# 添加学生
@deco
def add_student(request):
    sql = 'select * from classes'
    classes = mysql(sql)[0]

    if request.method == 'GET':
        return render(request, 'add_student.html', {'classes': classes})

    else:
        sname = request.POST.get('sname')
        age = request.POST.get('sage')
        cid = request.POST.get('cid')

        if not (sname and age):
            data = "姓名年龄不能为空"
            return render(request, 'add_student.html', {'data': data, 'classes': classes})

        sql = 'select * from students where name=%s'
        res = mysql(sql, (sname,))[0]
        if res:
            data = "姓名已存在"
            return render(request, 'add_student.html', {'data': data, 'classes': classes})

        sql = 'insert into students(name,age,cid) values(%s,%s,%s)'
        mysql(sql, (sname, age, cid))
        return redirect('/students/')

# 更新学生信息
@deco
def update_student(request):
    sql = 'select * from classes'
    classes = mysql(sql)[0]

    if request.method == "GET":
        id = request.GET.get('id')
        # print(id)
        s_sql = 'select * from students where id=%s'
        student = mysql(s_sql, (id,))[0]

        return render(request, 'update_student.html', {'student': student, 'classes': classes})
    else:
        id = request.POST.get('sid')
        name = request.POST.get('sname')
        age = request.POST.get('sage')
        cid = request.POST.get('cid')

        s_sql = 'select * from students where id=%s'
        student = mysql(s_sql, (id,))[0]

        if not (name and age):
            data = "姓名或年龄不能为空"
            return render(request, 'update_student.html', {'student': student, 'classes': classes, 'data': data})

        sql = 'select * from students where name=%s and age=%s and cid=%s'
        res = mysql(sql, (name, age, cid))[0]
        if res:
            data = "学生信息已存在"
            return render(request, 'update_student.html', {'student': student, 'classes': classes, 'data': data})

        sql = 'update students set name=%s,age=%s,cid=%s where id=%s'
        mysql(sql, (name, age, cid, id))
        return redirect('/students/')

# 删除学生信息
@deco
def del_student(request):
    id = request.GET.get('id')
    # print(id)
    sql = "delete from students where id=%s"
    mysql(sql, (id,))

    return redirect('/students/')

ajax update and add

# students.html

<!--直接加在students.html页面里面-->
{# 遮罩层 #}
<div class="shadow"></div>

{# 弹出框层 #}
{# 增加学生 #}
<div class="add_model">
    {#    <input type="hidden" name="class_id">#}
    <div class="model">
        名字：<input type="text" name="name" id="add_student"><br>
        年龄：<input type="text" name="age" id="add_age"><br>
        <div style="margin-top: 2px;margin-bottom: 2px">
            班级：<select name="add_cid" id="add_cid" style="width: 166px; height: 21.5px">
            {% for class in classes %}
                <option value="{{ class.id }}">{{ class.cname }}</option>
            {% endfor %}
        </select></div>
        <span id="add_error" style="color:red; font-size: 12px; margin-bottom: 10px;"></span><br>
        <button id="add" style="margin-left: 48px;">添加</button>
        <button class="add_cancel" style="margin-left: 40px;">取消</button>
    </div>
</div>

{# 更新学生 #}
<div class="update_model">
    <div class="model">
        <input type="hidden" name="sid" id="up_sid">
        姓名：<input type="text" name="name" id="up_name"><br>
        年龄：<input type="text" name="age" id="up_age">
        <div style="margin-top: 2px;margin-bottom: 2px">
            班级：<select name="up_cid" id="up_cid" style="width: 166px; height: 21.5px">
            {% for class in classes %}
                <option value="{{ class.id }}">{{ class.cname }}</option>
            {% endfor %}
            </select>
        </div>
         <span id="up_error" style="color:red; font-size: 12px; margin-bottom: 10px;"></span><br>
        <button id="update" style="margin-left: 48px;">更新</button>
        <button class="up_cancel" style="margin-left: 48px;">取消</button>
    </div>
</div>

{# CDN导入jQuery #}
<script
        src="http://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>


{# 删除学生 #}
<script>
    $('.delete').click(function () {
        res = window.confirm('是否删除学生');
        return res;
     });
</script>

{# 增加学生 #}
<script>
    $('#ajax_add').click(function () {
        $('.shadow, .add_model').css('display', 'block');
        {#$('.shadow, .add_model').show()#}
    });

    $('.add_cancel').click(function () {
        $('.shadow, .add_model').hide();
        window.location.href='/students/'
    });

    $('#add').click(function () {
        var name = $('#add_student').val();
        var age = $('#add_age').val();
        var cid = $('#add_cid').val();
        {#console.log(classname);#}
        $.ajax({
            type: 'POST',
            url: '/ajax_add_student/',
            data: {'name': name,'age':age,'cid':cid},
            success: function (data) {
                var res = JSON.parse(data);

                if (res['code'] == 10000) {
                    alert(res['msg']);
                    window.location.href = '/students/';
                } else {
                    $('#add_error').text(res['msg']);
                }
            }
        })
    });

</script>

{# 更新学生 #}
<script>
    $('.ajax_update').click(function () {
        $('.shadow, .update_model').show();
        var info = $(this).parent().prevAll();
        {#console.log(info)#}
        var age = info[1].innerText;
        var name = info[2].innerText;
        var id = info[3].innerText;
        var cid = $(info[0]).attr('clsid');

        $('#up_age').val(age);
        $('#up_name').val(name);
        $('#up_sid').val(id);
        $('#up_cid').val(cid);
    });

    $('.up_cancel').click(function () {
        $('.shadow, .update_model').hide();
        window.location.href = '/students/';
    });

    $('#update').click(function () {
        var name = $('#up_name').val();
        var age = $('#up_age').val();
        var id = $('#up_sid').val();
        var cid = $('#up_cid').val();
        {#console.log(classname,id);#}

        $.ajax({
            type: 'POST',
            url: '/ajax_update_student/',
            data: {'id':id,'name': name, 'age': age,'cid': cid},
            success: function (data) {
                var res = JSON.parse(data);
                if (res['code'] == 10000) {
                    alert(res['msg']);
                    window.location.href = '/students/';
                } else {
                    $('#up_error').text(res['msg']);
                }
            }
        })
    });

</script>

# urls.py

# ajax增加学生
@deco
def ajax_add_student(request):
    name = request.POST.get('name')
    age = request.POST.get('age')
    cid = request.POST.get('cid')

    res = {'code': None, 'msg': None}
    if not (name and age):
        res['code'] = 10001
        res['msg'] = '姓名年龄不能为空'
        return HttpResponse(json.dumps(res))

    sql = 'select * from students where name=%s and age=%s and cid=%s '
    resp = mysql(sql, (name, age, cid))[0]
    if resp:
        res['code'] = 10001
        res['msg'] = f'学生--{name}--已存在'
        return HttpResponse(json.dumps(res))

    sql = 'insert into students(name,age,cid) values(%s,%s,%s)'
    mysql(sql, (name, age, cid))
    res['code'] = 10000
    res['msg'] = f'学生--{name}--信息添加成功'
    return HttpResponse(json.dumps(res))

# ajax更新学生
@deco
def ajax_update_student(request):
    id = request.POST.get('id')
    name = request.POST.get('name')
    age = request.POST.get('age')
    cid = request.POST.get('cid')

    res = {'code': None, 'msg': None}
    if not (name and age):
        res['code'] = 10001
        res['msg'] = '姓名年龄不能为空'
        return HttpResponse(json.dumps(res))

    sql = 'select * from students where name=%s and age=%s and cid=%s '
    resp = mysql(sql, (name, age, cid))[0]
    if resp:
        res['code'] = 10001
        res['msg'] = f'学生--{name}--已存在'
        return HttpResponse(json.dumps(res))

    sql = "update students set name=%s,age=%s,cid=%s where id=%s"
    mysql(sql, (name, age, cid, id))

    res['code'] = 10000
    res['msg'] = f'学生--{name}--信息更新成功'
    return HttpResponse(json.dumps(res))

Django-- many operating table

Django-- many operating table

demand

step

Add Route mapping relationship

Additions and deletions to change search student table

ajax update and add

Guess you like