Django--多くの手術台

Django--多くの手術台

今日の学生管理システムで、例えば、pymysqlこのモジュールが運営する多くのテーブルを実行するために、2つの方法があります

  1. 新しいURLは次のとおりです。動作させるために、新たなページを開くに直接
  2. AJAXモードフレームモード:本実施形態のページフレームで動作させることにより

需要

  1. 学生テーブルのCRUD

ステップ

  1. 彼は、関数を書くようになりました
    1. ルートの追加
    2. デザインテンプレート
    3. 対応するインターフェース機能を書きます

ルートマッピング関係を追加します。

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),
]

検索の学生テーブルを変更するための追加と削除

# 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の更新と追加

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

おすすめ

転載: www.cnblogs.com/Hades123/p/11366193.html