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


    一. 基于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=" 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>
    ' +
                '<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, age, gender, class_id)
            student.objects.filter(id=nid).update(StudentName=Name,age=age,gender=gender,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

    <1>序列化
        Python序列化
            字符串 = json.dumps(对象)    对象->字符串
            对象 = json.loads(字符串)    字符串->对象
           
        JavaScript:
            字符串 = JSON.stringify(对象) 对象->字符串
            对象 = JSON.parse(字符串)     字符串->对象
           
        应用场景:
            数据传输时,
                发送:字符串
                接收:字符串 -> 对象

    <2>ajax基础知识

    $.ajax({
            url: 'http//www.baidu.com',
            type: 'GET',
            data: {'k1':'v1'},
            success:function(arg){
                // arg是字符串类型
                // var obj = JSON.parse(arg)
            }
        })
    $.ajax({
            url: 'http//www.baidu.com',
            type: 'GET',
            data: {'k1':'v1'},
            dataType: 'JSON',
            success:function(arg){
                // arg是对象
            }
        })
    View Code

    <3>发送数据时data中的value  

    a. 只是字符串或数字
                $.ajax({
                    url: 'http//www.baidu.com',
                    type: 'GET',
                    data: {'k1':'v1'},
                    dataType: 'JSON',
                    success:function(arg){
                        // arg是对象
                    }
                })
    b. 包含数组
                $.ajax({
                    url: 'http//www.baidu.com',
                    type: 'GET',
                    data: {'k1':[1,2,3,4]},
                    dataType: 'JSON',
                    traditional: true,
                    success:function(arg){
                        // arg是对象
                    }
                })
                
    c. data内仍含有字典
        $.ajax({
                    url: 'http//www.baidu.com',
                    type: 'GET',
                    data: {'k1': JSON.stringify({}) },
                    dataType: 'JSON',
                    success:function(arg){
                        // arg是对象
                    }
                })
    View Code

     <4>事件委托

     $('要绑定标签的上级标签').on('click','要绑定的标签',function(){})
        $('要绑定标签的上级标签').delegate('要绑定的标签','click',function(){})
    <5>打开新页面的两种方式
     a.新URL方式:
            - 独立的页面
            - 数据量大或条目多         
     b. 对话框方式:
            - 数据量小或条目少
            -增加,编辑
            - Ajax: 考虑,当前页;td中自定义属性
            - 页面(直接刷新,或用ajax做,但代码量大)
                   
        
          
       
  • 相关阅读:
    css3样式二
    CSS3样式
    css基础样式四
    css样式基础三
    CSS样式基础二
    Css样式基础
    html(二)
    html(一)
    Linux 下 Memcached 缓存服务器安装配置
    java.lang.OutOfMemoryError: Java heap space解决方法
  • 原文地址:https://www.cnblogs.com/wuxunyan/p/9199132.html
Copyright © 2020-2023  润新知