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

1.students.html

<1>html页面文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.css">
  7.     <link rel="stylesheet" href="/static/plugin/font-awesome/css/font-awesome.css">
  8.     <style>
  9.         .icon {
  10.             margin: 0 15px;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <div style="padding: 20px 0; text-align: center;color: #2aabd2" ><h3>学生管理</h3></div>
  16.  
  17. <div class="container" style="width: 800px">
  18.     <div><button class="btn btn-info" id='bntAdd' style="margin-bottom: 20px;">添加学生</button></div>
  19.     <div>
  20.         <table class="table-bordered table-hover table table-striped">
  21.             <thead>
  22.                 <tr>
  23.                     <th>ID</th>
  24.                     <th>姓名</th>
  25.                     <th>年龄</th>
  26.                     <th>性别</th>
  27.                     <th>班级</th>
  28.                     <th>操作</th>
  29.                 </tr>
  30.             </thead>
  31.             <tbody id="student_tb">
  32.                 {% for row in student_list %}
  33.                 <tr nid="{{ row.id }}">
  34.                     <td na="nid">{{ row.id }}</td>
  35.                     <td na="StudentName">{{ row.StudentName }}</td>
  36.                     <td na="age">{{ row.age }}</td>
  37.                     {% if row.gender%}
  38.                         <td na="gender">男</td>
  39.                     {% else %}
  40.                         <td na="gender">女</td>
  41.                     {% endif %}
  42.                     <td na="class_id" cid="{{ row.cs_id }}">{{ row.cs.title }}</td>
  43.                     <td>
  44.                         <a href="javascript:void(0)" class="glyphicon glyphicon-remove icon deleteRow" style="font-size: 18px" ></a>
  45.                         <a href="javascript:void(0)" class="fa fa-pencil-square-o icon editRow" style="font-size: 20px"></a>
  46.                     </td>
  47.  
  48.                 </tr>
  49.                 {% endfor %}
  50.             </tbody>
  51.  
  52.         </table>
  53.     </div>
  54. </div>
  55.  
  56. <div class="modal fade" id="addModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  57.    <div class="modal-dialog">
  58.       <div class="modal-content">
  59.          <div class="modal-header">
  60.             <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;  </button>
  61.             <h4 class="modal-title" id="myModalLabel">添加学生信息 </h4>
  62.          </div>
  63.          <div class="modal-body">
  64.             <form class="form-horizontal" role="form">
  65.                <div class="form-group">
  66.                   <label for="studentname" class="col-sm-2 control-label">姓名</label>
  67.                   <div class="col-sm-10">
  68.                      <input type="text" class="form-control" name="StudentName" placeholder="StudentName">
  69.                   </div>
  70.                </div>
  71.                <div class="form-group">
  72.                   <label for="age" class="col-sm-2 control-label">年龄</label>
  73.                   <div class="col-sm-10">
  74.                      <input type="text" class="form-control" name="age" placeholder="age">
  75.                   </div>
  76.                </div>
  77.                <div class="form-group">
  78.                   <label for="gender" class="col-sm-2 control-label">性别</label>
  79.                   <div class="col-sm-10">
  80.                      <label class="radio-inline">
  81.                         <input type="radio" name="gender"  value="1" checked >男
  82.                      </label>
  83.                     <label class="radio-inline">
  84.                         <input type="radio" name="gender"  value="0">女
  85.                     </label>
  86.                   </div>
  87.                </div>
  88.                <div class="form-group">
  89.                   <label for="class" class="col-sm-2 control-label">班级</label>
  90.                   <div class="col-sm-10">
  91.                      <select  class="form-control" name="class_id">
  92.                          {% for item in class_list %}
  93.                               <option value={{ item.id }}>{{ item.title }}</option>
  94.                          {% endfor %}
  95.                      </select>
  96.  
  97.                   </div>
  98.                </div>
  99.  
  100.             </form>
  101.          </div>
  102.          <div class="modal-footer">
  103.              <span id="errorMsg" style="color: red;"></span>
  104.             <button type="button" class="btn btn-default" data-dismiss="modal">取消 </button>
  105.             <button type="button" id="btnSave" class="btn btn-primary">保存</button>
  106.          </div>
  107.       </div>
  108.    </div>
  109. </div>
  110.  
  111. <div class="modal fade" id="delModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  112.    <div class="modal-dialog">
  113.        <div class="alert alert-warning">
  114.            <div><input style="display: none" type="text" id="delNid" /></div>
  115.            <h3 style="text-align: center">是否删除学生信息？</h3>
  116.            <div class="modal-footer">
  117.                 <button type="button" class="btn btn-default" data-dismiss="modal">取消 </button>
  118.                 <button type="button" id="btnConfirm" class="btn btn-danger">确定</button>
  119.            </div>
  120.        </div>
  121.    </div>
  122. </div>
  123.  
  124. <div class="modal fade" id="editModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  125.    <div class="modal-dialog">
  126.       <div class="modal-content">
  127.          <div class="modal-header">
  128.             <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;  </button>
  129.             <h4 class="modal-title" id="myModalLabel">修改学生信息 </h4>
  130.          </div>
  131.          <div><input style="display: none" type="text" id="editNid" name="nid" /></div>
  132.          <div class="modal-body">
  133.             <form class="form-horizontal" role="form">
  134.                <div class="form-group">
  135.                   <label for="studentname" class="col-sm-2 control-label">姓名</label>
  136.                   <div class="col-sm-10">
  137.                      <input type="text" class="form-control" name="StudentName" placeholder="StudentName">
  138.                   </div>
  139.                </div>
  140.                <div class="form-group">
  141.                   <label for="age" class="col-sm-2 control-label">年龄</label>
  142.                   <div class="col-sm-10">
  143.                      <input type="text" class="form-control" name="age" placeholder="age" >
  144.                   </div>
  145.                </div>
  146.                <div class="form-group">
  147.                   <label for="gender" class="col-sm-2 control-label">性别</label>
  148.                   <div class="col-sm-10">
  149.                      <label class="radio-inline">
  150.                         <input type="radio" name="gender"  value="1" checked >男
  151.                      </label>
  152.                     <label class="radio-inline">
  153.                         <input type="radio" name="gender"  value="0">女
  154.                     </label>
  155.                   </div>
  156.                </div>
  157.                <div class="form-group">
  158.                   <label for="class" class="col-sm-2 control-label">班级</label>
  159.                   <div class="col-sm-10">
  160.                      <select  class="form-control" name="class_id">
  161.                          {% for item in class_list %}
  162.                               <option value={{ item.id }}>{{ item.title }}</option>
  163.                          {% endfor %}
  164.                      </select>
  165.  
  166.                   </div>
  167.                </div>
  168.  
  169.             </form>
  170.          </div>
  171.          <div class="modal-footer">
  172.              <span id="errorMsg" style="color: red;"></span>
  173.             <button type="button" class="btn btn-default" data-dismiss="modal">取消 </button>
  174.             <button type="button" id="saveEdit" class="btn btn-primary">保存</button>
  175.          </div>
  176.       </div>
  177.    </div>
  178. </div>
  179.  
  180. <script src="/static/jquery-3.1.1.js"></script>
  181. <script src="/static/plugin/bootstrap/js/bootstrap.js"></script>
  182. <script>
  183.     $(function () {
  184.         bindEdit();
  185.         saveEdit();
  186.         bindDel();
  187.         confirm_del();
  188.         bindEvent();
  189.         bindSave();
  190.         createRow();
  191.     });//加载完后自动执行上述函数,没有此步，jquery找到的标签绑定的事件和函数将失效
  192.     function bindEdit() {
  193.        $('#student_tb').on('click','.editRow',function () {
  194.            $('#editModel').modal('show');
  195.            $(this).parent().prevAll().each(function () {
  196.               var value=$(this).text();
  197.               var na=$(this).attr('na');
  198.               if(na=='class_id') {
  199.                   var cid=$(this).attr('cid');
  200.                   $('#editModel select[name=class_id]').val(cid);}
  201.               else if(na=='gender') {
  202.                   if(value=='男') {$('#editModel :radio[value="1"] ').prop('checked',true);}
  203.                   else {$('#editModel :radio[value="0"] ').prop('checked',true);}
  204.                   }
  205.               //else if(na=='age') {$('#editModel input[name="age"]').val(value) ;}
  206.               //else if(na=='StudentName') {$('#editModel input[name="StudentName"]').val(value) ;}
  207.               //else{$('#editModel input[name="nid"]').val(value)}
  208.                else {$("#editModel input[name='"+ na+"']").val(value)}
  209.               console.log(na,value)
  210.              })
  211.        });
  212.     }
  213.  
  214.     function saveEdit() {
  215.         $('#saveEdit').click(function () {
  216.             var postData={};
  217.             $('#editModel').find('input,select').each(function () {
  218.                 var name=$(this).attr('name');
  219.                 var value=$(this).val();
  220.                 if (name=='gender'){
  221.                     if($(this).prop('checked')) {postData[name]=value}
  222.                 }
  223.                 else {postData[name]=value}
  224.                 console.log(postData)
  225.             });
  226.             $.ajax({
  227.                 url:'/edit_students',
  228.                 type:'POST',
  229.                 data:postData,
  230.                 dataType:'JSON',//返回值要是JSON格式的
  231.                 success:function (arg) {
  232.                     console.log(arg);
  233.                     if (arg.status){window.location.reload();}
  234.                     else{alert(arg.message)}
  235.                 }
  236.             })
  237.         })
  238.     }
  239.  
  240.     function bindDel() {
  241.             //遇到a标签绑定事件失败的测试，绑定的标签添加onclick="bindDel(this)"
  242.             //{#console.log(ths);
  243.             //{#$('#delModel').modal('show');
  244.         $('#student_tb').on('click','.deleteRow',function () {
  245.             $('#delModel').modal('show');
  246.             var rowId=$(this).parent().parent().attr('nid');
  247.             $('#delNid').val(rowId);//为选定标签设置值
  248.             });
  249.          }
  250.     function confirm_del() {
  251.         $('#btnConfirm').click(function () {
  252.             var delID= $('#delNid').val();
  253.             console.log(delID);
  254.             $.ajax({
  255.                 url:'/del_students',
  256.                 type:'GET',
  257.                 data: {'nid': delID},//ajax传过去的必须是字典
  258.                 success:function (arg) {
  259.                    var dict=JSON.parse(arg);
  260.                     if (dict.status){ $('tr[nid="'+ delID+'"]').remove();}
  261.                     $('#delModel').modal('hide')}
  262.                 })
  263.         })
  264.     }
  265.     function bindEvent() {
  266.         $('#bntAdd').click(function () {$('#addModal_1').modal('show')//手动打开模态框
  267.          });
  268.     }
  269.     function bindSave() {
  270.         $('#btnSave').click(function () {
  271.             var postData = {};
  272.             $('#addModal_1').find('input,select').each(function () {
  273.                 console.log(this);//方便调试使用
  274.                 var value = $(this).val();
  275.                 var name = $(this).attr('name');
  276.                 if (name=='gender') {
  277.                     if ($(this).prop('checked')) {
  278.                         postData[name] = value;
  279.                     }
  280.                 }
  281.                 else {postData[name] = value;}
  282.             });
  283.             console.log(postData);
  284.             $.ajax({
  285.                 url: '/add_students',
  286.                 type: 'POST',
  287.                 data: postData,
  288.                 success: function (arg) {
  289.                     var dict = JSON.parse(arg);
  290.                     console.log(arg);
  291.                     if(dict.status){
  292.                         {#window.location.reload();#}
  293.                         createRow(postData,dict.data);
  294.                         $('#addModal_1').modal('hide')
  295.                         }else {$('#errorMsg').text(dict.message);}
  296.                     }
  297.             })
  298.         });
  299.     }
  300.     function createRow(postData,nid) {
  301.         var tr = document.createElement('tr');
  302.         $(tr).attr('nid',nid);
  303.         var trId = document.createElement('td');
  304.         trId.innerHTML = nid;
  305.         $(tr).append(trId);
  306.         var trStudentName = document.createElement('td');
  307.         trStudentName.innerHTML = postData.StudentName;
  308.         $(tr).append(trStudentName);
  309.         var trAge = document.createElement('td');
  310.         trAge.innerHTML = postData.age;
  311.         $(tr).append(trAge);
  312.         var trGender = document.createElement('td');
  313.         if (postData.gender == '0') {
  314.             trGender.innerHTML = '女';
  315.         }
  316.         else {
  317.             trGender.innerHTML = '男';
  318.         }
  319.         $(tr).append(trGender);
  320.         var trClass = document.createElement('td');
  321.         text = $('select[name="class_id"]').find('option[value="' + postData.class_id + '"]').text();
  322.         trClass.innerHTML = text;
  323.         $(tr).append(trClass);
  324.         $('#student_tb').append(tr);
  325.         var troperation = document.createElement('td');
  326.         troperation.innerHTML = '<a href="javascript:void(0)" class="glyphicon glyphicon-remove icon deleteRow" style="font-size: 18px"></a>\n' +
  327.             '<a href="javascript:void(0)" class="fa fa-pencil-square-o icon editRow" style="font-size: 20px"></a>';
  328.         $(tr).append(troperation);
  329.     }
  330.  
  331. </script>
  332. </body>
  333. </html>

<2>学生管理页面

<3>添加学生模态框

2.students_ajax.py

  1. # -*- coding:utf-8 -*-
  2. from django.shortcuts import render,HttpResponse
  3. from django.shortcuts import redirect
  4. from student_manage.models import *
  5. import json
  6. def get_students(request):
  7.     class_list=classes.objects.all()
  8.     student_list = student.objects.all()
  9.     return render(request, 'students.html', {'student_list':student_list, 'class_list': class_list})
  10. def add_students(request):
  11.     response = {'status': True, 'message': None,'data':None}
  12.     print(request.POST)
  13.     try:
  14.         Name = request.POST.get('StudentName')
  15.         age = request.POST.get('age')
  16.         gender = request.POST.get('gender')
  17.         class_id = request.POST.get('class_id')
  18.         print(Name, age, gender, class_id)
  19.         obj=student.objects.create(StudentName=Name, age=age, gender=gender, cs_id=class_id)
  20.         response['data']=obj.id
  21.     except Exception as e:
  22.         response['status']=False
  23.         response['message']='用户输入错误'
  24.     result = json.dumps(response, ensure_ascii=False)
  25.     print(result)
  26.     return HttpResponse(result)
  27. def del_students(request):
  28.     response = {'status': True}
  29.     print(request.GET)
  30.     try:
  31.         nid=request.GET.get('nid')
  32.         print(nid)
  33.         student.objects.filter(id=nid).delete()
  34.     except Exception  as e:
  35.         response['status']=False
  36.     print(response)
  37.     #ajax参数arg只能接受字符串，故传到前段arg的参数要先转化为字符串
  38.     return HttpResponse(json.dumps(response))
  39. def edit_students(request):
  40.     response = {'status': True, 'message': None}
  41.     try:
  42.         nid=request.POST.get('nid')
  43.         Name = request.POST.get('StudentName')
  44.         age = request.POST.get('age')
  45.         gender = request.POST.get('gender')
  46.         class_id = request.POST.get('class_id')
  47.         print(nid,Name, age, gender, class_id)
  48.         student.objects.filter(id=nid).update(StudentName=Name,age=age,gender=gender,cs_id=class_id)
  49.     except Exception as e:
  50.         response['status']=False
  51.         response['message']='用户输入错误'
  52.     result = json.dumps(response, ensure_ascii=False)
  53.     return HttpResponse(result)

3.summerize

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

<2>ajax基础知识

  1. $.ajax({
  2.         url: 'http//www.baidu.com',
  3.         type: 'GET',
  4.         data: {'k1':'v1'},
  5.         success:function(arg){
  6.             // arg是字符串类型
  7.             // var obj = JSON.parse(arg)
  8.         }
  9.     })
  10. $.ajax({
  11.         url: 'http//www.baidu.com',
  12.         type: 'GET',
  13.         data: {'k1':'v1'},
  14.         dataType: 'JSON',
  15.         success:function(arg){
  16.             // arg是对象
  17.         }
  18.     })

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

  1. a. 只是字符串或数字
  2.             $.ajax({
  3.                 url: 'http//www.baidu.com',
  4.                 type: 'GET',
  5.                 data: {'k1':'v1'},
  6.                 dataType: 'JSON',
  7.                 success:function(arg){
  8.                     // arg是对象
  9.                 }
  10.             })
  11. b. 包含数组
  12.             $.ajax({
  13.                 url: 'http//www.baidu.com',
  14.                 type: 'GET',
  15.                 data: {'k1':[1,2,3,4]},
  16.                 dataType: 'JSON',
  17.                 traditional: true,
  18.                 success:function(arg){
  19.                     // arg是对象
  20.                 }
  21.             })
  22.  
  23. c. data内仍含有字典
  24. 　　　　$.ajax({
  25.                 url: 'http//www.baidu.com',
  26.                 type: 'GET',
  27.                 data: {'k1': JSON.stringify({}) },
  28.                 dataType: 'JSON',
  29.                 success:function(arg){
  30.                     // arg是对象
  31.                 }
  32.             })

<4>事件委托

　$('要绑定标签的上级标签').on('click','要绑定的标签',function(){})
    $('要绑定标签的上级标签').delegate('要绑定的标签','click',function(){})
<5>打开新页面的两种方式
 a.新URL方式：
        - 独立的页面
        - 数据量大或条目多         
 b. 对话框方式：
        - 数据量小或条目少
        -增加，编辑
        - Ajax: 考虑，当前页；td中自定义属性
        - 页面（直接刷新，或用ajax做，但代码量大）
               
    

基于BootStrap,FortAweSome，Ajax的学生管理系统的更多相关文章

  1. 基于bootstrap + php +ajax datatable 插件的使用

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 下面是我学习datatables写的一个服务器端(php)分页例子,该功能包含的功能 ...

  2. daterangepicker+ bootstrap +php +ajax +datatable双日历的使用

    在练习基于bootstrap   datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图: 1.html <div class="panel& ...

  3. 放出一批学生管理系统jsp源码，部分有框架

    基于jsp+struts 2的学生管理系统eclipse - 源码码头   https://www.icodedock.com/article/25.html 基于jsp+mysql的JSP学生成绩管 ...

  4. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  5. jsp学习之基于mvc学生管理系统的编写

    mvc开发模式:分别是 model层 view层 Control层 在学生管理系统中,model层有学生实体类,数据访问的dao层,view层主要是用于显示信息的界面,Control层主要是servl ...

  6. 基于bootstrap的后台管理系统

    ace metro'nic 基于bootstrap的后台admin system ace [eis], 扑克牌中的A 表示 非常棒, 杰出, 顶好的... gallery: 画廊, 走廊; 在网页中常 ...

  7. Summernote – 基于 Bootstrap 的文本编辑器

    Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 AP ...

  8. 学生管理系统（SSM简易版）总结

    之前用 Servlet + JSP 实现了一个简易版的学生管理系统,在学习了 SSM 框架之后,我们来对之前写过的项目重构一下! 技术准备 为了完成这个项目,需要掌握如下技术: Java 基础知识 前 ...

  9. 饮冰三年-人工智能-Python-26 Django 学生管理系统

    背景:创建一个简单的学生管理系统,熟悉增删改查操作 一:创建一个Django项目(http://www.cnblogs.com/wupeiqi/articles/6216618.html) 1:创建实 ...

随机推荐

  1. （19）Spring Boot 添加JSP支持【从零开始学Spring Boot】

    [来也匆匆,去也匆匆,在此留下您的脚印吧,转发点赞评论: 您的认可是我最大的动力,感谢您的支持] 看完本文章您可能会有些疑问,可以查看之后的一篇博客: 81. Spring Boot集成JSP疑问[从 ...

  2. 【ACM】nyoj_143_第几是谁_201308071558

    第几是谁?时间限制:3000 ms  |  内存限制:65535 KB 难度:3描述 现在有"abcdefghijkl”12个字符,将其按字典序排列,如果给出任意一种排列,我们能说出这个排列 ...

  3. [bzoj1084][SCOI2005]最大子矩阵_动态规划_伪·轮廓线dp

    最大子矩阵 bzoj-1084 SCOI-2005 题目大意:给定一个n*m的矩阵,请你选出k个互不重叠的子矩阵使得它们的权值和最大. 注释:$1\le n \le 100$,$1\le m\le 2 ...

  4. eclipse重置页面恢复到最初布局状态

    eclipse重置页面恢复到最初布局状态 window->perspective->reset perspective

  5. POJ 1084

    WA了好久,第一次用重覆盖的模型做题.感觉这题有个陷阱,那就是当去掉某些边后,若因为这个边去掉而被破环的正方形还存在,那么就会造成覆盖不完全,WA. 所以,在去掉边后,必定有些正方形是不存在的,须重新 ...

  6. HDU 3007

    基本小圆覆盖模板题 #include <iostream> #include <algorithm> #include <cmath> using namespac ...

  7. 新手git: ssh: connect to host localhost port 22: Connection refused

    由于gitlab上要git pull或者git clone,可是每次都出现这个问题.之前偶尔出现这个问题.可是仅仅是偶尔.这是为什么呢?然后就開始搜索网上的解决方式了. 这个问题搜索网上非常多答案.可 ...

  8. Php socket数据编码

    bytes.php  字节编码类 /** * byte数组与字符串转化类 * @author * created on 2011-7-15 */ class bytes { /** * 转换一个str ...

  9. BZOJ3172 单词 Fail树

    题目大意:求一篇论文中每个单词分别在论文中出现多少次. 本题用AC自动机太慢,应该用Fail树将AC自动机中所有的Fail指针反向得到一个新树,这就是Fail树.对长度为x的字符串a和长度为y的字符串 ...

  10. linux系统在线搭建禅道

    1.先安装wget:yum -y install wget 2.下载安装禅道:[root@zhaowen ~]# wget http://dl.cnezsoft.com/zentao/9.0.1/Ze ...