Python全栈之路-Django(四)

bootstrap http://v3.bootcss.com/
fontawesome http://fontawesome.io/

1 利用js阻止默认事件的触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <a href="http://www.baidu.com/" onclick="return func();">对话框添加</a>
    <script>
        function func() {
            alert(123)
            return true;  // 默认事件会触发
            return false;  // 默认事件不会触发
        }
    </script>
</body>
</html>

2 Ajax操作

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views


urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^classes/', views.classes),
    url(r'^add_class/', views.add_class),
    url(r'^del_class/', views.del_class),
    url(r'^edit_class/', views.edit_class),
    url(r'^students/', views.students),
    url(r'^add_student/', views.add_student),
    url(r'^del_student/', views.del_student),
    url(r'^edit_student/', views.edit_student),
    url(r'^modal_add_class/', views.modal_add_class),
    url(r'^modal_edit_class/', views.modal_edit_class),
    url(r'^modal_add_student/', views.modal_add_student),
    url(r'^modal_edit_student/', views.modal_edit_student),
    url(r'^teachers/', views.teachers),
]

2.1 功能1:编辑班级

app01.views.py

def modal_edit_class(request):
    ret = {'status': True, 'message': None}
    try:
        class_id = request.POST.get('class_id')
        class_name = request.POST.get('class_name').strip()
        if class_name:
            sqlhelper.modify(
                'update class set class_name=%s where id=%s',
                [class_name, class_id]
            )
        else:
            ret['status'] = False
            ret['message'] = '班级名称不能为空'
    except Exception as e:
        ret['status'] = False
        ret['message'] = str(e)
    return HttpResponse(json.dumps(ret))

templates.classes.html

<!DOCTYPE html>
<html lang="en">
<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;
        }
        #modal,#editModal{
            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>班级列表</h1>
    <div>
        <a href="/add_class/">添加班级</a>
        <a href="#" onclick="showModal();">对话框添加</a>
    </div>
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>班级名称</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            {% for row in class_list %}
            <tr>
                <td>{{ row.id }}</td>
                <td>{{ row.class_name }}</td>
                <td>
                    <a href="/del_class/?id={{ row.id }}">删除</a>
                    <a href="#" onclick="return modalEdit(this);">对话框编辑</a>
                    <a href="/edit_class/?id={{ row.id }}">编辑</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <div id="shadow" class="hide"></div>
    <div id="modal" class="hide">
        <form action="/modal_add_class/" method="post">
            <p><input type="text" name="class_name" id="class_name"></p>
            <input type="button" value="提交" onclick="AjaxSend();">
            <input type="button" value="取消" onclick="cancleModal();">
            <span id="errormsg"></span>
        </form>
    </div>
    <div id="editModal" class="hide">
        <h3>编辑框</h3>
        <form action="/modal_add_class/" method="post">
            <p><input type="text" name="class_name" id="edit_class_name"></p>
            <p><input type="text" name="class_id" style="display: none" id="edit_class_id"></p>
            <input type="button" value="提交" onclick="editAjaxSend();">
            <input type="button" value="取消" onclick="cancleModal();">
            <span id="errormsg"></span>
        </form>
    </div>

    <script src="/static/jquery-3.2.1.min.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('editModal').classList.add('hide');
        }

        function AjaxSend() {
            $.ajax({
                url: '/modal_add_class/', // 提交地址
                type: 'POST',             // 提交方式
                data: {'class_name': $('#class_name').val()},  // 提交数据
                success: function (data) { // 当服务端处理完成后,返回数据时,该函数自动调用
                    // data 为返回的数据
                    if(data == 'ok'){
{#                        location.href='/classes/';#}
                        location.reload();
                    }else{
                        $('#errormsg').text(data);
                    }
                }
            })
        }
        
        function modalEdit(self) {
            document.getElementById('shadow').classList.remove('hide');
            document.getElementById('editModal').classList.remove('hide');
            /*
            1.获取当前标签
            2.当前标签父标签的上方的标签
            3.获取当前行班级名,放入编辑框
             */
            var row = $(self).parent().prevAll();
            var content = $(row[0]).text();
            $('#edit_class_name').val(content);
            var class_id=$(row[1]).text();
            $('#edit_class_id').val(class_id)
        }
        
        function editAjaxSend() {
            var class_id = $('#edit_class_id').val();
            var class_name = $('#edit_class_name').val();

            $.ajax({
                url:'/modal_edit_class/',
                type:'POST',
                data: {'class_id':class_id,'class_name':class_name},
                success:function (arg) {
                    // arg 是字符串类型
                    // JSON.parse(字符串) => 对象
                    // JSON.stringify(对象) => 字符串
                    arg = JSON.parse(arg);
                    if(arg.status){
                        location.reload();
                    }else{
                        alert(arg.message);
                    }
                }
            })
        }
    </script>
</body>
</html>

2.2 学生操作:

2.2.1 功能1:添加学生

app01.views.py

def students(request):
    student_list = sqlhelper.get_list(
        'select student.id,student.student_name,class.class_name \
        from student left join class on student.class_id=class.id \
        order by id;',
        []
    )

    class_list = sqlhelper.get_list(
        'select id,class_name from class;',
        []
    )
    return render(request, 'students.html', {'student_list': student_list, 'class_list': class_list})
def modal_add_student(request):
    ret = {'status': True, 'message': None}
    try:
        student_name = request.POST.get('student_name').strip()
        class_id = request.POST.get('class_id')
        print(student_name, class_id)
        if student_name:
            sqlhelper.modify(
                'insert into student(student_name,class_id) values(%s,%s)',
                [student_name, class_id, ]
            )
        else:
            ret['status'] = False
            ret['message'] = '学生姓名不能为空'
            return HttpResponse(json.dumps(ret))
    except Exception as e:
        ret['status'] = False
        ret['message'] = str(e)
    return HttpResponse(json.dumps(ret))

templates.students.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: black;
            opacity: 0.3;
            z-index: 999;
        }
        .add_modal,.edit_modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 300px;
            margin-top: -150px;
            margin-left: -200px;
            z-index: 1000;
            background-color: white;
        }
        .hide{
            display: none;
        }

    </style>
</head>
<body>
<h1>学生列表</h1>
<div>
    <a href="/add_student/">添加学生</a>
    <a href="#" id="addModal">对话框添加</a>
    <table>
        <thead>
            <tr>
                <td>ID</td>
                <td>学生姓名</td>
                <td>所属班级</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            {% for row in student_list %}
            <tr>
                <td>{{ row.id }}</td>
                <td>{{ row.student_name }}</td>
                <td cid="{{ row.class_id }}">{{ row.class_name }}</td>
                <td>
                    <a href="/edit_student/?student_id={{ row.id }}">编辑</a>
                    <a href="#" class="modalBtnEdit">对话框编辑</a>
                    <a href="/del_student/?student_id={{ row.id }}">删除</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="shadow hide"></div>
<div class="add_modal hide">
    <p>
        <input id="addStudentName" type="text" name="student_name" placeholder="学生姓名">
    </p>
    <p>班级
        <select id="addClassId" name="class_id">
            {% for row in class_list %}
            <option value="{{ row.id }}">{{ row.class_name }}</option>
            {% endfor %}
        </select>
    </p>
    <input id="btnAdd" type="button" value="添加">
    <span id="ErrorMsg"></span>
</div>

<div class="edit_modal hide">
    <h1>编辑学生信息</h1>
    <p>
        学生姓名 <input id="editStudentName" type="text" name="student_name" placeholder="学生姓名">
        <input type="text" id="editStudentId" style="display: none">
    </p>

    <p>班级
        <select id="editClassId" name="class_id">
            {% for row in class_list %}
            <option value="{{ row.id }}">{{ row.class_name }}</option>
            {% endfor %}
        </select>
    </p>
    <input id="btnEdit" type="button" value="更新">
    <span id="editErrorMsg"></span>
</div>
<script src="/static/jquery-3.2.1.min.js"></script>
<script>
    $(function () {  //当页面框架加载完成之后执行
        $('#addModal').click(function () {
            // JQuery绑定的事件也可以阻止默认事件发生
            // return false
            $('.shadow').removeClass('hide');
            $('.add_modal').removeClass('hide');
        });
        $('#btnAdd').click(function () {
            $.ajax({
                url:'/modal_add_student/',
                type: 'POST',
                data: {'student_name': $('#addStudentName').val(),'class_id': $('#addClassId').val()},
                success:function (arg) {
                    arg = JSON.parse(arg);
                    if(arg.status){
                        location.reload();
                    }else{
                        $('#ErrorMsg').text(arg.message);
                    }
                }
            })
        });
        $('.modalBtnEdit').click(function () {
            $('.shadow,.edit_modal').removeClass('hide')
            /*
            1.获取当前标签 $(this)
             */
            var tds = $(this).parent().prevAll();
            var student_id = $(tds[2]).text();
            var student_name = $(tds[1]).text();
            var class_id = $(tds[0]).attr('cid');
{#            console.log(student_id,student_name,class_id)#}
            $('#editStudentName').val(student_name);
            $('#editStudentId').val(student_id);
            $('#editClassId').val(class_id);
        });
        $('#btnEdit').click(function () {
            var student_id = $('#editStudentId').val();
            var student_name = $('#editStudentName').val();
            var class_id = $('#editClassId').val();
            $.ajax({
                url: '/modal_edit_student/',
                type: 'POST',
                data: {'student_id': student_id,'student_name': student_name,'class_id': class_id},
                dataType: 'JSON', // JSON.parse(arg) 自动反序列化
                success: function (arg) {
{#                    arg = JSON.parse(arg);#}
                    if (arg.status){
                        location.reload();
                    }else{
                        $('#editErrorMsg').text(arg.message);
                    }
                }
            })
        })
    })
</script>
</body>
</html>

2.2.2 功能2:编辑学生

app01.views.py

def modal_edit_student(request):
    ret = {'status': True, 'message': None}
    try:
        student_id = request.POST.get('student_id')
        student_name = request.POST.get('student_name').strip()
        class_id = request.POST.get('class_id')
        if student_name:
            sqlhelper.modify(
                'update student set student_name=%s,class_id=%s where id=%s',
                [student_name, class_id, student_id]
            )
        else:
            ret['status'] = False
            ret['message'] = '学生姓名不能为空'
    except Exception as e:
        ret['status'] = False
        ret['message'] = str(e)
    return HttpResponse(json.dumps(ret))

3 多对多操作:

3.1 功能1:查看老师班级关系列表

app01.views.py

def teachers(request):
    teacher_list = sqlhelper.get_list(
        'select teacher.id as teacher_id,teacher.teacher_name,class.class_name \
        from teacher left join teacher_class on teacher.id=teacher_class.teacher_id \
        left join class on teacher_class.class_id=class.id order by teacher.id;',
        []
    )
    result = {}
    for item in teacher_list:
        teacher_id = item['teacher_id']
        if item in result:
            result[teacher_id]['class_name'].append(item['class_name'])
        else:
            result[teacher_id] = {
                'teacher_id': teacher_id,
                'teacher_name': item['teacher_name'],
                'class_name': [item['class_name'], ]
            }
    return render(request, 'teachers.html', {'teacher_list': result.values()})

templates.teachers.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>老师列表</h1>

    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>老师姓名</th>
            <th>任教班级</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            {% for row in teacher_list %}
            <tr>
                <td>{{ row.teacher_id }}</td>
                <td>{{ row.teacher_name }}</td>
                <td>
                    {% for item in  row.class_name %}
                        <span style="display: inline-block;margin-right: 10px;">{{ item }}</span>
                    {% endfor %}
                </td>
                <td>
                    <a>删除</a>
                    <a>编辑</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>

posted on 2017-06-29 23:45  万越天  阅读(243)  评论(0编辑  收藏  举报