本项目基于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>
来源：oschina
链接：https://my.oschina.net/u/4324321/blog/3620973