学生管理单页面(增删改查)
前端页面：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css"> 7 <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css"> 8 <style> 9 .content{ 10 text-align: center; 11 } 12 th{ 13 width: 20px; 14 text-align: center; 15 } 16 </style> 17 </head> 18 <body> 19 20 <nav class="navbar navbar-default" role="navigation"> 21 <div class="container-fluid"> 22 <div class="navbar-header"> 23 <a class="navbar-brand" href="#">学生管理</a> 24 </div> 25 <ul class="nav navbar-nav navbar-right"> 26 <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li> 27 <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li> 28 </ul> 29 </div> 30 </nav> 31 32 <div class="container"> 33 34 <div style="padding: 15px"> 35 <!-- 头部搜索 --> 36 <a href="#" class="btn btn-info" style="width: 100px;" id="addbtn">添加</a> 37 {# <a href="#" class="btn btn-danger" style="width: 100px">删除</a>#} 38 <div class="input-group" style="float: right;width: 300px"> 39 <input type="text" class="form-control" placeholder="班级/姓名.." id="shows"> 40 <span class="input-group-btn"> 41 <button class="btn btn-default" type="button" onclick="shows()">搜索</button> 42 </span> 43 </div><!-- /input-group --> 44 </div> 45 46 <div class="content"> 47 48 <!-- 内容 --> 49 <table class="table table-bordered table-hover"> 50 <thead > 51 <tr> 52 <th>ID</th> 53 <th>姓名</th> 54 <th>年龄</th> 55 <th>性别</th> 56 <th>班级</th> 57 <th>操作</th> 58 </tr> 59 </thead> 60 <tbody id="tbody"> 61 62 {% for foo in post.object_list %} 63 <tr nid="{{ foo.id }}"> 64 <td na="nid">{{ foo.id }}</td> 65 <td na="user" n_ame="{{ foo.username }}">{{ foo.username }}</td> 66 <td na="age">{{ foo.age }}</td> 67 {% if foo.gender %} 68 <td na="gander">男</td> 69 {% else %} 70 <td na="gander">女</td> 71 {% endif %} 72 73 <td na="cls_id" cid="{{ foo.c.id }}">{{ foo.c.title }}</td> 74 <td> 75 <a href="#" class="fa fa-times delbtn" style="margin-right: 10px">删除</a> 76 <a href="#" class="fa fa-pencil-square-o editbtn">编辑</a> 77 </td> 78 </tr> 79 {% endfor %} 80 81 </tbody> 82 </table> 83 84 <!-- 分页 --> 85 {% include 'include/pager.html' %} 86 87 </div> 88 89 </div> 90 91 <!-- 增加 --> 92 <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" > 93 <div class="modal-dialog" role="document"> 94 <div class="modal-content"> 95 <div class="modal-header"> 96 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 97 <h4 class="modal-title" id="myModalLabel">创建学生</h4> 98 </div> 99 <div class="modal-body" > 100 101 <form class="form-horizontal" style="width: 400px"> 102 <!-- 姓名 --> 103 <div class="form-group"> 104 <label for="username" class="col-sm-2 control-label">姓名</label> 105 <div class="col-sm-10"> 106 <input type="text" class="form-control" name="username" placeholder="姓名"> 107 </div> 108 </div> 109 <!-- 年龄 --> 110 <div class="form-group"> 111 <label for="age" class="col-sm-2 control-label">年龄</label> 112 <div class="col-sm-10"> 113 <input type="text" class="form-control" name="age" placeholder="年龄"> 114 </div> 115 </div> 116 <!-- 性别 --> 117 <div class="form-group"> 118 <label for="gender" class="col-sm-2 control-label">性别</label> 119 <div class="col-sm-10"> 120 <label class="radio-inline"> 121 <input type="radio" name="gender" value="1" > 男 122 </label> 123 <label class="radio-inline"> 124 <input type="radio" name="gender" value="0"> 女 125 </label> 126 </div> 127 </div> 128 <!-- 班级 --> 129 <div class="form-group"> 130 <label for="cls" class="col-sm-2 control-label">班级</label> 131 <div class="col-sm-10"> 132 <select class="form-control" name="cls_id"> 133 {% for foo in cls_list %} 134 <option value="{{ foo.id }}">{{ foo.title }}</option> 135 {% endfor %} 136 </select> 137 </div> 138 </div> 139 <!-- end --> 140 </form> 141 142 </div> 143 <div class="modal-footer"> 144 <span id="errorMessage" style="color: red"></span> 145 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> 146 <button type="button" class="btn btn-primary" id="btn_save">保存</button> 147 </div> 148 </div> 149 </div> 150 </div> 151 <!-- 删除 --> 152 <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" > 153 <div class="alert alert-danger" role="alert" style="width: 400px;margin: 0 auto;margin-top: 200px"> 154 <div> 155 <h3 style="margin-bottom: 20px">将会执行以下操作！</h3> 156 <h4> 157 是否删除<p id="student_name" style="display: inline;font-size: 30px;color: red"></p>学员？ 158 <input type="text" id="delId" style="display: none"> 159 </h4> 160 <div style="margin-top: 20px"> 161 <button type="button" class="btn btn-info" onclick="hide()" style="margin-right: 12px">取消</button> 162 <button type="button" class="btn btn-danger" id="delConfirm">确认</button> 163 </div> 164 </div> 165 </div> 166 </div> 167 <!-- 编辑 --> 168 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" > 169 <div class="modal-dialog" role="document"> 170 <div class="modal-content"> 171 <div class="modal-header"> 172 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 173 <h4 class="modal-title" id="myModalLabel">编辑学生</h4> 174 </div> 175 <div class="modal-body" > 176 177 <form class="form-horizontal" style="width: 400px"> 178 <input type="text" name="nid" style="display: none"> 179 <!-- 姓名 --> 180 <div class="form-group"> 181 <label for="username" class="col-sm-2 control-label">姓名</label> 182 <div class="col-sm-10"> 183 <input type="text" class="form-control" name="username" placeholder="姓名"> 184 </div> 185 </div> 186 <!-- 年龄 --> 187 <div class="form-group"> 188 <label for="age" class="col-sm-2 control-label">年龄</label> 189 <div class="col-sm-10"> 190 <input type="text" class="form-control" name="age" placeholder="年龄"> 191 </div> 192 </div> 193 <!-- 性别 --> 194 <div class="form-group"> 195 <label for="gender" class="col-sm-2 control-label">性别</label> 196 <div class="col-sm-10"> 197 <label class="radio-inline"> 198 <input type="radio" name="gender" value="1" > 男 199 </label> 200 <label class="radio-inline"> 201 <input type="radio" name="gender" value="0"> 女 202 </label> 203 </div> 204 </div> 205 <!-- 班级 --> 206 <div class="form-group"> 207 <label for="cls" class="col-sm-2 control-label">班级</label> 208 <div class="col-sm-10"> 209 <select class="form-control" name="cls_id"> 210 {% for foo in cls_list %} 211 <option value="{{ foo.id }}">{{ foo.title }}</option> 212 {% endfor %} 213 </select> 214 </div> 215 </div> 216 <!-- end --> 217 </form> 218 219 </div> 220 <div class="modal-footer"> 221 <span id="erroreditMessage" style="color: red"></span> 222 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> 223 <button type="button" class="btn btn-primary" id="Edit_save">保存</button> 224 </div> 225 </div> 226 </div> 227 </div> 228 229 <script src="/static/js/jquery-3.1.1.js"></script> 230 <script src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script> 231 232 <!-- 自定义方法 --> 233 <script> 234 235 <!-- begin --> 236 $(function(){ 237 bindEvent(); 238 bindSave(); 239 bindDel(); 240 binddelConfirm(); 241 bindEdit(); 242 bindEditsave() 243 }); 244 <!-- 展现模态兑换框 --> 245 function bindEvent() { 246 $('#addbtn').click(function () { 247 $('#addModal').modal('show'); 248 }) 249 } 250 <!-- 保存 --> 251 function bindSave() { 252 var postData={}; 253 254 $('#btn_save').click(function () { 255 $('#addModal').find('input,select').each(function () { 256 //console.log($(this)[0]); 257 var v=$(this).val(); 258 var n=$(this).attr('name'); 259 if(n == 'gender'){ 260 if($(this).prop('checked')){ 261 postData[n]=v; 262 } 263 }else { 264 postData[n]=v; 265 } 266 }); 267 268 $.ajax({ 269 url:'{% url "students_add" %}', 270 type:'POST', 271 data:postData, 272 success:function (arg) { 273 //字符串转换字典 274 var dict=JSON.parse(arg); 275 276 if(dict.status){ 277 //creatRow(postData,dict.data); 278 window.location.reload(); 279 }else{ 280 $('#errorMessage').text(dict.message); 281 } 282 } 283 }) 284 }) 285 } 286 <!-- 创建行数据 --> 287 /* 288 function creatRow(postData,nid) { 289 var tr=document.createElement('tr'); 290 291 var trID=document.createElement('td'); 292 tdID.innerHTML=nid; 293 $(tr).append(tdID); 294 295 var trName=document.createElement('td'); 296 trName.innerHTML=postData.username; 297 $(tr).append(trName); 298 299 var trAge=document.createElement('td'); 300 trAge.innerHTML=postData.age; 301 $(tr).append(trAge); 302 303 var trGender=document.createElement('td'); 304 if (postData.gender=='1'){ 305 trGender.innerHTML='男'; 306 }else{ 307 trGender.innerHTML='女'; 308 } 309 $(tr).append(trGender); 310 311 var trCls=document.createElement('td'); 312 var text=$('select[name="cls_id"]').find('options[value="'+postData.cls_id+'"]').text(); 313 trCls.innerHTML=text; 314 $(tr).append(trCls); 315 316 $('#tbody').append(tr); 317 } 318 */ 319 <!-- 删除数据 --> 320 function bindDel() { 321 $('.delbtn').click(function () { 322 $('#delModal').modal('show'); 323 var rowId=$(this).parent().parent().attr('nid'); 324 $('#delId').val(rowId); 325 326 var rowName = $(this).parent().prev().prev().prev().prev().text(); 327 //console.log(rowName); 328 $('#student_name').text(rowName); 329 }) 330 } 331 <!-- 取消删除 --> 332 function binddelConfirm() { 333 $('#delConfirm').click(function () { 334 var rowID=$('#delId').val(); 335 336 $.ajax({ 337 url:'{% url "students_del" %}', 338 type:"POST", 339 data:{"id":rowID}, 340 success:function (arg) { 341 var dict=JSON.parse(arg); 342 if(dict.status){ 343 //window.location.reload(); 344 $('tr[nid="'+rowID+'"]').remove(); 345 } 346 $('#delModal').modal('hide'); 347 } 348 }) 349 }) 350 351 } 352 <!-- 编辑页面 --> 353 function bindEdit() { 354 $(".editbtn").click(function () { 355 $('#editModal').modal('show'); 356 var tds=$(this).parent().prevAll(); 357 $(this).parent().prevAll().each(function () { 358 var v=$(this).text(); 359 var n=$(this).attr("na"); 360 if (n=='cls_id'){ 361 var cid=$(this).attr("cid"); 362 $('#editModal select[name="cls_id"]').val(cid); 363 }else if(n=="gander"){ 364 if(v=="男"){ 365 $('#editModal :radio[value="1"]').prop('checked',true); 366 }else{ 367 $('#editModal :radio[value="0"]').prop('checked',true); 368 } 369 }else if(n=="age"){ 370 $("#editModal input[name='age']").val(v); 371 }else if(n=="user"){ 372 $("#editModal input[name='username']").val(v); 373 }else if(n=="nid"){ 374 $("#editModal input[name='nid']").val(v); 375 } 376 }); 377 378 379 380 }) 381 } 382 <!-- 编辑提交 --> 383 function bindEditsave() { 384 var postData={}; 385 $("#Edit_save").click(function () { 386 $('#editModal').find('input,select').each(function () { 387 //console.log($(this)[0]); 388 var v = $(this).val(); 389 var n = $(this).attr('name'); 390 if (n == 'gender') { 391 if ($(this).prop('checked')) { 392 postData[n] = v; 393 } 394 } else { 395 postData[n] = v; 396 } 397 }); 398 //console.log(postData); 399 $.ajax({ 400 url:'{% url "edit_student" %}', 401 type:'POST', 402 data:postData, 403 dataType:'JSON', 404 success:function (arg) { 405 if (arg.code=='200'){ 406 window.location.reload(); 407 }else if(arg.code=='500'){ 408 $('#erroreditMessage').text(arg.message); 409 410 } 411 } 412 }) 413 }); 414 } 415 416 function hide() { 417 $('#delModal').modal('hide'); 418 } 419 420 </script> 421 </body> 422 </html>
前端include页面：【分页】
1 {#翻页样式一#} 2 <ul class="pager"> 3 {% if post.has_previous %} 4 <li class="previous"><a href="{% url "students_show" %}?p={{ post.previous_page_number }}">上一页</a></li> 5 {% else %} 6 <li class="previous"><a href="#" style="color: #dddddd">上一页</a></li> 7 {% endif %} 8 9 {% for i in post.paginator.page_num_range %} 10 {% if i == post.number %} 11 <a href="{% url "students_show" %}?p={{ i }}" style="text-decoration: none;font-size: 30px">{{ i }}</a> 12 {% else %} 13 <a href="{% url "students_show" %}?p={{ i }}">{{ i }}</a> 14 {% endif %} 15 16 {% endfor %} 17 18 {% if post.has_next %} 19 <li class="next"><a href="{% url "students_show" %}?p={{ post.next_page_number }}">下一页</a></li> 20 {% else %} 21 <li class="next"><a href="#" style="color: #dddddd">下一页</a></li> 22 {% endif %} 23 24 25 26 27 28 </ul> 29 {#翻页样式二#} 30 <nav aria-label="Page navigation"> 31 <ul class="pagination"> 32 33 <li> 34 </a> 35 {% if post.has_previous %} 36 <a href="{% url "students_show" %}?p={{ post.previous_page_number }}" aria-label="Previous"><span aria-hidden="true" >上一页</span></a> 37 {% else %} 38 <a href="#" aria-label="Previous" style="color: #dddddd"><span aria-hidden="true" >上一页</span></a> 39 {% endif %} 40 </li> 41 42 {% for i in post.paginator.page_num_range %} 43 {% if i == post.number %} 44 <li><a href="{% url "students_show" %}?p={{ i }}" style="color: red">{{ i }}</a></li> 45 {% else %} 46 <li><a href="{% url "students_show" %}?p={{ i }}">{{ i }}</a></li> 47 {% endif %} 48 {% endfor %} 49 50 <li> 51 {% if post.has_next %} 52 <a href="{% url "students_show" %}?p={{ post.next_page_number }}" aria-label="Next"><span aria-hidden="true">下一页</span></a> 53 {% else %} 54 <a href="#" aria-label="Next" style="color: #dddddd"><span aria-hidden="true">下一页</span></a> 55 {% endif %} 56 </li> 57 </ul> 58 </nav>
数据库model：
1 import pymysql 2 pymysql.install_as_MySQLdb()
1 from django.db import models 2 3 # Create your models here. 4 class Classes(models.Model): 5 ''' 6 班级表 7 ''' 8 title=models.CharField(max_length=32,verbose_name='班级') 9 ct=models.ManyToManyField("Teachers",verbose_name='老师') 10 11 class Teachers(models.Model): 12 ''' 13 老师表 14 ''' 15 name=models.CharField(max_length=32,verbose_name='老师姓名') 16 17 class Students(models.Model): 18 ''' 19 学生表 20 ''' 21 username=models.CharField(max_length=32,verbose_name='学生姓名') 22 age=models.IntegerField('年龄') 23 gender=models.BooleanField('性别') 24 c=models.ForeignKey(Classes,on_delete='',verbose_name='班级')
路由分发url：
1 from django.contrib import admin 2 from django.urls import path,include 3 4 urlpatterns = [ 5 path('admin/', admin.site.urls), 6 path('Management/', include('Management.urls')), 7 ]
1 from django.contrib import admin 2 from django.urls import path 3 4 from Management.views import students 5 # from Managem 6 urlpatterns = [ 7 path('students_show/',students.students_show,name='students_show' ), 8 path('students_add/',students.students_add,name='students_add' ), 9 path('students_del/',students.students_del,name='students_del' ), 10 path('edit_student/',students.edit_student,name='edit_student' ), 11 ]
视图层views：
1 from django.shortcuts import render,redirect,HttpResponse 2 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger 3 from Management.models import * 4 import json 5 6 # django翻页拓展类 7 class CustomPaginator(Paginator): 8 def __init__(self,current_page,per_page_num,*args,**kwargs): 9 #当前页 10 self.current_page=int(current_page) 11 #最多显示的页码数量 12 self.per_page_num=int(per_page_num) 13 14 super(CustomPaginator,self).__init__(*args,**kwargs) 15 16 def page_num_range(self): 17 #总页数小于显示页码 18 print(self.num_pages) 19 if self.num_pages < self.per_page_num: 20 return range(1,self.num_pages+1) 21 #总页数很多 22 part = int(self.per_page_num/2) 23 if self.current_page <= part: 24 return range(1,self.per_page_num+1) 25 if (self.current_page+part) > self.num_pages: 26 return range(self.num_pages-self.per_page,self.num_pages+1) 27 return range(self.current_page-part,self.current_page+part+1) 28 29 # 显示翻页 30 def students_show(req): 31 cls_list=Classes.objects.all() 32 stu_list=Students.objects.all() 33 34 current_page = req.GET.get('p') 35 paginator = CustomPaginator(current_page,11,stu_list, 10) 36 try: 37 posts = paginator.page(current_page) 38 except PageNotAnInteger: 39 posts = paginator.page(1) 40 except EmptyPage: 41 posts = paginator.page(paginator.num_pages) 42 43 return render(req, "students/students.html", {"post":posts,"stu_list":stu_list,"cls_list":cls_list}) 44 45 # 添加学生 46 def students_add(req): 47 response={'status':True,'message':None,'data':None} 48 try: 49 username=req.POST.get('username') 50 age=req.POST.get('age') 51 gender=req.POST.get('gender') 52 c_id=req.POST.get('cls_id') 53 obj=Students.objects.create( 54 username=username, 55 age=age, 56 gender=gender, 57 c_id=c_id 58 ) 59 response['data']=obj.id 60 except Exception as e: 61 response['status']=False 62 response['message']='用户输入错误' 63 64 result=json.dumps(response,ensure_ascii=False) 65 return HttpResponse(result) 66 # 删除学生 67 def students_del(req): 68 response={'status':True} 69 try: 70 nid=req.POST.get('id') 71 Students.objects.filter(id=nid).delete() 72 except Exception as e: 73 response['status']=False 74 result = json.dumps(response, ensure_ascii=False) 75 return HttpResponse(result) 76 # 修改学生 77 def edit_student(req): 78 response={'code':200,'message':None} 79 try: 80 nid=req.POST.get('nid') 81 username=req.POST.get('username') 82 age=req.POST.get('age') 83 gender=req.POST.get('gender') 84 c_id=req.POST.get('cls_id') 85 Students.objects.filter(id=nid).update( 86 username=username, 87 age=age, 88 gender=gender, 89 c_id=c_id 90 ) 91 except Exception as e: 92 response['code']=500 93 response['message']=str(e) 94 return HttpResponse(json.dumps(response))
浙公网安备 33010602011771号