基于BootStrap,FortAweSome，Ajax的学生管理系统

发布时间：2020-12-17 20:52:22 所属栏目：安全来源：网络整理

导读：一. 基于BootStrap,FortAweSome，Ajax的学生管理系统代码部分 1.students.html 1html页面文件 ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title Title / title link rel ="stylesheet" href ="/static/plugin/bootstrap/css/bootstrap.css"

一. 基于BootStrap,FortAweSome，Ajax的学生管理系统代码部分

1.students.html

<1>html页面文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugin/font-awesome/css/font-awesome.css">
    <style>
        .icon {
            margin: 0 15px;
        }
    </style>
</head>
<body>
<div style="padding: 20px 0; text-align: center;color: #2aabd2" ><h3>学生管理</h3></div>

<div class="container" style="width: 800px">
    <div><button class="btn btn-info" id=‘bntAdd‘ style="margin-bottom: 20px;">添加学生</button></div>
    <div>
        <table class="table-bordered table-hover table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="student_tb">
                {% for row in student_list %}
                <tr nid="{{ row.id }}">
                    <td na="nid">{{ row.id }}</td>
                    <td na="StudentName">{{ row.StudentName }}</td>
                    <td na="age">{{ row.age }}</td>
                    {% if row.gender%}
                        <td na="gender">男</td>
                    {% else %}
                        <td na="gender">女</td>
                    {% endif %}
                    <td na="class_id" cid="{{ row.cs_id }}">{{ row.cs.title }}</td>
                    <td>
                        <a href="javascript:void(0)" class="glyphicon glyphicon-remove icon deleteRow" style="font-size: 18px" ></a>
                        <a href="javascript:void(0)" class="fa fa-pencil-square-o icon editRow" style="font-size: 20px"></a>
                    </td>

                </tr>
                {% endfor %}
            </tbody>

        </table>
    </div>
</div>


<div class="modal fade" id="addModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;  </button>
            <h4 class="modal-title" id="myModalLabel">添加学生信息 </h4>
         </div>
         <div class="modal-body">
            <form class="form-horizontal" role="form">
               <div class="form-group">
                  <label for="studentname" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                     <input type="text" class="form-control" name="StudentName" placeholder="StudentName">
                  </div>
               </div>
               <div class="form-group">
                  <label for="age" class="col-sm-2 control-label">年龄</label>
                  <div class="col-sm-10">
                     <input type="text" class="form-control" name="age" placeholder="age">
                  </div>
               </div>
               <div class="form-group">
                  <label for="gender" class="col-sm-2 control-label">性别</label>
                  <div class="col-sm-10">
                     <label class="radio-inline">
                        <input type="radio" name="gender"  value="1" checked >男
                     </label>
                    <label class="radio-inline">
                        <input type="radio" name="gender"  value="0">女
                    </label>
                  </div>
               </div>
               <div class="form-group">
                  <label for="class" class="col-sm-2 control-label">班级</label>
                  <div class="col-sm-10">
                     <select  class="form-control" name="class_id">
                         {% for item in class_list %}
                              <option value={{ item.id }}>{{ item.title }}</option>
                         {% endfor %}
                     </select>

                  </div>
               </div>

            </form>
         </div>
         <div class="modal-footer">
             <span id="errorMsg" style="color: red;"></span>
            <button type="button" class="btn btn-default" data-dismiss="modal">取消 </button>
            <button type="button" id="btnSave" class="btn btn-primary">保存</button>
         </div>
      </div>
   </div>
</div>

<div class="modal fade" id="delModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
       <div class="alert alert-warning">
           <div><input style="display: none" type="text" id="delNid" /></div>
           <h3 style="text-align: center">是否删除学生信息？</h3>
           <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消 </button>
                <button type="button" id="btnConfirm" class="btn btn-danger">确定</button>
           </div>
       </div>
   </div>
</div>

<div class="modal fade" id="editModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;  </button>
            <h4 class="modal-title" id="myModalLabel">修改学生信息 </h4>
         </div>
         <div><input style="display: none" type="text" id="editNid" name="nid" /></div>
         <div class="modal-body">
            <form class="form-horizontal" role="form">
               <div class="form-group">
                  <label for="studentname" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                     <input type="text" class="form-control" name="StudentName" placeholder="StudentName">
                  </div>
               </div>
               <div class="form-group">
                  <label for="age" class="col-sm-2 control-label">年龄</label>
                  <div class="col-sm-10">
                     <input type="text" class="form-control" name="age" placeholder="age" >
                  </div>
               </div>
               <div class="form-group">
                  <label for="gender" class="col-sm-2 control-label">性别</label>
                  <div class="col-sm-10">
                     <label class="radio-inline">
                        <input type="radio" name="gender"  value="1" checked >男
                     </label>
                    <label class="radio-inline">
                        <input type="radio" name="gender"  value="0">女
                    </label>
                  </div>
               </div>
               <div class="form-group">
                  <label for="class" class="col-sm-2 control-label">班级</label>
                  <div class="col-sm-10">
                     <select  class="form-control" name="class_id">
                         {% for item in class_list %}
                              <option value={{ item.id }}>{{ item.title }}</option>
                         {% endfor %}
                     </select>

                  </div>
               </div>

            </form>
         </div>
         <div class="modal-footer">
             <span id="errorMsg" style="color: red;"></span>
            <button type="button" class="btn btn-default" data-dismiss="modal">取消 </button>
            <button type="button" id="saveEdit" class="btn btn-primary">保存</button>
         </div>
      </div>
   </div>
</div>

<script src="/static/jquery-3.1.1.js"></script>
<script src="/static/plugin/bootstrap/js/bootstrap.js"></script>
<script>
    $(function () {
        bindEdit();
        saveEdit();
        bindDel();
        confirm_del();
        bindEvent();
        bindSave();
        createRow();
    });//加载完后自动执行上述函数,没有此步，jquery找到的标签绑定的事件和函数将失效
    function bindEdit() {
       $(‘#student_tb‘).on(‘click‘,‘.editRow‘,function () {
           $(‘#editModel‘).modal(‘show‘);
           $(this).parent().prevAll().each(function () {
              var value=$(this).text();
              var na=$(this).attr(‘na‘);
              if(na==‘class_id‘) {
                  var cid=$(this).attr(‘cid‘);
                  $(‘#editModel select[name=class_id]‘).val(cid);}
              else if(na==‘gender‘) {
                  if(value==‘男‘) {$(‘#editModel :radio[value="1"] ‘).prop(‘checked‘,true);}
                  else {$(‘#editModel :radio[value="0"] ‘).prop(‘checked‘,true);}
                  }
              //else if(na==‘age‘) {$(‘#editModel input[name="age"]‘).val(value) ;}
              //else if(na==‘StudentName‘) {$(‘#editModel input[name="StudentName"]‘).val(value) ;}
              //else{$(‘#editModel input[name="nid"]‘).val(value)}
               else {$("#editModel input[name=‘"+ na+"‘]").val(value)}
              console.log(na,value)
             })
       });
    }

    function saveEdit() {
        $(‘#saveEdit‘).click(function () {
            var postData={};
            $(‘#editModel‘).find(‘input,select‘).each(function () {
                var name=$(this).attr(‘name‘);
                var value=$(this).val();
                if (name==‘gender‘){
                    if($(this).prop(‘checked‘)) {postData[name]=value}
                }
                else {postData[name]=value}
                console.log(postData)
            });
            $.ajax({
                url:‘/edit_students‘,type:‘POST‘,data:postData,dataType:‘JSON‘,//返回值要是JSON格式的
                success:function (arg) {
                    console.log(arg);
                    if (arg.status){window.location.reload();}
                    else{alert(arg.message)}
                }
            })
        })
    }

    function bindDel() {
            //遇到a标签绑定事件失败的测试，绑定的标签添加onclick="bindDel(this)"
            //{#console.log(ths);
            //{#$(‘#delModel‘).modal(‘show‘);
        $(‘#student_tb‘).on(‘click‘,‘.deleteRow‘,function () {
            $(‘#delModel‘).modal(‘show‘);
            var rowId=$(this).parent().parent().attr(‘nid‘);
            $(‘#delNid‘).val(rowId);//为选定标签设置值
            });
         }
    function confirm_del() {
        $(‘#btnConfirm‘).click(function () {
            var delID= $(‘#delNid‘).val();
            console.log(delID);
            $.ajax({
                url:‘/del_students‘,type:‘GET‘,data: {‘nid‘: delID},//ajax传过去的必须是字典
                success:function (arg) {
                   var dict=JSON.parse(arg);
                    if (dict.status){ $(‘tr[nid="‘+ delID+‘"]‘).remove();}
                    $(‘#delModel‘).modal(‘hide‘)}
                })
        })
    }
    function bindEvent() {
        $(‘#bntAdd‘).click(function () {$(‘#addModal_1‘).modal(‘show‘)//手动打开模态框
         });
    }
    function bindSave() {
        $(‘#btnSave‘).click(function () {
            var postData = {};
            $(‘#addModal_1‘).find(‘input,select‘).each(function () {
                console.log(this);//方便调试使用
                var value = $(this).val();
                var name = $(this).attr(‘name‘);
                if (name==‘gender‘) {
                    if ($(this).prop(‘checked‘)) {
                        postData[name] = value;
                    }
                }
                else {postData[name] = value;}
            });
            console.log(postData);
            $.ajax({
                url: ‘/add_students‘,type: ‘POST‘,data: postData,success: function (arg) {
                    var dict = JSON.parse(arg);
                    console.log(arg);
                    if(dict.status){
                        {#window.location.reload();#}
                        createRow(postData,dict.data);
                        $(‘#addModal_1‘).modal(‘hide‘)
                        }else {$(‘#errorMsg‘).text(dict.message);}
                    }
            })
        });
    }
    function createRow(postData,nid) {
        var tr = document.createElement(‘tr‘);
        $(tr).attr(‘nid‘,nid);
        var trId = document.createElement(‘td‘);
        trId.innerHTML = nid;
        $(tr).append(trId);
        var trStudentName = document.createElement(‘td‘);
        trStudentName.innerHTML = postData.StudentName;
        $(tr).append(trStudentName);
        var trAge = document.createElement(‘td‘);
        trAge.innerHTML = postData.age;
        $(tr).append(trAge);
        var trGender = document.createElement(‘td‘);
        if (postData.gender == ‘0‘) {
            trGender.innerHTML = ‘女‘;
        }
        else {
            trGender.innerHTML = ‘男‘;
        }
        $(tr).append(trGender);
        var trClass = document.createElement(‘td‘);
        text = $(‘select[name="class_id"]‘).find(‘option[value="‘ + postData.class_id + ‘"]‘).text();
        trClass.innerHTML = text;
        $(tr).append(trClass);
        $(‘#student_tb‘).append(tr);
        var troperation = document.createElement(‘td‘);
        troperation.innerHTML = ‘<a href="javascript:void(0)" class="glyphicon glyphicon-remove icon deleteRow" style="font-size: 18px"></a>n‘ +
            ‘<a href="javascript:void(0)" class="fa fa-pencil-square-o icon editRow" style="font-size: 20px"></a>‘;
        $(tr).append(troperation);
    }

</script>
</body>
</html>

View Code

?<2>学生管理页面

<3>添加学生模态框

2.students_ajax.py

# -*- coding:utf-8 -*-
from django.shortcuts import render,HttpResponse
from django.shortcuts import redirect
from student_manage.models import *
import json
def get_students(request):
    class_list=classes.objects.all()
    student_list = student.objects.all()
    return render(request,‘students.html‘,{‘student_list‘:student_list,‘class_list‘: class_list})
def add_students(request):
    response = {‘status‘: True,‘message‘: None,‘data‘:None}
    print(request.POST)
    try:
        Name = request.POST.get(‘StudentName‘)
        age = request.POST.get(‘age‘)
        gender = request.POST.get(‘gender‘)
        class_id = request.POST.get(‘class_id‘)
        print(Name,age,gender,class_id)
        obj=student.objects.create(StudentName=Name,age=age,gender=gender,cs_id=class_id)
        response[‘data‘]=obj.id
    except Exception as e:
        response[‘status‘]=False
        response[‘message‘]=‘用户输入错误‘
    result = json.dumps(response,ensure_ascii=False)
    print(result)
    return HttpResponse(result)
def del_students(request):
    response = {‘status‘: True}
    print(request.GET)
    try:
        nid=request.GET.get(‘nid‘)
        print(nid)
        student.objects.filter(id=nid).delete()
    except Exception  as e:
        response[‘status‘]=False
    print(response)
    #ajax参数arg只能接受字符串，故传到前段arg的参数要先转化为字符串
    return HttpResponse(json.dumps(response))
def edit_students(request):
    response = {‘status‘: True,‘message‘: None}
    try:
        nid=request.POST.get(‘nid‘)
        Name = request.POST.get(‘StudentName‘)
        age = request.POST.get(‘age‘)
        gender = request.POST.get(‘gender‘)
        class_id = request.POST.get(‘class_id‘)
        print(nid,Name,class_id)
        student.objects.filter(id=nid).update(StudentName=Name,cs_id=class_id)
    except Exception as e:
        response[‘status‘]=False
        response[‘message‘]=‘用户输入错误‘
    result = json.dumps(response,ensure_ascii=False)
    return HttpResponse(result)

View Code

3.summerize

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!