基于django的校园信息管理系统
Posted 元気な猫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于django的校园信息管理系统相关的知识，希望对你有一定的参考价值。
本项目基于django，前端使用了新url和模态对话框两种方式，使用了jquery和ajax技术，后端使用了mysql，将数据存入数据库，进行增删改查等操作。
本项目可以实现教师管理、班级管理、学生管理，在后台管理页面上，可以方便地进入每一个模块进行管理。
url部分
1 """database_do URL Configuration 2 3 The `urlpatterns` list routes URLs to views. For more information please see: 4 https://docs.djangoproject.com/en/2.2/topics/http/urls/ 5 Examples: 6 Function views 7 1. Add an import: from my_app import views 8 2. Add a URL to urlpatterns: path(‘‘, views.home, name=‘home‘) 9 Class-based views 10 1. Add an import: from other_app.views import Home 11 2. Add a URL to urlpatterns: path(‘‘, Home.as_view(), name=‘home‘) 12 Including another URLconf 13 1. Import the include() function: from django.urls import include, path 14 2. Add a URL to urlpatterns: path(‘blog/‘, include(‘blog.urls‘)) 15 """ 16 from django.contrib import admin 17 from django.urls import path 18 from app01 import views 19 20 urlpatterns = [ 21 path(‘admin/‘, admin.site.urls), 22 path(‘classes/‘,views.classes), 23 path(‘add/‘,views.add), 24 path(‘delete/‘,views.delete), 25 # path(‘de‘.views.delete), 26 path(‘edit/‘,views.edit), 27 path(‘student_manage/‘,views.student_manage), 28 path(‘student_add/‘,views.student_add), 29 path(‘student_edit/‘,views.student_edit), 30 path(‘modal_add_class/‘,views.modal_add_class), 31 path(‘modal_del_class/‘,views.modal_del_class), 32 path(‘modal_edit_class/‘, views.modal_edit_class), 33 path(‘modal_add_student/‘, views.modal_add_student), 34 path(‘modal_edit_student/‘, views.modal_edit_student), 35 path(‘modal_del_student/‘,views.modal_del_student), 36 path(‘teacher/‘,views.teacher), 37 path(‘add_teacher/‘,views.add_teacher), 38 path(‘edit_teacher/‘,views.edit_teacher), 39 path(‘layout/‘,views.layout), 40 path(‘login/‘, views.login) 41 42 ]
view部分
1 import pymysql 2 import json 3 from django.shortcuts import render,HttpResponse,redirect 4 from utils import sqlhelper 5 6 def classes(request): 7 8 #connect 9 conn=pymysql.connect(host=‘127.0.0.1‘,port=3306,user=‘root‘,passwd=‘root‘,db=‘dangdang‘) 10 cursor=conn.cursor() 11 cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) # 设置查询结果为字典格式 12 cursor.execute("select id,class_name from class") 13 class_list=cursor.fetchall()#结果为字典 14 cursor.close() 15 conn.close() 16 17 return render(request,‘classes.html‘,{‘class_list‘:class_list}) 18 19 def add(request): 20 if request.method==‘GET‘: 21 return render(request,‘add.html‘) 22 else: 23 24 v=request.POST.get(‘class_name‘) 25 if(len(v)>0): 26 conn=pymysql.connect(host=‘127.0.0.1‘,port=3306,user=‘root‘,passwd=‘root‘,db=‘dangdang‘) 27 cursor=conn.cursor(cursor=pymysql.cursors.DictCursor) 28 cursor.execute("insert into class(class_name) value(%s)",[v,]) 29 conn.commit() 30 cursor.close() 31 conn.close() 32 return redirect(‘/classes/‘) 33 else: 34 return render(request,‘add.html‘,{‘msg‘:‘班级名称不能为空‘}) 35 36 def delete(request): 37 # if request.method==‘GET‘: 38 # return render(request,‘delete.html‘) 39 # else: 40 print(‘==============‘) 41 print(request.GET) 42 delete_id=request.GET.get(‘id‘) 43 conn=pymysql.connect(host=‘127.0.0.1‘,user=‘root‘,passwd=‘root‘,db=‘dangdang‘) 44 cursor=conn.cursor(cursor=pymysql.cursors.DictCursor) 45 cursor.execute("delete from class where id=%s",[delete_id,]) 46 conn.commit() 47 cursor.close() 48 conn.close() 49 return redirect(‘/classes/‘) 50 51 def edit(request): 52 """ 53 #这一段主要是为了在跳转的页面上显示原始数据 54 先找到指定id的值，再拿出来，显示到浏览器上 55 sql语句是：select xxx from xxx where xxx 56 :param request: 57 :return: 58 """ 59 if request.method==‘GET‘: 60 # return render(request,‘edit.html‘) 61 print(‘|-----------以下是get-----------------|‘) 62 print(request.__dict__) 63 edit_id=request.GET.get(‘id‘) 64 edit_name=request.GET.get(‘class_name‘) 65 conn = pymysql.connect(host=‘127.0.0.1‘, port=3306, user=‘root‘, passwd=‘root‘, db=‘dangdang‘) 66 cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) 67 cursor.execute("select id,class_name from class where id=%s", [edit_id, ]) 68 result=cursor.fetchone() 69 print(result) 70 cursor.close() 71 conn.close() 72 return render(request,‘edit.html‘,{‘result‘:result}) 73 else: 74 conn = pymysql.connect(host=‘127.0.0.1‘, port=3306, user=‘root‘, passwd=‘root‘, db=‘dangdang‘) 75 edit_id = request.GET.get(‘id‘) 76 edit_name = request.POST.get(‘class_name‘) 77 print(‘|-----------以下是post-----------------|‘) 78 print(request.__dict__) 79 print(edit_name,edit_id) 80 cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) 81 cursor.execute("update class set class_name=%s where id=%s", [edit_name,edit_id,]) 82 conn.commit() 83 cursor.close() 84 conn.close() 85 return redirect(‘/classes/‘) 86 87 def student_manage(request): 88 """ 89 90 :param request: 91 :return: 92 """ 93 delete_id = request.GET.get(‘id‘) 94 conn = pymysql.connect(host=‘127.0.0.1‘, user=‘root‘, passwd=‘root‘, db=‘dangdang‘) 95 cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) 96 cursor.execute("SELECT student.id,student.`name`,student.classid,class.class_name FROM student LEFT JOIN class on student.classid=class.id") 97 student_list=cursor.fetchall() 98 cursor.close() 99 conn.close() 100 class_list=sqlhelper.getall(‘select id,class_name from class ‘,[]) 101 return render(request,‘student_manage.html‘,{‘student_list‘:student_list,‘class_list‘:class_list}) 102 103 def student_add(request): 104 if request.method==‘GET‘: 105 conn = pymysql.connect(host=‘127.0.0.1‘, user=‘root‘, passwd=‘root‘, db=‘dangdang‘) 106 cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) 107 cursor.execute("select id,class_name from class ") 108 class_list = cursor.fetchall() 109 cursor.close() 110 conn.close() 111 return render(request,‘student_add.html‘,{‘class_list‘:class_list}) 112 else: 113 classid=request.POST.get(‘class_id‘) 114 student_name=request.POST.get(‘name‘) 115 print(classid) 116 117 # cursor.execute("insert into student(`name`,classid)") 118 # conn.commit() 119 conn = pymysql.connect(host=‘127.0.0.1‘, user=‘root‘, passwd=‘root‘, db=‘dangdang‘) 120 cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) 121 122 cursor.execute("insert into student(`name`,classid)values(%s,%s)",[student_name,classid,]) 123 cursor.fetchone() 124 cursor.close() 125 conn.close() 126 127 # student_list = cursor.fetchall() 128 129 return redirect(‘/student_manage/‘) 130 131 def student_edit(request): 132 if request.method==‘GET‘: 133 # return render(request,‘edit.html‘) 134 print(‘|-----------以下是get-----------------|‘) 135 print(request.__dict__) 136 # global student_edit_id 137 student_edit_id=request.GET.get(‘id‘)#这个id来自于html中，使用get 138 print(student_edit_id) 139 student_edit_name=request.GET.get(‘class_name‘) 140 current_student_info=sqlhelper.getone("select id,`name`,classid from student where id=%s", [student_edit_id, ]) 141 # conn = pymysql.connect(host=‘127.0.0.1‘, port=3306, user=‘root‘, passwd=‘root‘, db=‘dangdang‘) 142 # cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) 143 # cursor.execute("select `name`,classid from student where id=%s", [student_edit_id, ]) 144 # 145 # #把student中的一条选中，发到html中 146 # """ 147 # result name,classid 148 # """ 149 # result=cursor.fetchone() 150 print(current_student_info) 151 # cursor.execute("select id,class_name from class") 152 # class_list = cursor.fetchall() 153 # cursor.close() 154 # conn.close() 155 class_list=sqlhelper.getall("select id,class_name from class",[]) 156 return render(request,‘student_edit.html‘,{‘current_student_info‘:current_student_info,‘class_list‘:class_list,‘student_id‘:student_edit_id}) 157 else: 158 student_edit_id = request.GET.get(‘id‘)#学号,也就是学生的唯一id 159 student_edit_classid=request.POST.get(‘classid‘) 160 student_edit_name = request.POST.get(‘student_name‘) 161 print(‘|-----------以下是post-----------------|‘) 162 print(student_edit_classid,student_edit_name,student_edit_id) 163 print(request.__dict__) 164 sqlhelper.modify(‘update student set `name`=%s,classid=%s where id=%s‘, [student_edit_name, student_edit_classid ,student_edit_id, ] ) 165 166 # conn = pymysql.connect(host=‘127.0.0.1‘, port=3306, user=‘root‘, passwd=‘root‘, db=‘dangdang‘) 167 # cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) 168 # 169 # cursor.execute("update student set `name`=%s,classid=%s where id=%s", [student_edit_name, student_edit_classid ,student_edit_id, ]) 170 # print(‘===================‘) 171 # conn.commit() 172 # cursor.close() 173 # conn.close() 174 return redirect(‘/student_manage/‘) 175 176 def modal_add_class(request): 177 # class_name=request.POST.get(‘class_name‘) 178 # msg=‘班级不能为空空哦‘ 179 # if(len(class_name)>0): 180 # sqlhelper.modify(‘insert into class(class_name)values(%s)‘,[class_name,]) 181 # return redirect(‘/classes/‘) 182 # else: 183 # # 184 # return render(request,‘classes.html‘,{‘msg‘:msg}) 185 class_name = request.POST.get(‘class_name‘) 186 if len(class_name) > 0: 187 print(‘=====等待插入=========‘) 188 sqlhelper.modify(‘insert into class (class_name)value(%s)‘, [class_name, ]) 189 return HttpResponse(‘ok‘) 190 print(‘=====插入成功=========‘) 191 return redirect(‘/classes/‘) 192 else: 193 return HttpResponse(‘班级标题不能为空‘) 194 195 def modal_del_class(request): 196 ret = {‘status‘: True, ‘message‘: None} 197 try: 198 nid = request.POST.get(‘nid‘) 199 print(‘接收到‘,nid) 200 content = request.POST.get(‘content‘) 201 print(‘准备删除======================‘) 202 sqlhelper.modify(‘delete from class where id=%s‘, [nid,]) 203 print(‘删除成功====================‘) 204 except Exception as e: 205 ret[‘status‘] = False 206 ret[‘message‘] = str(e) 207 import json 208 return HttpResponse(json.dumps(ret)) # 使用json将字典转变成字符串 209 210 def modal_edit_class(request): 211 ret={‘status‘:True,‘message‘:None} 212 try: 213 nid=request.POST.get(‘nid‘) 214 content=request.POST.get(‘content‘) 215 sqlhelper.modify(‘update class set class_name=%s where id=%s‘,[content,nid]) 216 except Exception as e: 217 ret[‘status‘]=False 218 ret[‘message‘]=str(e) 219 import json 220 return HttpResponse(json.dumps(ret))#使用json将字典转变成字符串 221 222 def modal_add_student(request): 223 ret={‘status‘:True,‘message‘:None} 224 name=request.POST.get(‘name‘) 225 class_id=request.POST.get(‘class_id‘) 226 # try: 227 # if(len(name)>0): 228 # sqlhelper.modify(‘insert into student(name,classid)values (%s,%s)‘,[name,class_id]) 229 # else: 230 # except Exception as e: 231 # ret[‘status‘]=False 232 # ret[‘message‘]=str(e) 233 # return HttpResponse(json.dumps(ret)) 234 if(len(name)>0): 235 sqlhelper.modify(‘insert into student(name,classid)values (%s,%s)‘,[name,class_id]) 236 return HttpResponse(‘ok‘) 237 else:return HttpResponse(‘error‘) 238 239 def modal_edit_student(request): 240 # ‘student_id‘:$(‘#edit_student_id‘).val(), 241 # ‘class_id‘:$(‘#edit_class_id‘).val(), 242 # ‘student_name‘:$(‘#edit_name‘).val}, 243 student_id=request.POST.get(‘student_id‘) 244 class_id=request.POST.get(‘class_id‘) 245 student_name=request.POST.get(‘student_name‘) 246 print(student_name,student_id,class_id) 247 sqlhelper.modify(‘update student set `name`=%s,classid=%s where id=%s‘,[student_name, class_id, student_id, ]) 248 print(‘=================okk=====================‘) 249 return HttpResponse(‘okk‘)#这一步非常重要，告诉前端，你好了 250 251 def modal_del_student(request): 252 student_id = request.POST.get(‘student_id‘) 253 class_id = request.POST.get(‘class_id‘) 254 student_name = request.POST.get(‘student_name‘) 255 print(‘+++++++*****已获取身份******++++++‘) 256 print(student_name, student_id, class_id) 257 sqlhelper.modify(‘delete from student where id=%s‘,[student_id,]) 258 return HttpResponse(‘ok‘) 259 260 def teacher(request): 261 sql=""" 262 263 SELECT teacher.id as tid,teacher.name, class.class_name FROM teacher 264 265 LEFT JOIN teacher_class on teacher.id=teacher_class.teacher_id 266 LEFT JOIN class on class.id=teacher_class.class_id 267 268 """ 269 teacher_list=sqlhelper.getall(sql,[]) 270 # print(teacher_list) 271 result = {} 272 for row in teacher_list: 273 274 tid = row[‘tid‘] 275 if tid in result: 276 result[tid][‘titles‘].append(row[‘class_name‘]) 277 else: 278 result[tid] = {‘tid‘: row[‘tid‘], ‘name‘: row[‘name‘], ‘titles‘: [row[‘class_name‘], ]} 279 # print(result) 280 return render(request,‘teacher.html‘,{‘teacher_list‘:result.values()}) 281 """ 282 list=[{‘tid‘: 1, ‘name‘: ‘刘玉杰‘, ‘class_name‘: ‘电科技161‘}, 283 {‘tid‘: 1, ‘name‘: ‘刘玉杰‘, ‘class_name‘: ‘电科技162‘}, 284 {‘tid‘: 1, ‘name‘: ‘刘玉杰‘, ‘class_name‘: ‘通信161‘}, 285 {‘tid‘: 2, ‘name‘: ‘梁瑞宇‘, ‘class_name‘: ‘电科技161‘}, 286 {‘tid‘: 2, ‘name‘: ‘梁瑞宇‘, ‘class_name‘: ‘电科技162‘}, 287 {‘tid‘: 2, ‘name‘: ‘梁瑞宇‘, ‘class_name‘: ‘计科技161‘}, 288 {‘tid‘: 3, ‘name‘: ‘潘子宇‘, ‘class_name‘: ‘电信161‘}, 289 {‘tid‘: 4, ‘name‘: ‘唐晓雨‘, ‘class_name‘: ‘电信161‘}, 290 {‘tid‘: 5, ‘name‘: ‘冯月芹‘, ‘class_name‘: ‘电信161‘}] 291 list.0[‘tid‘] 292 for i in range(0,len(list)) 293 294 295 """ 296 def add_teacher(request): 297 if request.method==‘GET‘: 298 class_list=sqlhelper.getall(‘select id,class_name from class‘,[]) 299 return render(request,‘add_teacher.html‘,{‘class_list‘:class_list}) 300 else: 301 data_list=[] 302 name=request.POST.get(‘name‘) 303 class_ids=request.POST.getlist(‘class_id‘) 304 print(name,class_ids) 305 obj=sqlhelper.SqlHelper() 306 #老师表中添加一条数据 307 teacher_id=obj.create(‘insert into teacher(name)value(%s)‘,[name,])#create has return value 308 for item in class_ids: 309 temp=(teacher_id,item,) 310 data_list.append(temp) 311 obj.multiple_modify(‘insert into teacher_class(teacher_id,class_id)values (%s,%s)‘,data_list) 312 return redirect(‘/teacher/‘) 313 314 def edit_teacher(request): 315 if request.method == ‘GET‘: 316 obj=sqlhelper.SqlHelper() 317 current_teacher_id=request.GET.get(‘nid‘) 318 print(current_teacher_id) 319 320 #班级列表 321 class_list =obj.getall(‘select id,class_name from class‘, []) 322 #当前教师信息 323 current_teacher_info=obj.getone(‘select id,name from teacher where id=%s‘,[current_teacher_id,]) 324 #老师-班级关系 325 class_id_list=obj.getall(‘select class_id from teacher_class where teacher_id=%s‘,[current_teacher_id,]) 326 327 print(‘当前老师任教的班级id‘,class_id_list) 328 329 print(‘当前老师信息‘,current_teacher_info) 330 print(‘班级列表‘,class_list) 331 temp = [] 332 for i in class_id_list: 333 temp.append(i[‘class_id‘]) 334 print(temp) 335 return render(request, ‘edit_teacher.html‘, {‘class_list‘: class_list,‘info‘:current_teacher_info,‘class_id_list‘:temp}) 336 else: 337 data_list=[] 338 teacher_id=request.GET.get(‘nid‘) 339 teacher_name=request.POST.get(‘name‘) 340 class_id=request.POST.getlist(‘class_id‘) 341 print(‘teacher id‘,teacher_id) 342 print(‘teacher_name‘,teacher_name) 343 print(‘classid‘,class_id) 344 obj=sqlhelper.SqlHelper() 345 obj.modify(‘update teacher set name=%s where id=%s‘,[teacher_name,teacher_id]) 346 obj.modify(‘delete from teacher_class where teacher_id=%s‘,[teacher_id,]) 347 for item in class_id: 348 temp=(teacher_id,item,) 349 data_list.append(temp) 350 obj=sqlhelper.SqlHelper() 351 obj.multiple_modify(‘insert into teacher_class(teacher_id,class_id)values (%s,%s)‘,data_list) 352 obj.close() 353 354 return redirect(‘/teacher/‘) 355 356 def layout(request): 357 tk=request.get_signed_cookie(‘ticket‘,salt=‘qst‘) 358 print(request.COOKIES) 359 if not tk: 360 return redirect(‘/login/‘) 361 362 else: 363 return render(request,‘layout.html‘) 364 365 366 367 368 369 def login(request): 370 if request.method==‘GET‘: 371 return render(request,‘login.html‘) 372 else: 373 username=request.POST.get(‘username‘) 374 password=request.POST.get(‘password‘) 375 if username==‘qst‘ and password==‘123‘: 376 obj=redirect(‘/layout/‘) 377 obj.set_signed_cookie(‘ticket‘,‘666‘,salt=‘qst‘)#设置签名，加盐 378 # obj.set_cookie(‘ticket‘,‘666‘,path=‘/layout/‘)# 379 """ 380 max_age: 存在10s，expire:具体的时间如2019/7/22/22:20:35 381 path:cookie的写入地址 382 383 384 """ 385 return obj 386 387 else: 388 return render(request,‘login.html‘) 389 390 391 392 """ 393 使用装饰器，不用每个都加登录代码 394 395 1.bootstrap响应式布局，@media() 396 2.栅格； 397 3.表格 398 4.导航条 399 5.路径导航 400 6.fontawesome 401 402 7.布局position：absolute 和relative 403 fixed:固定 404 405 406 407 8.overflow：超过某范围出现滚动条 408 9.当鼠标移动到xx样式的标签上时，其子标签.g应用 409 以下属性 410 .c1：hover .c2{ 411 } 412 413 10.django母版 414 <html> 415 ... 416 {%block s1%} {%endblock%} 417 ... 418 </html> 419 420 421 子板： 422 {%extends "layout.html"%} 423 ... 424 {%block s1%}<h1>fff</h1> {%endblock%} 425 ... 426 </html> 427 428 429 10. 430 cookie 保存在浏览器端的键值对 ，设置超时时间 431 发送http请求时，在请求头中携带当前所有可访问的cookie 432 以响应头响应 433 434 11. 435 obj.set_cookie(k1,v1,max_age)---request.COOKIES.get(..) 436 obj.set_signed_cookie（k1,v1,max_age,salt=‘‘)---request.get_signed_cookie(...) 437 obj=Httpresponse() 438 obj=render() 439 obj.set_cookie(k1,v1,max_age) 440 请求发给后台--后台回写cookie 441 442 443 1.布局代码 444 2.登录 cookie 装饰器 445 3.布局页面html css 446 447 448 """ 449 #day70 450 """ 451 project 452 -app01 自己创建的目录 453 -views.py 454 sqlhelper 封装sql操作 455 456 django 457 -路由 458 -视图 459 -模板 460 -orm 实现数据库操作（类 表：对象-行，pymsql连接数据库） 461 462 tornado 463 -路由 464 -视图 465 -模板 466 -自由 pymsql,sqlachemy 467 468 469 470 """
template部分
1.添加班级
1 <body background="2.jpg"> 2 3 <h1>添加班级</h1> 4 5 6 <form method="post" action="/add/"> 7 8 <p>班级名称：<input type="text" name="class_name" /></p> 9 <input type="submit" value="提交">{{ msg }} 10 {# <img src="2.jpg">#} 11 </form> 12 13 </body>
2.添加老师
1 <h1 style="color:orangered">添加教师信息</h1> 2 3 <form method="post" > 4 5 <p>教师姓名：<input type="text" name="name" /></p> 6 <p>任教班级 7 <select multiple name="class_id" > 8 {% for item in class_list %} 9 <option value="{{ item.id }}">{{ item.class_name }}</option> 10 {% endfor %} 11 </select> 12 </p> 13 <input type="submit" value="提交"> 14 15 </form>
3.班级管理（模态对话框）-增删改查
1 <h1 style="color: orangered">班级列表</h1> 2 3 {#<link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7-dist/css/bootstrap.css"/>#} 4 {#<div>#} 5 {# <a href="/add/" >添加</a>#} 6 {# <a href="/student_manage/" >点击此处管理学生</a>#} 7 {# <a onclick="showModal();" >点击使用对话框添加</a>#} 8 {# //<a onclick="show_modal_del()">点击使用对话框删除</a>#} 9 {#</div>#} 10 11 <div> 12 <a href="/add/" >添加</a> 13 <a href="/student_manage/" >点击此处管理学生</a> 14 <a href="/teacher/" class="btn btn-danger">点击此处管理教师</a> 15 <a id="add_class" >点击使用对话框添加</a> 16 {# //<a onclick="show_modal_del()">点击使用对话框删除</a>#} 17 </div> 18 19 <table class="table"> 20 <thead> 21 <tr> 22 <th>ID</th> 23 <th>班级名称</th> 24 <th>操作</th> 25 </tr> 26 </thead> 27 <tbody> 28 {% for row in class_list %} 29 <tr> 30 <td>{{ row.id }}</td> 31 <td>{{ row.class_name }}</td> 32 <td> 33 <a href="/edit/?id={{ row.id }}">编辑</a> 34 | 35 <a onclick="modal_edit(this);">点击使用对话框编辑</a> 36 | 37 <a href="/delete/?id={{ row.id }}" >删除</a> 38 | 39 <a onclick="modal_del(this)" >点击使用对话框删除</a> 40 {#****************href="/delete/?id={{ row.id }}#} 41 </td> 42 </tr> 43 {% endfor %} 44 </tbody> 45 </table> 46 <style> 47 .hide{ 48 display: none; 49 } 50 {#以下是遮罩层，shadow全占满 z-index越大，越外#} 51 .shadow{ 52 position: fixed; 53 left: 0; 54 right: 0; 55 top: 0; 56 bottom: 0; 57 background: #000; 58 opacity: 0.4; 59 z-index: 999; 60 } 61 .modal{ 62 position: fixed; 63 left: 50%; 64 top: 50%; 65 height: 300px; 66 width: 400px; 67 z-index: 1000; 68 background-color: azure; 69 margin-top: -200px; 70 margin-left: -200px; 71 } 72 </style> 73 <div id="shadow" class="shadow hide"></div> 74 75 <div> 76 <div id="modal_del" class="modal hide"> 77 <p>确定删除嘛？</p> 78 <p> 79 <input type="text" id="del_id" name="id" style="display: none"/> 80 81 </p> 82 <p> 83 <input type="button" value="我确定" onclick="del_ajaxsend()"> 84 <input type="button" value="点错了" onclick="hidemodal()"> 85 86 </p> 87 </div> 88 </div> 89 90 <div id="btn_add_modal" class="modal hide" > 91 92 <p> 93 <input type="text" id="class_name"/> 94 </p> 95 <input type="button" value="提交" onclick="ajaxSend();"/> 96 <input type="button" value="取消" id="btn_add_cancel" ;"/> 97 98 </div> 99 100 101 <div id="modal_edit" class="modal hide" > 102 <h1>编辑对话框</h1> 103 <p> 104 <input type="text" id="edit_id" name="id" style="display: none"/> 105 <input type="text" name="title" id="edit_title"/> 106 </p> 107 <input type="button" value="提交" onclick="edit_ajaxsend();"/> 108 <input type="button" value="取消" onclick="hidemodal();"/> 109 110 </div> 111 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 112 113 <script> 114 /* 115 下面是新加的 116 117 */ 118 $(‘#add_class‘).click(function () { 119 $(‘#shadow,#btn_add_modal‘).removeClass(‘hide‘) 120 }); 121 $(‘#btn_add_cancel‘).click(function () { 122 location.reload() 123 124 }) 125 126 function hidemodal() { 127 document.getElementById(‘shadow‘).classList.add(‘hide‘); 128 document.getElementById(‘modal‘).classList.add(‘hide‘); 129 document.getElementById(‘modal_edit‘).classList.add(‘hide‘); 130 document.getElementById(‘modal_del‘).classList.add(‘hide‘); 131 132 133 } 134 function showModal() { 135 document.getElementById(‘shadow‘).classList.remove(‘hide‘); 136 console.log(‘去掉了shadow‘) 137 document.getElementById(‘modal‘).classList.remove(‘hide‘); 138 console.log(‘去掉了‘) 139 140 141 } 142 function modal_edit(ths) { 143 document.getElementById(‘modal_edit‘).classList.remove(‘hide‘); 144 document.getElementById(‘shadow‘).classList.remove(‘hide‘); 145 /* 146 1.获取当前点击标签 147 2.当前标签的父标签 148 3.找父标签前面的两个，里面有id和class_name 149 4.获取当前行班级名称，赋值到编辑对话框中 150 151 */ 152 var row=$(ths).parent().prevAll(); 153 var content=$(row[0]).text(); 154 {#row[0].text() 班级名#} 155 {#row[1]#} 156 $(‘#edit_title‘).val(content); 157 var contentid=$(row[1]).text(); 158 $(‘#edit_id‘).val(contentid) 159 } 160 function ajaxSend() { 161 $.ajax({ 162 url: ‘/modal_add_class/‘, 163 type: ‘POST‘, 164 data: {‘class_name‘: $(‘#class_name‘).val()}, 165 success: function (data) { 166 console.log(data); 167 if (data == ‘ok‘) { 168 alert(‘提交成功‘) 169 location.href = ‘/classes/‘;//使用location.href进行跳转 170 } else { 171 alert(‘班级不能为空空哦！‘); 172 } 173 } 174 }) 175 } 176 function edit_ajaxsend() { 177 var nid=$(‘#edit_id‘).val(); 178 var content=$(‘#edit_title‘).val(); 179 {#console.log(nid,content)#} 180 $.ajax( 181 { 182 url:‘/modal_edit_class/‘, 183 type:‘post‘, 184 data:{‘nid‘:nid,‘content‘:content}, 185 success:function (arg) { 186 arg=JSON.parse(arg); 187 if(arg.status) 188 { 189 console.log(arg); 190 location.reload(); 191 } 192 else{ 193 alert(arg.message) 194 195 } 196 } 197 } 198 ) 199 200 } 201 function modal_del(ths){ 202 document.getElementById(‘modal_del‘).classList.remove(‘hide‘); 203 document.getElementById(‘shadow‘).classList.remove(‘hide‘); 204 /* 205 1.获取当前点击标签 206 2.当前标签的父标签 207 3.找父标签前面的两个，里面有id和class_name 208 4.获取当前行班级名称，赋值到编辑对话框中 209 210 */ 211 var row=$(ths).parent().prevAll(); 212 {#var content=$(row[0]).text();#} 213 {#row[0].text() 班级名#} 214 {#row[1]#} 215 {#$(‘#del_title‘).val(content);#} 216 var contentid=$(row[1]).text(); 217 $(‘#del_id‘).val(contentid) 218 219 } 220 221 function del_ajaxsend() { 222 var nid=$(‘#del_id‘).val(); 223 //var content=$(‘#edit_title‘).val(); 224 {#console.log(nid,content)#} 225 $.ajax( 226 { 227 url:‘/modal_del_class/‘, 228 type:‘post‘, 229 data:{‘nid‘:nid,}, 230 success:function (arg) { 231 arg=JSON.parse(arg); 232 if(arg.status) 233 { 234 console.log(arg); 235 location.reload(); 236 } 237 else{ 238 alert(arg.message) 239 240 } 241 } 242 } 243 ) 244 245 } 246 247 248 </script>
4.编辑班级（新url的方式）
1 <body> 2 {{ result.id }} 3 {{ result.class_name }} 4 5 <h1>编辑班级</h1> 6 7 <form method="post" action="/edit/?id={{ result.id }}"> 8 9 <p>班级名称：<input type="text" name="class_name" value="{{ result.class_name }}" /></p> 10 <input type="submit" value="提交"> 11 12 </form> 13 </body>
5.编辑老师（新url）
1 <h1 style="color:orangered">修改教师信息</h1> 2 3 <form method="POST" action="/edit_teacher/?nid={{ info.id }}"> 4 5 <p>教师姓名：<input type="text" name="name" value="{{ info.name }}"/></p> 6 <p>任教班级 7 <select multiple name="class_id" > 8 {% for item in class_list %} 9 {% if item.id in class_id_list %} 10 <option selected value="{{ item.id}}">{{ item.class_name }}</option> 11 {% else %} 12 <option value="{{ item.id}}">{{ item.class_name }}</option> 13 14 {% endif %} 15 {% endfor %} 16 </select> 17 </p> 18 <input type="submit" value="提交"> 19 20 </form>
6.后台管理
1 <head> 2 <meta charset="UTF-8"> 3 <title></title> 4 <link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7-dist/css/bootstrap.css" /> 5 <link rel="stylesheet" href="/static/plugin/font-awesome-4.7.0/css/font-awesome.css" /> 6 <link rel="stylesheet" href="/static/css/commons.css" /> 7 {% block css %}{% endblock %} 8 </head> 9 <body> 10 <div class="pg-header"> 11 <div style="text-align: center" class="logo left">学员后台管理</div> 12 <div class="avatar right" style="position: relative"> 13 <img style="width: 40px ;height: 40px" src="/static/1.jpg"> 14 <div class="user-info"> 15 <a>个人资料</a> 16 <a>注销</a> 17 </div> 18 </div> 19 <div class="rmenus right"> 20 <a><i class="fa fa-commenting-o" aria-hidden="true"></i> 消息</a> 21 <a><i class="fa fa-envelope-o" aria-hidden="true"></i> 邮件</a> 22 </div> 23 </div> 24 <div class="pg-body"> 25 <div class="menus"> 26 <a style="text-align: center" href="/classes/"> <i class="fa fa-futbol-o" aria-hidden="true"></i> 班级管理</a> 27 <a style="text-align: center" href="/student_manage/"><i class="fa fa-address-book" aria-hidden="true"></i> 学生管理</a> 28 <a style="text-align: center" href="/teacher/"><i class=‘ fa fa-battery-full‘></i> 老师管理</a> 29 </div> 30 <div class="content"> 31 <ol class="breadcrumb"> 32 <li><a href="#">首页</a></li> 33 <li><a href="#">班级管理</a></li> 34 <li class="active">添加班级</li> 35 </ol> 36 {% block xx %}{% endblock %} 37 38 </div> 39 </div> 40 {% block js %}{% endblock %} 41 <style> 42 body{ 43 margin: 0; 44 } 45 .left{ 46 float: left; 47 } 48 .right{ 49 float: right; 50 } 51 .hide{ 52 display: none; 53 } 54 .pg-header{ 55 height: 48px; 56 min-width: 1190px; 57 background-color: #204d74; 58 line-height: 48px; 59 } 60 .pg-header .logo{ 61 color: white; 62 font-size: 18px; 63 width: 200px; 64 65 border-right: 1px solid #8a6d3b; 66 } 67 .pg-header .rmenus a{ 68 display: inline-block; 69 padding: 0 15px; 70 color: white; 71 } 72 .pg-header .rmenus a:hover{ 73 background-color: #269abc; 74 } 75 .pg-header .avatar{ 76 padding:4 20px; 77 } 78 .pg-header .avatar img{ 79 border-radius: 50%; 80 } 81 .pg-header .avatar .user-info{ 82 display: none; 83 background-color: white; 84 border: 1px solid #dddddd; 85 position: absolute;width: 100px;top: 48px;right: 20px;color: white;z-index: 100; 86 text-align: center; 87 } 88 .pg-header .avatar:hover .user-info{ 89 display: block; 90 } 91 .pg-header .avatar .user-info a{ 92 display: block; 93 } 94 .menus{ 95 width: 200px; 96 position: absolute; 97 left: 0; 98 bottom: 0; 99 top: 48px; 100 border-right: 1px solid #dddddd; 101 background-color: #dddddd; 102 } 103 .content{ 104 position: absolute; 105 left: 200px; 106 right: 0; 107 top: 48px; 108 bottom: 0; 109 min-width: 990px; 110 overflow: scroll; 111 z-index: 99; 112 } 113 .pg-body .menus a{ 114 display: block; 115 padding: 10px 5px; 116 border-bottom: 1px solid #ffffff; 117 } 118 </style>
7.登录界面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <form method="post" action="/login/"> 10 <input type="text" name="username"> 11 <input type="password" name="password" > 12 <input type="submit" value="提交"> 13 14 15 16 </form> 17 18 19 </body> 20 </html>
8.添加学生（新url）
1 <body background="2.jpg"> 2 3 <h1 style="color:orangered">添加学生信息</h1> 4 5 <form method="post" action="/student_add/"> 6 {#如果不写action，就提交到当前url，在这里写不写都一样#} 7 8 <p>学生姓名：<input type="text" name="name" /></p> 9 {# <p>学生姓名：<input type="text" name="name"></p>#} 10 {# 这里用一个下拉框，只限定在这几个班级中#} 11 <p>学生班级 12 <select name="class_id"> 13 {# 以id为名接收数据#} 14 {% for row in class_list %} 15 {# 就好像1班是文强班，22班是奥赛班，提交到后台，直接提交班级号，而不提交班级名称，这是由数据库的结构决定的#} 16 <option value="{{ row.id }}">{{ row.class_name }}</option> 17 18 {% endfor %} 19 </select> 20 </p> 21 <input type="submit" value="提交"> 22 23 </form> 24 </body>
9.编辑学生
1 <body> 2 <h1>编辑学生信息</h1> 3 4 <form method="post" action="/student_edit/?id={{current_student_info.id }}" > 5 6 7 <p>学生姓名：<input type="text" name="student_name" value="{{ current_student_info.name }}" /></p> 8 <p>学生班级 9 <select name="classid"> 10 {% for row in class_list %} 11 {% if row.id == current_student_info.classid %} 12 {# 返回的班级的号码==返回的学生信息中的班级号码，则选中其中的那一条，在框中显示#} 13 14 15 <option selected value="{{ row.id }}">{{ row.class_name }}</option> 16 {% else %} 17 <option value="{{ row.id }}">{{ row.class_name }}</option> 18 19 {% endif %} 20 {% endfor %} 21 </select> 22 23 </p> 24 <input type="submit" value="提交"> 25 26 </form> 27 </body>
10.学生管理（模态对话框）
1 <h1 style="color: orangered">学生列表</h1> 2 3 <link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7-dist/css/bootstrap.css"/> 4 5 <div> 6 <a href="/student_add/" class="btn btn-info">添加学生信息</a> 7 {# //基于jQuery绑定#} 8 <a id="add_modal" class=" btn btn-primary">点击使用对话框添加学生</a> 9 </div> 10 <table class="table-striped table-bordered table table-hover"> 11 <thead> 12 <tr> 13 <th>ID</th> 14 <th>学生姓名</th> 15 <th>所属班级</th> 16 <th>操作</th> 17 </tr> 18 </thead> 19 <tbody> 20 {% for row in student_list %} 21 <tr> 22 <td>{{ row.id }}</td> 23 <td>{{ row.name }}</td> 24 <td class_id="{{ row.classid }}">{{ row.class_name }}</td> 25 <td> 26 <a class="modal_student_edit glyphicon glyphicon-pencil" ></a> 27 | 28 <a class="modal_del glyphicon glyphicon-trash"></a> 29 30 </td> 31 </tr> 32 {% endfor %} 33 </tbody> 34 </table> 35 36 <style> 37 .hide{ 38 display:none; 39 } 40 41 .shadow{ 42 43 position:fixed; 44 left:0; 45 right: 0; 46 bottom: 0; 47 top: 0; 48 background-color: black; 49 opacity: 0.5; 50 z-index: 999; 51 52 } 53 54 55 .add_modal{ 56 position:fixed; 57 left:50%; 58 top: 50%; 59 width:300px; 60 height: 400px; 61 background-color:azure; 62 z-index: 1000; 63 margin-left:-200px; 64 margin-top: -200px; 65 66 67 } 68 </style> 69 70 <div id="show_shadow" class="shadow hide " > 71 72 73 74 </div> 75 <div id="show_del" class="add_modal hide"> 76 <input id="btn_del" type="button" value="确定删除"> 77 {# <input id="">#} 78 <input id="btn_del_cancel" type="button" value="点错了"> 79 80 81 </div> 82 <div id="show_edit" class="add_modal hide" > 83 <p> 姓名:<input id="edit_name" type="text" name="name" placeholder="请输入姓名"> 84 <input id="edit_student_id" type="text" hidden value="0"> 85 </p> 86 <p> 87 班级：<select id="edit_class_id" name="classid"> 88 {% for row in class_list %} 89 <option id="edit_class" value="{{ row.id }}"> 90 {{ row.class_name }} 91 </option> 92 93 94 {% endfor %} 95 </select> 96 </p> 97 <p><input type="button" id="submit_edit" value="提交"></p> 98 <p><input type="button" id="cancel" value="我点错了"></p> 99 </div> 100 101 <div id="show_add" class="add_modal hide" > 102 <p> 姓名:<input id="add_name" type="text" name="name" placeholder="请输入姓名"> 103 </p> 104 <p> 105 班级：<select id="add_class_id" name="classid"> 106 {% for row in class_list %} 107 <option value="{{ row.id }}"> 108 {{ row.class_name }} 109 </option> 110 111 112 {% endfor %} 113 114 115 </select> 116 </p> 117 <input id="submitinfo" type="button" value="确认添加"> 118 <input id="cancel_1" type="button" value="我点错了"> 119 120 121 </div> 122 123 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 124 125 <script> 126 {#页面框架加载完成，自动执行#} 127 $(function () { 128 129 $(‘.modal_del‘).click(function () { 130 131 $(‘#show_shadow,#show_del‘).removeClass(‘hide‘); 132 var tds=$(this).parent().prevAll(); 133 var student_id=$(tds[2]).text(); 134 var student_name=$(tds[1]).text(); 135 var class_id=$(tds[0]).attr(‘class_id‘); 136 console.log(student_id,student_name,class_id); 137 $(‘#edit_name‘).val(student_name); 138 $(‘#edit_class_id‘).val(class_id); 139 $(‘#edit_student_id‘).val(student_id) 140 141 142 }); 143 $(‘#btn_del_cancel‘).click(function () { 144 location.reload() 145 }); 146 $(‘#btn_del‘).click(function () { 147 {# var tds=$(this).parent().prevAll();#} 148 {#var student_id=$(tds[2]).text();#} 149 {#var student_name=$(tds[1]).text();#} 150 {#var class_id=$(tds[0]).attr(‘class_id‘);#} 151 {#console.log(student_id,student_name,class_id);#} 152 153 $.ajax({ 154 155 url:‘/modal_del_student/‘, 156 type:‘POST‘, 157 data: { 158 ‘student_id‘: $(‘#edit_student_id‘).val(), 159 ‘class_id‘: $(‘#edit_class_id‘).val(), 160 ‘student_name‘: $(‘#edit_name‘).val(), 161 }, 162 success:function () { 163 alert(‘已删除‘); 164 location.reload(); 165 } 166 167 168 }) 169 170 171 172 173 }); 174 175 $(‘.modal_student_edit‘).click(function () { 176 $(‘#show_edit,#show_shadow‘).removeClass(‘hide‘); 177 var tds=$(this).parent().prevAll(); 178 var student_id=$(tds[2]).text(); 179 var student_name=$(tds[1]).text(); 180 var class_id=$(tds[0]).attr(‘class_id‘); 181 console.log(student_id,student_name,class_id); 182 $(‘#edit_name‘).val(student_name); 183 $(‘#edit_class_id‘).val(class_id); 184 $(‘#edit_student_id‘).val(student_id) 185 }); 186 187 $(‘#submit_edit‘).click(function () { 188 $.ajax( 189 190 { 191 url:‘/modal_edit_student/‘, 192 type:‘POST‘, 193 data: { 194 ‘student_id‘: $(‘#edit_student_id‘).val(), 195 ‘class_id‘: $(‘#edit_class_id‘).val(), 196 ‘student_name‘: $(‘#edit_name‘).val(), 197 }, 198 success:function () { 199 alert(‘ok‘); 200 location.reload() 201 202 } 203 204 205 } 206 207 208 209 210 ) 211 }); 212 $(‘#cancel‘).click(function () { 213 location.reload() 214 215 }); 216 $(‘#cancel_1‘).click(function () { 217 location.reload() 218 219 }); 220 221 $(‘#add_modal‘).click(function () { 222 $(‘#show_add,#show_shadow‘).removeClass(‘hide‘); 223 {#return false阻止默认事件发生#} 224 225 }); 226 227 $(‘#submitinfo‘).click(function () { 228 $.ajax({ 229 url:‘/modal_add_student/‘, 230 type:‘POST‘, 231 data:{name:$(‘#add_name‘).val(),class_id:$(‘#add_class_id‘).val()}, 232 success:function (arg) { 233 234 {#arg=JSON.parse(arg);#} 235 if(arg==‘ok‘){ 236 location.reload() 237 }else {alert(‘名字没写‘)} 238 239 240 } 241 }) 242 243 244 245 }) 246 247 248 249 }) 250 251 252 </script>
11.教师管理（模态对话框）
1 <h1 style="color: orangered">任课教师一览表</h1> 2 <a class="btn btn-danger" href="/add_teacher/">添加教师</a> 3 4 5 <link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7-dist/css/bootstrap.css"/> 6 7 <nav class="navbar navbar-default"> 8 <div class="container-fluid"> 9 <!-- Brand and toggle get grouped for better mobile display --> 10 <div class="navbar-header"> 11 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 12 <span class="sr-only">Toggle navigation</span> 13 <span class="icon-bar"></span> 14 <span class="icon-bar"></span> 15 <span class="icon-bar"></span> 16 </button> 17 <a class="navbar-brand" href="#">Brand</a> 18 </div> 19 20 <!-- Collect the nav links, forms, and other content for toggling --> 21 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 22 <ul class="nav navbar-nav"> 23 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 24 <li><a href="#">Link</a></li> 25 <li class="dropdown"> 26 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 27 <ul class="dropdown-menu"> 28 <li><a href="#">Action</a></li> 29 <li><a href="#">Another action</a></li> 30 <li><a href="#">Something else here</a></li> 31 <li role="separator" class="divider"></li> 32 <li><a href="#">Separated link</a></li> 33 <li role="separator" class="divider"></li> 34 <li><a href="#">One more separated link</a></li> 35 </ul> 36 </li> 37 </ul> 38 <form class="navbar-form navbar-left"> 39 <div class="form-group"> 40 <input type="text" class="form-control" placeholder="Search"> 41 </div> 42 <button type="submit" class="btn btn-default">Submit</button> 43 </form> 44 <ul class="nav navbar-nav navbar-right"> 45 <li><a href="#">Link</a></li> 46 <li class="dropdown"> 47 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 48 <ul class="dropdown-menu"> 49 <li><a href="#">Action</a></li> 50 <li><a href="#">Another action</a></li> 51 <li><a href="#">Something else here</a></li> 52 <li role="separator" class="divider"></li> 53 <li><a href="#">Separated link</a></li> 54 </ul> 55 </li> 56 </ul> 57 </div><!-- /.navbar-collapse --> 58 </div><!-- /.container-fluid --> 59 </nav> 60 <table class="table table-hover table-bordered table-striped"> 61 <thead> 62 <tr> 63 <th>ID</th> 64 <th>教师姓名</th> 65 <th>任教班级</th> 66 <th>操作</th> 67 </tr> 68 </thead> 69 <tbody> 70 {% for row in teacher_list %} 71 <tr> 72 <td>{{ row.tid }}</td> 73 <td>{{ row.name }}</td> 74 <td> 75 {% for item in row.titles %} 76 <span>{{item }}</span> 77 {% endfor %} 78 </td> 79 <td> 80 <a class="glyphicon glyphicon-pencil" href="/edit_teacher/?nid={{ row.tid }}">编辑</a> 81 | 82 <a class="glyphicon glyphicon-trash">删除</a> 83 </td> 84 </tr> 85 {% endfor %} 86 </tbody> 87 </table> 88 89 <style> 90 .hide{ 91 display: none; 92 } 93 {#以下是遮罩层，shadow全占满 z-index越大，越外#} 94 .shadow{ 95 position: fixed; 96 left: 0; 97 right: 0; 98 top: 0; 99 bottom: 0; 100 background: #000; 101 opacity: 0.4; 102 z-index: 999; 103 } 104 .modal{ 105 position: fixed; 106 left: 50%; 107 top: 50%; 108 height: 300px; 109 width: 400px; 110 z-index: 1000; 111 background-color: azure; 112 margin-top: -200px; 113 margin-left: -200px; 114 } 115 </style> 116 <div id="shadow" class="shadow hide"></div> 117 118 <div> 119 <div id="modal_del" class="modal hide"> 120 <p>确定删除嘛？</p> 121 <p> 122 <input type="text" id="del_id" name="id" style="display: none"/> 123 124 </p> 125 <p> 126 <input type="button" value="我确定" onclick="del_ajaxsend()"> 127 <input type="button" value="点错了" onclick="hidemodal()"> 128 129 </p> 130 </div> 131 </div> 132 133 <div id="btn_add_modal" class="modal hide" > 134 135 <p> 136 <input type="text" id="class_name"/> 137 </p> 138 <input type="button" value="提交" onclick="ajaxSend();"/> 139 <input type="button" value="取消" id="btn_add_cancel" /> 140 141 </div> 142 143 144 <div id="modal_edit" class="modal hide" > 145 <h1>编辑对话框</h1> 146 <p> 147 <input type="text" id="edit_id" name="id" style="display: none"/> 148 <input type="text" name="title" id="edit_title"/> 149 </p> 150 <input type="button" value="提交" onclick="edit_ajaxsend();"/> 151 <input type="button" value="取消" onclick="hidemodal();"/> 152 153 </div> 154 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 155 156 <script> 157 /* 158 下面是新加的 159 160 */ 161 $(‘#add_class‘).click(function () { 162 $(‘#shadow,#btn_add_modal‘).removeClass(‘hide‘) 163 }); 164 $(‘#btn_add_cancel‘).click(function () { 165 location.reload() 166 167 }) 168 169 function hidemodal() { 170 document.getElementById(‘shadow‘).classList.add(‘hide‘); 171 document.getElementById(‘modal‘).classList.add(‘hide‘); 172 document.getElementById(‘modal_edit‘).classList.add(‘hide‘); 173 document.getElementById(‘modal_del‘).classList.add(‘hide‘); 174 175 176 } 177 function showModal() { 178 document.getElementById(‘shadow‘).classList.remove(‘hide‘); 179 console.log(‘去掉了shadow‘) 180 document.getElementById(‘modal‘).classList.remove(‘hide‘); 181 console.log(‘去掉了‘) 182 183 184 } 185 function modal_edit(ths) { 186 document.getElementById(‘modal_edit‘).classList.remove(‘hide‘); 187 document.getElementById(‘shadow‘).classList.remove(‘hide‘); 188 /* 189 1.获取当前点击标签 190 2.当前标签的父标签 191 3.找父标签前面的两个，里面有id和class_name 192 4.获取当前行班级名称，赋值到编辑对话框中 193 194 */ 195 var row=$(ths).parent().prevAll(); 196 var content=$(row[0]).text(); 197 {#row[0].text() 班级名#} 198 {#row[1]#} 199 $(‘#edit_title‘).val(content); 200 var contentid=$(row[1]).text(); 201 $(‘#edit_id‘).val(contentid) 202 } 203 function ajaxSend() { 204 $.ajax({ 205 url: ‘/modal_add_class/‘, 206 type: ‘POST‘, 207 data: {‘class_name‘: $(‘#class_name‘).val()}, 208 success: function (data) { 209 console.log(data); 210 if (data == ‘ok‘) { 211 alert(‘提交成功‘) 212 location.href = ‘/classes/‘;//使用location.href进行跳转 213 } else { 214 alert(‘班级不能为空空哦！‘); 215 } 216 } 217 }) 218 } 219 function edit_ajaxsend() { 220 var nid=$(‘#edit_id‘).val(); 221 var content=$(‘#edit_title‘).val(); 222 {#console.log(nid,content)#} 223 $.ajax( 224 { 225 url:‘/modal_edit_class/‘, 226 type:‘post‘, 227 data:{‘nid‘:nid,‘content‘:content}, 228 success:function (arg) { 229 arg=JSON.parse(arg); 230 if(arg.status) 231 { 232 console.log(arg); 233 location.reload(); 234 } 235 else{ 236 alert(arg.message) 237 238 } 239 } 240 } 241 ) 242 243 } 244 function modal_del(ths){ 245 document.getElementById(‘modal_del‘).classList.remove(‘hide‘); 246 document.getElementById(‘shadow‘).classList.remove(‘hide‘); 247 /* 248 1.获取当前点击标签 249 2.当前标签的父标签 250 3.找父标签前面的两个，里面有id和class_name 251 4.获取当前行班级名称，赋值到编辑对话框中 252 253 */ 254 var row=$(ths).parent().prevAll(); 255 {#var content=$(row[0]).text();#} 256 {#row[0].text() 班级名#} 257 {#row[1]#} 258 {#$(‘#del_title‘).val(content);#} 259 var contentid=$(row[1]).text(); 260 $(‘#del_id‘).val(contentid) 261 262 } 263 264 function del_ajaxsend() { 265 var nid=$(‘#del_id‘).val(); 266 //var content=$(‘#edit_title‘).val(); 267 {#console.log(nid,content)#} 268 $.ajax( 269 { 270 url:‘/modal_del_class/‘, 271 type:‘post‘, 272 data:{‘nid‘:nid,}, 273 success:function (arg) { 274 arg=JSON.parse(arg); 275 if(arg.status) 276 { 277 console.log(arg); 278 location.reload(); 279 } 280 else{ 281 alert(arg.message) 282 283 } 284 } 285 } 286 ) 287 288 } 289 290 291 </script>
以上是关于基于django的校园信息管理系统的主要内容，如果未能解决你的问题，请参考以下文章