Django--网页管理实例解析

此篇为代码流程的注释以及自己写的小项目的思路:

首先是项目的路由配置:

 1 urlpatterns = [
 2     # url(r'^admin/', admin.site.urls),
 3     url(r'^yemian/',yemian),
 4     url(r'^zuoye/',zuoye),
 5     url(r'^class/',views.class_list),
 6     url(r'^class_add/',views.class_add),
 7     url(r'^class_delete/',views.class_delete),
 8     url(r'^class_edit/',views.class_edit),
 9     url(r'^teacher/',tvi.teacher),
10     url(r'^tadd/',tvi.t_add),
11     url(r'^tedit/',tvi.t_edit),
12     url(r'^tdelete/',tvi.t_delete),
13     url(r'^student/',svi.student),
14     url(r'^sadd/',svi.s_add),
15     url(r'^sedit/',svi.s_edit),
16     url(r'^sdelete/',svi.s_delete),
17     url(r'^modal_add_student/', svi.modal_add_student),
18     url(r'^modal_add_teacher/', tvi.modal_add_teacher),
19 
20     url(r'^modal_add_class/', modal_add_class),
21 
22     url(r'^edit_modal_class/', views.edit_modal_add_class),
23     url(r'^modal_edit_student/', svi.modal_edit_student),
24 
25     url(r'^modal_delete_student/', svi.modal_delete_student),
26 
27     url(r'^modal_edit_teacher/', tvi.modal_edit_teacher),
28     url(r'^modal_delete_teacher/', tvi.modal_delete_teacher),
29 
30 ]
项目路由

路由的配置很重要,关乎于前端与后端的交互通道,路由的前面用正则匹配页面信息GET后的地址,然后进行后端函数的调用

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="stylesheet" href="/static/dist/css/bootstrap.css"><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script><script src="/static/dist/js/bootstrap.js"></script><title>Title</title><style>body {background-color: black;}.ya {background-color: white;/*border-radius: 2%;*/width: 450px;height: 250px;margin-top: 200px;margin-left: 30%;;position: fixed;}.btn-inf {color: white;background-color: black;border: black;}.btn-inf:active{color: white !important;background-color: #222222 !important;border:  black !important;}.btn-inf:link {color: white;background-color: black;border: black;}.btn-inf:hover {color: white;background-color: #333333;}.glyphicon {margin-right: 10px;}.yu{background-color:black ;color:white ;}.nuo{margin-top: 40px;margin-left:10px ;}.btn-sc{color: black;background-color: white;border: white;/*width: 300px;*//*height: 100px;*//*font-size: 50px;*/padding: 10px;position: fixed;top:40%;left: 40%;}.btn-sc:hover{color:white ;background-color: #5e5e5e;border: white;}.btn-lg{padding: 20px 32px;font-size: 36px;line-height: 2;border-radius: 12px;}</style>
</head>
<body>
<div class="container ya img-rounded hidden"><form class="form-horizontal nuo novalidate" action="/zuoye/" method="post"><div class="form-group" id="in1"><label for="inputEmail3" class="col-sm-2 control-label">用户名</label><div class="input-group col-sm-8"><span class="glyphicon glyphicon-user input-group-addon yu"></span><input type="text" class="form-control" id="inputEmail3" placeholder="用户名"aria-describedby="inputEmail3" name="username"><span class="glyphicon glyphicon-ok form-control-feedback hidden"  id="namer"></span><span class="glyphicon glyphicon-warning-sign form-control-feedback hidden"id="namew"></span><span class="glyphicon glyphicon-remove form-control-feedback hidden"  id="namec"></span></div></div><div class="form-group" id="in2"><label for="inputPassword3" class="col-sm-2 control-label">密码</label><div class="input-group col-sm-8"><span class="glyphicon glyphicon-lock input-group-addon yu"></span><input type="password" class="form-control" id="inputPassword3" placeholder="密码" name="password"><span class="glyphicon glyphicon-ok form-control-feedback hidden"  id="pwdr"></span><span class="glyphicon glyphicon-warning-sign form-control-feedback hidden"id="pwdw"></span><span class="glyphicon glyphicon-remove form-control-feedback hidden" id="pwdc"></span></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-8"><input type="submit" class="btn btn-inf btn-block" id="bu" value="登录"></div></div><div><h3 style="text-align: center">{{ error_msg }}</h3></div></form>
</div>
<div class="tubiao"><a href="javascript:void(0)" class="glyphicon glyphicon-tasks btn btn-sc btn-lg"> Login</a></div><script>
$("#inputEmail3").on("blur",function () {zhi=$("#inputEmail3").val();if (zhi.length==0){$("#namew").removeClass("hidden");$("#in1").addClass("has-warning")}if (zhi.length>15||(zhi.length<6&&zhi.length!=0)){$("#namec").removeClass("hidden");$("#in1").addClass("has-error")}if(zhi.length>=6&&zhi.length<15){$("#namer").removeClass("hidden");$("#in1").addClass("has-success")}});
$("#inputEmail3").on("focus",function () {$("#in1").removeClass("has-error");$("#in1").removeClass("has-success");$("#in1").removeClass("has-warning");$("#namew").addClass("hidden");$("#namec").addClass("hidden");$("#namer").addClass("hidden");
});$("#inputPassword3").on("blur",function () {pwd=$("#inputPassword3").val();if (pwd.length==0){$("#pwdw").removeClass("hidden");$("#in2").addClass("has-warning")}if (pwd.length>15||(pwd.length<6&&pwd.length!=0)){$("#pwdc").removeClass("hidden");$("#in2").addClass("has-error")}if(pwd.length>=6&&pwd.length<15) {$("#pwdr").removeClass("hidden");$("#in2").addClass("has-success")}});$("#inputPassword3").on("focus",function () {$("#in2").removeClass("has-error");$("#in2").removeClass("has-success");$("#in2").removeClass("has-warning");$("#pwdw").addClass("hidden");$("#pwdc").addClass("hidden");$("#pwdr").addClass("hidden");
});$(".btn-sc").on("click",function () {$(".btn-sc").addClass("hidden");$(".ya").removeClass("hidden");})
</script>
</body>
</html>
登录页面的html

登录页面的代码较简单,通过form表单的提交,将账号密码提交到后端进行判断,判断正确跳转网页,判断失败就提升错误信息,下面是相关的函数代码:

 1 def zuoye(request):
 2     global i
 3     i=i+1
 4     if request.method == "GET":
 5         return render(request, "zuoye.html")
 6     else:
 7         if request.POST.get("username") == "gaoshengyue" and request.POST.get("password") == "gsy121994":
 8             # 登陆成功
 9             return redirect("/class/")
10         else:
11             if i>2:
12              return render(request, "zuoye.html", {"error_msg": "输入错误"})
13             else:
14                 return render(request, "zuoye.html")
登录跳转后端py

函数中先进行判断,如果是get请求就开始用render渲染页面,render第一个是传的参数request,第二个是要渲染的页面,第三个是要返回给页面的值,也就是我们模板语言要通过

{{}}来取到的值,用字典的形式传。

用.POST.get来取值,传值的时候表单中的input有name所以字典的key就是这些name,对应的值就是传的值,然后进行判断,登录成功的话跳转到主页面class_list,用redirect来跳转

主页面class_listhtm代码如下:

  1 <!DOCTYPE html>
  2 <html lang="zh-CN"><head>
  3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7   <link rel="stylesheet" href="/static/dist/css/bootstrap.css">
  8     <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  9     <meta name="description" content="">
 10     <meta name="author" content="">
 11     <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
 12     <title>Dashboard Template for Bootstrap</title>
 13 
 14     <!-- Bootstrap core CSS -->
 15     <link href="/static/Dashboard%20Temp_files/bootstrap.css" rel="stylesheet">
 16 
 17     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 18     <link href="/static/Dashboard%20Temp_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
 19 
 20     <!-- Custom styles for this template -->
 21     <link href="/static/Dashboard%20Temp_files/dashboard.css" rel="stylesheet">
 22 
 23     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
 24     <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 25     <script src="/static/Dashboard%20Temp_files/ie-emulation-modes-warning.js"></script>
 26 
 27     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 28     <!--[if lt IE 9]>
 29       <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 30       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 31     <![endif]-->
 32   </head>
 33 <style>
 34   .col-centered {
 35                   float: none;
 36                   margin: 0 auto;
 37                 }
 38   .cd{
 39     background-color: black;
 40   }
 41 </style>
 42   <body>
 43 
 44     <nav class="navbar navbar-inverse navbar-fixed-top">
 45       <div class="container-fluid">
 46         <div class="navbar-header">
 47           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 48             <span class="sr-only">Toggle navigation</span>
 49             <span class="icon-bar"></span>
 50             <span class="icon-bar"></span>
 51             <span class="icon-bar"></span>
 52           </button>
 53           <a class="navbar-brand" href="#">Project name</a>
 54         </div>
 55         <div id="navbar" class="navbar-collapse collapse">
 56           <ul class="nav navbar-nav navbar-right">
 57             <li><a href="#">Dashboard</a></li>
 58             <li><a href="#">Settings</a></li>
 59             <li><a href="#">Profile</a></li>
 60             <li><a href="#">Help</a></li>
 61           </ul>
 62           <form class="navbar-form navbar-right">
 63             <input class="form-control" placeholder="Search..." type="text">
 64           </form>
 65         </div>
 66       </div>
 67     </nav>
 68 
 69     <div class="container-fluid">
 70       <div class="row">
 71         <div class="col-sm-3 col-md-2 sidebar">
 72 
 73           <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 74   <div class="panel panel-default">
 75     <div class="panel-heading  cd" role="tab" id="headingOne">
 76       <h4 class="panel-title">
 77         <a data-toggle="collapse"  href="/class/" id="classfl">
 78           班级
 79         </a>
 80       </h4>
 81     </div>
 82   </div>
 83   <div class="panel panel-default">
 84     <div class="panel-heading" role="tab" id="headingTwo">
 85       <h4 class="panel-title">
 86         <a class="collapsed"   href="/teacher/" >
 87           教师
 88         </a>
 89       </h4>
 90     </div>
 91   </div>
 92   <div class="panel panel-default">
 93     <div class="panel-heading" role="tab" id="headingThree">
 94       <h4 class="panel-title">
 95         <a class="collapsed"  href="/student/"  aria-controls="collapseThree">
 96           学生
 97         </a>
 98       </h4>
 99     </div>
100   </div>
101 </div>
102 
103         </div>
104         <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
105 
106 
107           <div class="panel panel-default">
108   <div class="panel-heading">Panel heading</div>
109   <div class="panel-body">
110     <div class="row">
111     <form class="navbar-form navbar-left col-sm-12" role="search">
112   <div class="form-group">
113     <input type="text" class="form-control" placeholder="搜索">
114   </div>
115   <button type="submit" class="btn btn-info">搜索</button>
116 
117 </form>
118         <a href="/class_add/" class="btn btn-success pull-right" style="margin-right: 15px;margin-top:8px ">网页添加</a>
119 <button type="submit" class="btn btn-success pull-right" style="margin-right: 15px;margin-top:8px " data-toggle="modal" data-target="#myModal">添加</button>
120       </div>
121     <div class="modal fade j" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
122   <div class="modal-dialog j" role="document">
123     <div class="modal-content j">
124       <div class="modal-header">
125         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
126         <h4 class="modal-title" id="myModalLabel">信息填写</h4>
127       </div>
128       <div class="modal-body">
129           <form method="post">
130         <div class="form-group">
131     <label for="d1">姓名</label>
132     <input type="text" class="hui form-control" id="d1">
133             <span id="error-msg"></span>
134 <div class="modal-footer">
135     <button class="an btn btn-default" data-dismiss="modal" >Close</button>
136     <button id="modal-submitt" class="anq btn btn-primary" type="button" >提交</button>
137       </div>
138         </div>
139               </form>
140       </div>
141 
142     </div>
143   </div>
144 </div>
145 
146 
147 {#  <edit_modal>#}
148     <div class="modal fade j" id="edit_myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
149   <div class="modal-dialog j" role="document">
150     <div class="modal-content j">
151       <div class="modal-header">
152         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
153         <h4 class="modal-title" id="myModalLabel">信息填写</h4>
154       </div>
155       <div class="modal-body">
156           <form>
157 
158         <div class="form-group">
159             <input  type="text" style="display: none" id="ed2">
160     <label for="ed1">班级名</label>
161     <input type="text" class="hui form-control" id="ed1">
162             <span id="edit_error-msg"></span>
163 <div class="modal-footer">
164     <button class="an btn btn-default" data-dismiss="modal" >Close</button>
165     <button id="edit_modal-submitt" class="anq btn btn-primary" type="button" >提交</button>
166       </div>
167         </div>
168               </form>
169       </div>
170 
171     </div>
172   </div>
173 </div>
174 {#  </edit_modal>#}
175      <div class="table-responsive">
176             <table class="table table-striped table-bordered">
177               <thead>
178                 <tr>
179                   <th class="col-sm-1">#</th>
180                   <th>班级名</th>
181                   <th>操作</th>
182                 </tr>
183               </thead>
184               <tbody>
185               {% for class in class_list %}
186                 <tr>
187                   <td class="col-sm-1">{{ class.cid}}</td>
188                   <td>{{ class.cname }}</td>
189                   <td class="col-sm-6 ">
190                       <a href="/class_delete/?class_id={{ class.cid }}" class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</a>
191                             <a href="/class_edit/?class_id={{ class.cid }}" class="w btn btn-success glyphicon glyphicon-pencil">编辑</a>
192                   <button class="wm btn btn-success glyphicon glyphicon-pencil">modal编辑</button>
193                   </td>
194 
195                 </tr>
196                 {% endfor %}
197               </tbody>
198             </table>
199           </div>
200 
201 
202     <nav aria-label="Page navigation" class=" pull-right">
203   <ul class="pagination">
204     <li>
205       <a href="#" aria-label="Previous">
206         <span aria-hidden="true">&laquo;</span>
207       </a>
208     </li>
209     <li><a href="#">1</a></li>
210     <li><a href="#">2</a></li>
211     <li><a href="#">3</a></li>
212     <li><a href="#">4</a></li>
213     <li><a href="#">5</a></li>
214     <li>
215       <a href="#" aria-label="Next">
216         <span aria-hidden="true">&raquo;</span>
217       </a>
218     </li>
219   </ul>
220 </nav>
221         </div>
222       </div>
223     </div>
224   </div>
225     </div>
226 
227 
228     <!-- Bootstrap core JavaScript
229     ================================================== -->
230     <!-- Placed at the end of the document so the pages load faster -->
231     <script src="/static/Dashboard%20Temp_files/jquery.js"></script>
232     <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
233     <script src="/static/Dashboard%20Temp_files/bootstrap.js"></script>
234     <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
235     <script src="/static/Dashboard%20Temp_files/holder.js"></script>
236     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
237     <script src="/static/Dashboard%20Temp_files/ie10-viewport-bug-workaround.js"></script>
238 
239 <script>
240 
241 
242       $("#modal-submitt").on("click", function () {
243 {#        $("#myModal form").submit();#}
244             var className = $("#d1").val();
245             console.log(className);
246 {#          用AJAX不刷新页面提交到后端#}
247           $.ajax({
248               url: "/modal_add_class/",
249               type: "post",
250               data: {"classname": className},
251               success: function (data) {
252                   if (data === "OK"){
253 {#                                        if (data.length != 0) {#}
254 {#                      var clasData = JSON.parse(data);#}
255 {#                      var newTr = document.createElement("tr");#}
256 {#                      $(newTr).append("<td>" + clasData["id"] + "</td>");#}
257 {#                      $(newTr).append("<td>" + clasData["name"] + "</td>");#}
258 {#                      $("td:last").clone().appendTo($(newTr));#}
259 {#                      $(newTr).appendTo("tbody");#}
260                       location.href="/class/";
261                   }else {
262                       $("#error-msg").text(data).parent().parent().addClass("has-error");
263                   }
264               }
265           })
266       });
267 
268        $(".wm").on("click", function () {
269            $tdz=$(this).parent().parent().children();
270            ce_id=$($tdz[0]).text();
271            ce_name=$($tdz[1]).text();
272         $("#edit_myModal").modal("show");
273          $("#ed2").val(ce_id);
274          $("#ed1").val(ce_name);
275 {#           .find("#ed1").val(ce_name)#}
276       });
277        $("#edit_modal-submitt").on("click",function () {
278            var class_d=$("#ed2").val();
279            var class_n=$("#ed1").val();
280            $.ajax({
281                url:"/edit_modal_class/",
282                type:"post",
283                data:{"class_d":class_d,"class_n":class_n},
284                success:function (data) {
285                 if (data==='OK'){
286                     location.reload()
287                 }
288                 else {
289                     $("#edit_error-msg").text(data).parent().parent().addClass("has-error");
290                 }
291                }
292            })
293        })
294 
295 </script>
296 </body></html>
主页面班级管理html

主页面的渲染上,内容展示的部分,用到了模板语言,循环将后端从数据库拿出来的数据进行展示,同时添加的话通过给添加按钮绑定时间,触发模态框,然后再给modal的sumbit按钮绑定获取值并且提交给后端的事件,通过ajax来向后端发送数据。

这里要详细说一下ajax部分:

$.ajax({
url: "/modal_add_class/",                                             //这里是跳转的url,通过后端路由,调用modal添加数据的函数
type: "post",                                                                  //传送给后端的命令属性
data: {"classname": className},                              //ajax传给后端的值,字典形式,不能穿列表如果要列表的话要先json.stringify来转换成字符串,后端再通过json.loads来转换
success: function (data) {
if (data === "OK"){                                                     //data为后端return会前端的值,后端一般会使用HttpResponse来返回,也可以是字典。

location.href="/class/";                                            //跳转的页面也可以location.reload()来直接跳转回本页面
}else {
$("#error-msg").text(data).parent().parent().addClass("has-error");                       //这里是添加错误信息,has-error是bootstrap中错误信息的样式
}
}
})

取值的话还是在主页面通过jQuery选择器来取值,下面贴的是后端再班级管理页面的代码:

 1 def student(request):
 2 
 3    conn=pymysql.connect(
 4        host='127.0.0.1',port=3306,
 5        user='root',password='',db='day66',charset='utf8'
 6 
 7    )
 8    cursor=conn.cursor(cursor=pymysql.cursors.DictCursor)
 9    cursor.execute("select student.id,student.sname,class.cname,student.class_id from student INNER JOIN  class on student.class_id = class.cid")
10    student_list=cursor.fetchall()
11    cursor.execute("select cid,cname from class")
12    cs_list = cursor.fetchall()
13    cursor.close()
14    conn.close()
15    return  render(request,'student.html',{'student_list':student_list,"cs_list":cs_list})
主页面渲染

通过连接数据库,然后通过sql语句来获取数据库中的班级信息值,然后传给前端,前端再通过模板语言来进行展示

 1 def modal_add_class(request):
 2     print(request.method)
 3     if request.method == "POST":
 4         print()
 5         new_class_name = request.POST.get("classname")
 6         if new_class_name:
 7             conn = pymysql.connect(
 8                 host='127.0.0.1', port=3306,
 9                 user='root', password='', db='day66', charset='utf8'
10             )
11             cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
12             cursor.execute("insert into class(cname) VALUES (%s)", [new_class_name,])
13             conn.commit()
14             cursor.close()
15             conn.close()
16             return HttpResponse("OK")
17         else:
18             error = "班级名称不能为空"
19             return HttpResponse(error)
主页面添加班级信息

这部分函数通过ajax传过来的值,用.POST.get(字典的ey)的方式获取,然后用sql语句insert into后端的数据库中,然后返回前端OK,前端判断接受回的消息是OK,就刷新页面,这样主页面再次回到渲染函数,渲染出来的就是包括新添加数据的页面了。

接下来是班级信息的编辑:

 1 def edit_modal_add_class(request):
 2     if request.method == "POST":
 3         new_class_d = request.POST.get("class_d")
 4         new_class_n = request.POST.get("class_n")
 5         if new_class_n:
 6             conn = pymysql.connect(
 7                 host='127.0.0.1', port=3306,
 8                 user='root', password='', db='day66', charset='utf8'
 9             )
10             cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
11             cursor.execute("update class set cname=%s where cid=%s ", [new_class_n,new_class_d ])
12             conn.commit()
13             cursor.close()
14             conn.close()
15             return HttpResponse("OK")
16         else:
17             error = "班级名称不能为空"
18             return HttpResponse(error)
主页面编辑班级信息

这部分函数,同样是接受ajax传来的值,然后用sql语句的update来进行数据的更新

下面是学生信息部分的添加、编辑、与删除。

  1 <!DOCTYPE html>
  2 <html lang="zh-CN"><head>
  3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7   <link rel="stylesheet" href="/static/dist/css/bootstrap.css">
  8     <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  9     <meta name="description" content="">
 10     <meta name="author" content="">
 11     <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
 12     <title>Dashboard Template for Bootstrap</title>
 13 
 14     <!-- Bootstrap core CSS -->
 15     <link href="/static/Dashboard%20Temp_files/bootstrap.css" rel="stylesheet">
 16 
 17     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 18     <link href="/static/Dashboard%20Temp_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
 19      <link href="/static/sweetalert/sweetalert.css" rel="stylesheet">
 20 
 21     <!-- Custom styles for this template -->
 22     <link href="/static/Dashboard%20Temp_files/dashboard.css" rel="stylesheet">
 23 
 24     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
 25     <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 26     <script src="/static/Dashboard%20Temp_files/ie-emulation-modes-warning.js"></script>
 27 
 28     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 29     <!--[if lt IE 9]>
 30       <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 31       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 32     <![endif]-->
 33   </head>
 34 <style>
 35   .col-centered {
 36                   float: none;
 37                   margin: 0 auto;
 38                 }
 39   .cd{
 40     background-color: black;
 41   }
 42 </style>
 43   <body>
 44 
 45     <nav class="navbar navbar-inverse navbar-fixed-top">
 46       <div class="container-fluid">
 47         <div class="navbar-header">
 48           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 49             <span class="sr-only">Toggle navigation</span>
 50             <span class="icon-bar"></span>
 51             <span class="icon-bar"></span>
 52             <span class="icon-bar"></span>
 53           </button>
 54           <a class="navbar-brand" href="#">Project name</a>
 55         </div>
 56         <div id="navbar" class="navbar-collapse collapse">
 57           <ul class="nav navbar-nav navbar-right">
 58             <li><a href="#">Dashboard</a></li>
 59             <li><a href="#">Settings</a></li>
 60             <li><a href="#">Profile</a></li>
 61             <li><a href="#">Help</a></li>
 62           </ul>
 63           <form class="navbar-form navbar-right">
 64             <input class="form-control" placeholder="Search..." type="text">
 65           </form>
 66         </div>
 67       </div>
 68     </nav>
 69 
 70     <div class="container-fluid">
 71       <div class="row">
 72         <div class="col-sm-3 col-md-2 sidebar">
 73 
 74           <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 75   <div class="panel panel-default">
 76     <div class="panel-heading  cd" role="tab" id="headingOne">
 77       <h4 class="panel-title">
 78         <a  href="/class/" id="classfl">
 79           班级
 80         </a>
 81       </h4>
 82     </div>
 83   </div>
 84   <div class="panel panel-default">
 85     <div class="panel-heading" role="tab" id="headingTwo">
 86       <h4 class="panel-title">
 87         <a class="collapsed"  href="/teacher/" aria-controls="collapseTwo">
 88           教师
 89         </a>
 90       </h4>
 91     </div>
 92   </div>
 93   <div class="panel panel-default">
 94     <div class="panel-heading" role="tab" id="headingThree">
 95       <h4 class="panel-title">
 96         <a class="collapsed"  href="/student/" aria-controls="collapseThree">
 97           学生
 98         </a>
 99       </h4>
100     </div>
101   </div>
102 </div>
103 
104         </div>
105         <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
106 
107 
108           <div class="panel panel-default">
109   <div class="panel-heading">Panel heading</div>
110   <div class="panel-body">
111     <div class="row">
112     <form class="navbar-form navbar-left col-sm-12" role="search">
113   <div class="form-group">
114     <input type="text" class="form-control" placeholder="搜索">
115   </div>
116   <button type="submit" class="btn btn-info">搜索</button>
117 
118 </form>
119         <a href="/sadd/" class="btn btn-success pull-right" style="margin-right: 15px;margin-top:8px ">网页添加</a>
120 <button class="btn btn-success pull-right" style="margin-right: 15px;margin-top:8px " data-toggle="modal" data-target="#myModal">添加</button>
121       </div>
122     <div class="modal fade j" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
123   <div class="modal-dialog j" role="document">
124     <div class="modal-content j">
125       <div class="modal-header">
126         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
127         <h4 class="modal-title" id="myModalLabel">信息填写</h4>
128       </div>
129       <div class="modal-body">
130           <form>
131         <div class="form-group">
132     <label for="d1">学生名</label>
133     <input type="text" class="hui form-control" id="d1">
134             </div>
135          <div class="form-group">
136     <label for="d3" class=" control-label">班级id</label>
137         <select class="form-control" name="sclass">
138             {% for csl in cs_list %}
139           <option value="{{ csl.cid }}">{{ csl.cname }}</option>
140             {% endfor %}
141 </select>
142     </div>
143           <span id="error-msg"></span>
144 <div class="modal-footer">
145     <button class="an btn btn-default" data-dismiss="modal">Close</button>
146     <button class="anq btn btn-primary" id="modal-submit" type="button" >确定添加</button>
147       </div>
148               </form>
149       </div>
150 
151     </div>
152   </div>
153 </div>
154 
155 
156 {#  <modaladd>#}
157 <div class="modal fade j" id="edit_myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
158   <div class="modal-dialog j" role="document">
159     <div class="modal-content j">
160       <div class="modal-header">
161         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
162         <h4 class="modal-title" id="myModalLabel">信息填写</h4>
163       </div>
164       <div class="modal-body">
165           <form>
166         <div class="form-group">
167             <input type="text" style="display: none" id="ed3">
168     <label for="d1">学生名</label>
169     <input type="text" class="hui form-control" id="ed1">
170             </div>
171          <div class="form-group">
172     <label for="edit_sele" class=" control-label">班级id</label>
173         <select class="form-control" id="edit_sele">
174             {% for csl in cs_list %}
175           <option value="{{ csl.cid }}">{{ csl.cname }}</option>
176             {% endfor %}
177         </select>
178     </div>
179           <span id="error-msg"></span>
180 <div class="modal-footer">
181     <button class="an btn btn-default" data-dismiss="modal">Close</button>
182     <button class="anq btn btn-primary" id="edit-modal-submit" type="button" >确定修改</button>
183       </div>
184               </form>
185       </div>
186 
187     </div>
188   </div>
189 </div>
190 
191 {#  </modaladd>#}
192 
193   <div class="table-responsive">
194             <table class="table table-striped table-bordered">
195               <thead>
196                 <tr>
197                   <th class="col-sm-1">#</th>
198                   <th>学生名</th>
199                     <th>班级名</th>
200                   <th>操作</th>
201                 </tr>
202               </thead>
203               <tbody>
204               {% for student in student_list %}
205                 <tr>
206                   <td class="col-sm-1">{{ student.id}}</td>
207                   <td>{{ student.sname }}</td>
208                     <td cid="{{ student.class_id }}">{{ student.cname }}</td>
209                   <td class="col-sm-8 ">
210                       <a href="/sdelete/?s_id={{ student.id }}" class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</a>
211                             <a href="/sedit/?s_id={{ student.id }}" class="w btn btn-success glyphicon glyphicon-pencil">编辑</a>
212                       <button  class="wm btn btn-success glyphicon glyphicon-pencil">modal编辑</button>
213                       <button id="sweetd" class="del btn btn-danger  glyphicon glyphicon-remove">页面删除</button>
214                   </td>
215                 </tr>
216                 {% endfor %}
217               </tbody>
218             </table>
219           </div>
220 
221     <nav aria-label="Page navigation" class=" pull-right">
222   <ul class="pagination">
223     <li>
224       <a href="#" aria-label="Previous">
225         <span aria-hidden="true">&laquo;</span>
226       </a>
227     </li>
228     <li><a href="#">1</a></li>
229     <li><a href="#">2</a></li>
230     <li><a href="#">3</a></li>
231     <li><a href="#">4</a></li>
232     <li><a href="#">5</a></li>
233     <li>
234       <a href="#" aria-label="Next">
235         <span aria-hidden="true">&raquo;</span>
236       </a>
237     </li>
238   </ul>
239 </nav>
240         </div>
241       </div>
242     </div>
243   </div>
244     </div>
245 
246 
247     <!-- Bootstrap core JavaScript
248     ================================================== -->
249     <!-- Placed at the end of the document so the pages load faster -->
250     <script src="/static/Dashboard%20Temp_files/jquery.js"></script>
251     <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
252     <script src="/static/Dashboard%20Temp_files/bootstrap.js"></script>
253     <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
254     <script src="/static/Dashboard%20Temp_files/holder.js"></script>
255     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
256     <script src="/static/Dashboard%20Temp_files/ie10-viewport-bug-workaround.js"></script>
257     <script src="/static/sweetalert/sweetalert.min.js"></script>
258     <script>
259         $("#modal-submit").on("click", function () {
260 {#            $("#myModal form").submit();#}
261             var studentName = $("#d1").val();
262             var studentId=$("option:selected").val();
263 {#          用AJAX不刷新页面提交到后端#}
264           $.ajax({
265               url: "/modal_add_student/",
266               type: "POST",
267               data: {"studentname": studentName,"studentid":studentId},
268               success: function (data) {
269                   if (data === "OK"){
270                       location.href="/student/";
271 
272                   }else {
273                       $("#error-msg").text(data).parent().parent().addClass("has-error");
274                   }
275               }
276           })
277       });
278         $(".wm").on("click",function () {
279             $sz=$(this).parent().parent().children();
280             $("#ed1").val($($sz[1]).text());
281             zhi=$($sz[2]).attr("cid");
282             $("#edit_sele").val(zhi);
283             $("#ed3").val($($sz[0]).text());
284             $("#edit_myModal").modal("show");
285         });
286         $("#edit-modal-submit").on("click", function () {
287             var studentName = $("#ed1").val();
288             var studentId=$("#edit_sele option:selected").val();
289             var student_gd=$("#ed3").val();
290 {#          用AJAX不刷新页面提交到后端#}
291           $.ajax({
292               url: "/modal_edit_student/",
293               type: "POST",
294 
295               data: {"studentname": studentName,"studentid":studentId,"student_gd":student_gd},
296               success: function (data) {
297                   if (data === "OK"){
298                       location.href="/student/";
299 
300                   }else {
301                       $("#error-msg").text(data).parent().parent().addClass("has-error");
302                   }
303               }
304           })
305       });
306 
307 {#        二次删除     #}
308         $("table").on("click" , "#sweetd", function () {
309         var studentID = $(this).parent().parent().children().eq(0).text();
310         var $tr = $(this).parent().parent();
311         // 弹出sweetalert二次确认框
312         // swal("1", "2", "warning");
313         swal({
314         title: "删除此学生信息?",
315         text: "删除后无法回复。",
316         type: "warning",
317         showCancelButton: true,
318         closeOnConfirm: false,
319         confirmButtonText: "继续删除!",
320         confirmButtonColor: "#ec6c62",
321         cancelButtonText: "再想一想"
322     }, function (isConfirm) {
323         if (!isConfirm) return;
324         $.ajax({
325             type: "post",
326             url: "/modal_delete_student/",
327             data: {"student_id": studentID},
328             success: function (data) {
329                 var dataObj = $.parseJSON(data);
330                 if (dataObj.status === 0) { //后端删除成功
331                     swal("删除成功", dataObj.msg, "success");
332                     $tr.remove()  //删除页面中那一行数据
333                 } else {
334                     swal("出错啦。。。", dataObj.msg, "error");  //后端删除失败
335                 }
336             },
337             error: function () {  // ajax请求失败
338                 swal("啊哦。。。", "服务器走丢了。。。", "error");
339             }
340         })
341     });
342     })
343     </script>
344 </body></html>
学生信息管理html

学生信息页面的js中,值得一提的是学生的班级信息,并不是通过input中type为text的输入框来获取值了,而是通过select标签来进行选择性的value获取,展示的时候同样是通过模板语言的循环将数据展示,select也是如此。

在学生添加的过程中,select标签要通过option:selected 来判断是否为选中项,获取value的方法同输入框。

而且这时要考虑到学生编辑时展示的信息时学生当前最新信息,所以要在input框中添加学生当前最新姓名,还有所属班级。那样的话都input输入框可以用jQuery中的.val()方法来传入当前值,也就是获取所点击编辑的父代的父代的学生名字的td标签的text值,然后赋给当前modal输入框的value属性,select选中的话也是.val()方法,不过val()的括号中要添加的就是班级的id的值了,这样的话值与select标签中option标签的value相等就会选中了。

在删除学生信息的时候,用了二次提醒删除事件,导入了一个插件sweetalert也就是弹出是否确定删除的信息,详细方法参考sweetalert的官网使用。

 1 def student(request):
 2 
 3    conn=pymysql.connect(
 4        host='127.0.0.1',port=3306,
 5        user='root',password='',db='day66',charset='utf8'
 6 
 7    )
 8    cursor=conn.cursor(cursor=pymysql.cursors.DictCursor)
 9    cursor.execute("select student.id,student.sname,class.cname,student.class_id from student INNER JOIN  class on student.class_id = class.cid")
10    student_list=cursor.fetchall()
11    cursor.execute("select cid,cname from class")
12    cs_list = cursor.fetchall()
13    cursor.close()
14    conn.close()
15    return  render(request,'student.html',{'student_list':student_list,"cs_list":cs_list})
学生信息展示

同样通过查找数据库的数据来进行数据展示

 1 def modal_add_student(request):
 2     if request.method == "POST":
 3         new_student_name = request.POST.get("studentname")
 4         new_student_id_=request.POST.get("studentid")
 5         new_student_id_=int(new_student_id_)
 6         conn = pymysql.connect(
 7             host='127.0.0.1', port=3306,
 8             user='root', password='', db='day66', charset='utf8'
 9         )
10         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
11         if new_student_name:
12             cursor.execute("insert into student(sname,class_id)values (%s,%s)", [new_student_name,new_student_id_])
13             conn.commit()
14             cursor.close()
15             conn.close()
16             return HttpResponse("OK")
17 
18         else:
19             error = "班级名称不能为空"
20             return HttpResponse(error)
学生信息添加

同班级信息添加,不过这时要添加的就是两条信息了,所以表的自增ID不用添加。

 1 def modal_edit_student(request):
 2     if request.method == "POST":
 3         new_student_name = request.POST.get("studentname")
 4         new_student_id_=request.POST.get("studentid")
 5         new_student_gd = request.POST.get("student_gd")
 6         new_student_id=int(new_student_id_)
 7         new_student_gd_ = int(new_student_gd)
 8         conn = pymysql.connect(
 9             host='127.0.0.1', port=3306,
10             user='root', password='', db='day66', charset='utf8'
11         )
12         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
13         if new_student_name:
14             cursor.execute("update student set sname=%s where id=%s ", [new_student_name,new_student_gd])
15             cursor.execute("update student set class_id=%s where id=%s ", [new_student_id, new_student_gd])
16             conn.commit()
17             cursor.close()
18             conn.close()
19             return HttpResponse("OK")
20 
21         else:
22             error = "学生名称不能为空"
23             return HttpResponse(error)
学生信息编辑

同班级信息编辑差不多,不过修改的时候要带上class_id

 1 def modal_delete_student(request):
 2     if request.method == "POST":
 3         new_student_gd = request.POST.get("student_id")
 4         new_student_id=int(new_student_gd)
 5         print(new_student_id)
 6         conn = pymysql.connect(
 7             host='127.0.0.1', port=3306,
 8             user='root', password='', db='day66', charset='utf8'
 9         )
10         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
11         if new_student_gd:
12             cursor.execute("delete from student where id=%s ", [new_student_id])
13             conn.commit()
14             cursor.close()
15             conn.close()
16             ret=json.dumps({"status":0,"msg":'一鼓作气'})
17             return HttpResponse(ret)
18         else:
19             error = "有一些小毛病"
20             ret = json.dumps({"status": 1, "msg": error})
21             return HttpResponse(ret)
学生信息删除

返回给前端的是一条字典信息,前面status中是状态码,后面的msg中是错误信息,前端通过状态码来判断是否修改完成。因为前后端间传值只能是字符串所以要用json.dumps来序列化一下,前端通过JSON.parse来解析。

下面是比较复杂的教师页面管理:

  1 <!DOCTYPE html>
  2 <html lang="zh-CN"><head>
  3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7   <link rel="stylesheet" href="/static/dist/css/bootstrap.css">
  8     <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  9     <meta name="description" content="">
 10     <meta name="author" content="">
 11     <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
 12     <title>Dashboard Template for Bootstrap</title>
 13 
 14     <!-- Bootstrap core CSS -->
 15     <link href="/static/Dashboard%20Temp_files/bootstrap.css" rel="stylesheet">
 16 
 17     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 18     <link href="/static/Dashboard%20Temp_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
 19 
 20     <!-- Custom styles for this template -->
 21     <link href="/static/Dashboard%20Temp_files/dashboard.css" rel="stylesheet">
 22 
 23     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
 24     <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 25     <script src="/static/Dashboard%20Temp_files/ie-emulation-modes-warning.js"></script>
 26     <link href="/static/sweetalert/sweetalert.css" rel="stylesheet">
 27     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 28     <!--[if lt IE 9]>
 29       <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 30       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 31     <![endif]-->
 32   </head>
 33 <style>
 34   .col-centered {
 35                   float: none;
 36                   margin: 0 auto;
 37                 }
 38   .cd{
 39     background-color: black;
 40   }
 41 </style>
 42   <body>
 43 
 44     <nav class="navbar navbar-inverse navbar-fixed-top">
 45       <div class="container-fluid">
 46         <div class="navbar-header">
 47           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 48             <span class="sr-only">Toggle navigation</span>
 49             <span class="icon-bar"></span>
 50             <span class="icon-bar"></span>
 51             <span class="icon-bar"></span>
 52           </button>
 53           <a class="navbar-brand" href="#">Project name</a>
 54         </div>
 55         <div id="navbar" class="navbar-collapse collapse">
 56           <ul class="nav navbar-nav navbar-right">
 57             <li><a href="#">Dashboard</a></li>
 58             <li><a href="#">Settings</a></li>
 59             <li><a href="#">Profile</a></li>
 60             <li><a href="#">Help</a></li>
 61           </ul>
 62           <form class="navbar-form navbar-right">
 63             <input class="form-control" placeholder="Search..." type="text">
 64           </form>
 65         </div>
 66       </div>
 67     </nav>
 68 
 69     <div class="container-fluid">
 70       <div class="row">
 71         <div class="col-sm-3 col-md-2 sidebar">
 72 
 73           <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 74   <div class="panel panel-default">
 75     <div class="panel-heading  cd" role="tab" id="headingOne">
 76       <h4 class="panel-title">
 77         <a  href="/class/" id="classfl">
 78           班级
 79         </a>
 80       </h4>
 81     </div>
 82   </div>
 83   <div class="panel panel-default">
 84     <div class="panel-heading" role="tab" id="headingTwo">
 85       <h4 class="panel-title">
 86         <a class="collapsed"  href="/teacher/" aria-controls="collapseTwo">
 87           教师
 88         </a>
 89       </h4>
 90     </div>
 91   </div>
 92   <div class="panel panel-default">
 93     <div class="panel-heading" role="tab" id="headingThree">
 94       <h4 class="panel-title">
 95         <a class="collapsed"  href="/student/"aria-controls="collapseThree">
 96           学生
 97         </a>
 98       </h4>
 99     </div>
100   </div>
101 </div>
102 
103         </div>
104         <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
105 
106 
107           <div class="panel panel-default">
108   <div class="panel-heading">Panel heading</div>
109   <div class="panel-body">
110     <div class="row">
111     <form class="navbar-form navbar-left col-sm-12" role="search">
112   <div class="form-group">
113     <input type="text" class="form-control" placeholder="搜索">
114   </div>
115   <button type="submit" class="btn btn-info">搜索</button>
116 
117 </form>
118         <a href="/tadd/" class="btn btn-success pull-right" style="margin-right: 15px;margin-top:8px ">网页添加</a>
119 <button type="submit" class="btn btn-success pull-right" style="margin-right: 15px;margin-top:8px " data-toggle="modal" data-target="#myModal">添加</button>
120       </div>
121     <div class="modal fade j" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
122   <div class="modal-dialog j" role="document">
123     <div class="modal-content j">
124       <div class="modal-header">
125         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
126         <h4 class="modal-title" id="myModalLabel">信息填写</h4>
127       </div>
128       <div class="modal-body">
129           <form action="">
130         <div class="form-group">
131     <label for="d1">姓名</label>
132     <input type="text" class="hui form-control" id="d1" autocomplete="off">
133             </div>
134               <span id="error-msg"></span>
135                <div class="form-group">
136     <label class=" control-label">所带班级</label>
137 
138         <div class="checkbox">
139             {% for csl in cs_list %}
140           <label>
141             <input type="checkbox" value="{{ csl.cid }}" name='check' autocomplete="off">
142            {{ csl.cname }}
143           </label>
144              {% endfor %}
145         </div>
146     </div>
147 <div class="modal-footer">
148     <button  class="an btn btn-default" data-dismiss="modal">Close</button>
149     <button type="button" class="anq btn btn-primary" id="jiao">确认添加</button>
150       </div>
151               </form>
152       </div>
153 
154     </div>
155   </div>
156 </div>
157 
158 {#<编辑modal>#}
159  <div class="modal fade j" id="edit_myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
160   <div class="modal-dialog j" role="document">
161     <div class="modal-content j">
162       <div class="modal-header">
163         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
164         <h4 class="modal-title" id="myModalLabel">信息填写</h4>
165       </div>
166       <div class="modal-body">
167           <form action="">
168         <div class="form-group">
169     <label for="ed1">姓名</label>
170             <input type="text" id="ed5" style="display: none">
171     <input type="text" class="hui form-control" id="ed1">
172             </div>
173               <span id="error-msg-e"></span>
174                <div class="form-group">
175     <label class=" control-label">所带班级</label>
176 
177         <div class="checkbox">
178             {% for csl in cs_list %}
179           <label>
180             <input type="checkbox" value="{{ csl.cid }}" name='checkc'>
181            {{ csl.cname }}
182           </label>
183              {% endfor %}
184         </div>
185     </div>
186 <div class="modal-footer">
187     <button  class="an btn btn-default" data-dismiss="modal">Close</button>
188     <button type="button" class="anq btn btn-primary" id="xiu">确认修改</button>
189       </div>
190               </form>
191       </div>
192 
193     </div>
194   </div>
195 </div>
196 {#</编辑modal>#}
197 
198   <div class="table-responsive">
199             <table class="table table-striped table-bordered">
200               <thead>
201                 <tr>
202                   <th class="col-sm-1">#</th>
203                   <th>教师名</th>
204                     <th>所带班级</th>
205                   <th>操作</th>
206                 </tr>
207               </thead>
208               <tbody>
209               {% for teacher in teacher_list %}
210                 <tr>
211                   <td class="col-sm-1">{{ teacher.td}}</td>
212                   <td>{{ teacher.tn }}</td>
213                     <td cid="{{ teacher.cd }}">{{ teacher.cn }}</td>
214                   <td class="col-sm-8 ">
215                       <a href="/tdelete/?t_id={{ teacher.td }}" class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</a>
216                             <a href="/tedit/?t_id={{ teacher.td }}" class="w btn btn-success glyphicon glyphicon-pencil">编辑</a>
217                           <button  class="wm btn btn-success glyphicon glyphicon-pencil">modal编辑</button>
218                           <button id="sweetd" class="del btn btn-danger  glyphicon glyphicon-remove">页面删除</button></td>
219                 </tr>
220                   {% empty %}
221                   <tr><td colspan="3" style="text-align: center">没有数据</td></tr>
222                 {% endfor %}
223               </tbody>
224             </table>
225           </div>
226 
227     <nav aria-label="Page navigation" class=" pull-right">
228   <ul class="pagination">
229     <li>
230       <a href="#" aria-label="Previous">
231         <span aria-hidden="true">&laquo;</span>
232       </a>
233     </li>
234     <li><a href="#">1</a></li>
235     <li><a href="#">2</a></li>
236     <li><a href="#">3</a></li>
237     <li><a href="#">4</a></li>
238     <li><a href="#">5</a></li>
239     <li>
240       <a href="#" aria-label="Next">
241         <span aria-hidden="true">&raquo;</span>
242       </a>
243     </li>
244   </ul>
245 </nav>
246         </div>
247       </div>
248     </div>
249   </div>
250     </div>
251 
252 
253     <!-- Bootstrap core JavaScript
254     ================================================== -->
255     <!-- Placed at the end of the document so the pages load faster -->
256     <script src="/static/Dashboard%20Temp_files/jquery.js"></script>
257     <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
258     <script src="/static/Dashboard%20Temp_files/bootstrap.js"></script>
259     <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
260     <script src="/static/Dashboard%20Temp_files/holder.js"></script>
261     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
262     <script src="/static/Dashboard%20Temp_files/ie10-viewport-bug-workaround.js"></script>
263     <script src="/static/sweetalert/sweetalert.min.js"></script>
264   <script>
265      $("#jiao").on("click",function () {
266          var tname=$("#d1").val();
267          var checkID = [];
268          $("input[name='check']:checked").each(function(i){//把所有被选中的复选框的值存入数组
269            checkID[i] =$(this).val();
270          });
271          var cck=JSON.stringify(checkID);
272          $.ajax({
273              url:"/modal_add_teacher/",
274              type:"post",
275              data:{"teachername":tname,"checkid":cck},
276              success:function (data) {
277 {#                     }#}
278                  if(data=='OK'){
279                      location.reload()
280                  }
281                      else
282                      {
283                          $("#error-msg").text(data).parent().parent().addClass("has-error");
284                      }
285                  }
286 
287              })
288          });
289 
290 {#   编辑modal:#}
291       $(".wm").on("click",function () {
292               $sz=$(this).parent().parent().children();
293             $("#ed1").val($($sz[1]).text());
294              $("#ed5").val($($sz[0]).text());
295             zhi=$($sz[2]).attr("cid");
296             xinzhi=zhi.split(',');
297             console.log(xinzhi);
298             for (i=0;i<xinzhi.length;i++){
299                 $inb=$("input[name='checkc']");
300                 for(j=0;j<$inb.length;j++){
301                 if($($inb[j]).val()==xinzhi[i]){
302                     $($inb[j]).attr("checked",true);
303                 }
304                 }
305             }
306             $("#edit_myModal").modal("show");
307       });
308 
309 
310       $("#xiu").on("click",function () {
311           var tname=$("#ed1").val();
312           var tid = $("#ed5").val();
313          var checkID = [];
314          $("input[name='checkc']:checked").each(function(i){//把所有被选中的复选框的值存入数组
315            checkID[i] =$(this).val();
316          });
317          var cck=JSON.stringify(checkID);
318          $.ajax({
319              url:"/modal_edit_teacher/",
320              type:"post",
321              data:{"teachername":tname,"checkid":cck,"tid":tid},
322              success:function (data) {
323 {#                     }#}
324                  if(data=='OK'){
325                      location.reload()
326                  }
327                      else
328                      {
329                          $("#error-msg-e").text(data).parent().parent().addClass("has-error");
330                      }
331                  }
332 
333              })
334          });
335 
336 
337 {#      删除开始#}
338       $("table").on("click" , "#sweetd", function () {
339         var teacherID = $(this).parent().parent().children().eq(0).text();
340         var $tr = $(this).parent().parent();
341         // 弹出sweetalert二次确认框
342         // swal("1", "2", "warning");
343         swal({
344         title: "删除此教师信息?",
345         text: "删除后无法回复",
346         type: "warning",
347         showCancelButton: true,
348         closeOnConfirm: false,
349         confirmButtonText: "继续删除!",
350         confirmButtonColor: "#ec6c62",
351         cancelButtonText: "再想一想"
352     }, function (isConfirm) {
353         if (!isConfirm) return;
354         $.ajax({
355             type: "post",
356             url: "/modal_delete_teacher/",
357             data: {"teacher_id": teacherID},
358             success: function (data) {
359                 var dataObj = $.parseJSON(data);
360                 if (dataObj.status === 0) { //后端删除成功
361                     swal("删除成功", dataObj.msg, "success");
362                     $tr.remove()  //删除页面中那一行数据
363                 } else {
364                     swal("出错啦。。。", dataObj.msg, "error");  //后端删除失败
365                 }
366             },
367             error: function () {  // ajax请求失败
368                 swal("啊哦。。。", "服务器走丢了。。。", "error");
369             }
370         })
371     });
372     })
373 
374   </script>
375     <script>
376 
377     </script>
378 </body></html>
教师页面管理html

与其他页面功能相同,一个教师可以带多个班级,所以添加信息与编辑信息中,使用的是checkbox来进行多选,值得一提:

$("input[name='check']:checked").each(function(i){//把所有被选中的复选框的值存入数组
checkID[i] =$(this).val();
});

这个方法是来获取选中的checkbox的值的

$inb=$("input[name='checkc']");
for(j=0;j<$inb.length;j++){
if($($inb[j]).val()==xinzhi[i]){
$($inb[j]).attr("checked",true);
}}

这个方法是来选中checkbox的,用于在编辑时向用户展示教师现有班级的信息

 1 def teacher(request):
 2 
 3    conn=pymysql.connect(
 4        host='127.0.0.1',port=3306,
 5        user='root',password='',db='day66',charset='utf8'
 6 
 7    )
 8    cursor=conn.cursor(cursor=pymysql.cursors.DictCursor)
 9    cursor.execute("select t2.td,t2.tn,group_concat(cname) as cn ,group_concat(cid) as cd from class RIGHT join (select t1.tid as td,t1.tname as tn,class_id  from teacher2class INNER join (select tid,tname from teacher)t1 ON teacher2class.teacher_id=t1.tid)t2 on t2.class_id=class.cid GROUP by t2.td")
10    teacher_list=cursor.fetchall()
11    cursor.execute("select cid,cname from class")
12    cs_list = cursor.fetchall()
13    cursor.close()
14    conn.close()
15    return  render(request,'teacher.html',{'teacher_list':teacher_list,"cs_list":cs_list})
教师信息展示

拿数据库信息展示时,因为教师可以教多个班级,所以教师在与班级关联的表当中同样的tid会有多条信息,所以联表查询,再用group by分组与group_concat来将同一个教师的班级来进行聚合字符串拼接,这样cn字段拿到的值就是一个教师带的多个班级

def modal_add_teacher(request):if request.method == "POST":new_teacher_name = request.POST.get("teachername")new_class_id = request.POST.get("checkid")new_class_id=json.loads(new_class_id)print(new_class_id)if new_teacher_name:conn = pymysql.connect(host='127.0.0.1', port=3306,user='root', password='', db='day66', charset='utf8')cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)cursor.execute("insert into teacher(tname) VALUES (%s)", [new_teacher_name,])conn.commit()cursor.close()conn.close()conn = pymysql.connect(host='127.0.0.1', port=3306,user='root', password='', db='day66', charset='utf8')cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)cursor.execute("select * from teacher")t_clists = cursor.fetchall()[-1]tc_id=t_clists["tid"]for item in new_class_id:itemq = int(item)cursor.execute("insert into teacher2class(class_id,teacher_id) VALUES (%s,%s)", [itemq, tc_id])conn.commit()cursor.close()conn.close()return HttpResponse("OK")else:error = "班级名称不能为空"return HttpResponse(error)
教师添加信息

从前端拿值,取到的班级信息的值是一个列表类型的,所以要循环sql语句来进行添加,不光要在教师表添加教师信息,同样在教师与班级关联的表也要添加信息

 1 def modal_edit_teacher(request):
 2     if request.method == "POST":
 3         new_teacher_name = request.POST.get("teachername")
 4         new_class_id = request.POST.get("checkid")
 5         new_t_id = request.POST.get("tid")
 6         newtd=int(new_t_id)
 7         new_class_id=json.loads(new_class_id)
 8         if new_teacher_name:
 9             conn = pymysql.connect(
10                 host='127.0.0.1', port=3306,
11                 user='root', password='', db='day66', charset='utf8'
12             )
13             cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
14             cursor.execute("update teacher set tname=%s where tid=%s", [new_teacher_name,newtd])
15             conn.commit()
16             cursor.close()
17             conn.close()
18             conn = pymysql.connect(
19                 host='127.0.0.1', port=3306,
20                 user='root', password='', db='day66', charset='utf8'
21             )
22             cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
23             cursor.execute("select class_id from teacher2class INNER join (select tid from teacher where tname=%s)t1 on teacher_id = t1.tid",[new_teacher_name])
24             ret=cursor.fetchall()
25             li=[]
26             for it in ret:
27                 li.append(str(it["class_id"]))
28             old=set(li)
29             old_new=old.symmetric_difference(new_class_id)
30             if old_new:
31                 new=(old_new.difference(old))
32                 olds=(old_new.difference(new_class_id))
33                 if new:
34                     for inew in new:
35                         cursor.execute("insert into teacher2class(class_id, teacher_id) VALUES(%s,%s) ", [inew, new_t_id])
36                 if olds:
37                     for iold in olds:
38                         cursor.execute("delete from teacher2class where class_id=%s",[iold])
39                 conn.commit()
40                 cursor.close()
41                 conn.close()
42             return HttpResponse("OK")
43         else:
44             error = "班级名称不能为空"
45             return HttpResponse(error)
教师编辑信息

 这部分代码有两种做法,因为取到的前端的class_id部分的值是字典,所以循环取值,然后通过set集合,来求出旧的class_id的集合与ajax传来的class_id的值的差集,然后再判断如果这个差集中含有接收来的class_id中没有的值那么就是旧的中的值,需要删除,如果是旧的中没有的,就是新的值,需要添加。

第二种方法,直接删除原有的所有在教师与班级关联表中的符合tid值的信息,这样的话这个教师的所有数据就没了,然后再将传来的值直接添加进去。

 1 def modal_delete_teacher(request):
 2     if request.method == "POST":
 3         new_teacher_gd = request.POST.get("teacher_id")
 4         new_teacher_id=int(new_teacher_gd)
 5         conn = pymysql.connect(
 6             host='127.0.0.1', port=3306,
 7             user='root', password='', db='day66', charset='utf8'
 8         )
 9         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
10         if new_teacher_gd:
11             cursor.execute("delete from teacher where tid=%s ", [new_teacher_id])
12             cursor.execute("delete from teacher2class where teacher_id=%s ", [new_teacher_id])
13             conn.commit()
14             cursor.close()
15             conn.close()
16             ret=json.dumps({"status":0,"msg":'一鼓作气'})
17             return HttpResponse(ret)
18 
19         else:
20             error = "有一些小毛病"
21             ret = json.dumps({"status": 1, "msg": error})
22             return HttpResponse(ret)
教师删除信息

删除这部分在前端也引用了sweetalert,在后端的话与添加相同,不止要删除教师表中的信息,更要删除关联表中的信息

 

本实例的数据库表结构:

 

 其中student表中的class_id关联了class表中的cid,关联表为多对多的关联关系,关联教师表与班级表

转载于:https://www.cnblogs.com/gaoshengyue/p/7929661.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251440.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云ecs实例中创建数据库

阿里云ecs实例中创建数据库安装mysql创建数据库1.登录2.新建数据库3.执行.sql文件4.查询表&#xff0c;验证是否创建成功4.退出数据库安装mysql 参考https://blog.csdn.net/qq_36350532/article/details/79496049 创建数据库 1.登录 mysql -u root -p&#xff08;这里写密码…

javascript --- 尾递归优化的实现

考虑一个正常的递归函数 function sum(x, y) {if (y > 0) {return sum (x 1, y - 1);} else {return x;} } sum(1, 100000000);超出调用栈的最大次数… 下面使用尾递归优化实现: function tco(f) {var value ;var active false;var accumulated [];return function acc…

《对不队》团队项目用户验收评审

任务1&#xff1a;团队作业Beta冲刺 Beta冲刺第一天&#xff1a;https://www.cnblogs.com/bingoF6/p/9221744.htmlBeta冲刺第二天&#xff1a;https://www.cnblogs.com/bingoF6/p/9226305.htmlBeta冲刺第三天&#xff1a;https://www.cnblogs.com/bingoF6/p/9230815.htmlBeta冲…

部署项目的问题(一)—— vue工程打包上线样式错乱问题

1、 打开index.html一片空白 参考&#xff1a;链接: link. 修改build对象里的assetsPublicPath为’./’ assetsPublicPath: ./2、ElementUI样式丢失 参考&#xff1a;链接: link. 这里尝试完前三种&#xff1a; 1.main.js样式引入顺序问题 调整了import的顺序&#xff08;…

构建SpringBoot第一个Demo

使用官方地址生成项目 https://start.spring.io Generate&#xff1a;可以选择Maven或者Gradle构建项目 语言&#xff1a;我想一般都是Java 接下来选择SpringBoot的版本&#xff0c;目前比较稳定的1.5.10 GroupID&#xff1a;自定义 Artifact&#xff1a;自定义 Dependencies&…

部署项目的问题(二)—— 阿里云服务器 ECS升级node版本

在运行服务端代码时报错&#xff0c;当时报错的代码没copy下来&#xff0c;大概就是如下形式 mbp:hybrid-statistic wfp$ node app.js /Users/wfp/Work/hybrid-statistic/app.js:28 async function responseTime(ctx, next) {^^^^^^^^ SyntaxError: Unexpected token function…

javascript --- Object.assign()浅复制解决方法

Object.assign()是浅复制(即:只复制对象得引用而,而不是新实例).它无法正确复制get属性和set属性. 看下面得例子: // 定义一个source对象,含set方法 const source {set foo(value) {console.log(value);} };// 使用Object.assign进行赋值 const target1 {}; Object.assign(t…

微信小程序与Java后台的通信

一、写在前面 最近接触了小程序的开发&#xff0c;后端选择Java&#xff0c;因为小程序的代码运行在腾讯的服务器上&#xff0c;而我们自己编写的Java代码运行在我们自己部署的服务器上&#xff0c;所以一开始不是很明白小程序如何与后台进行通信的&#xff0c;然后查找资料发现…

面向对象初识④

抽象类与接口类 接口类 继承有两种用途&#xff1a; 一&#xff1a;继承基类的方法&#xff0c;并且做出自己的改变或者扩展&#xff08;代码重用&#xff09; 二&#xff1a;声明某个子类兼容于某基类&#xff0c;定义一个接口类Interface&#xff0c;接口类中定义了一些接口…

部署项目的问题(三)—— node启动服务时listen监听的端口被占用

Error: listen EADDRINUSE :::8888表示的就是listen监听的端口被占用 查询什么进程占用了8888端口 sudo fuser -n tcp 8888 &#xff08;指令一&#xff09; 或者 netstat -tln | grep 8888 &#xff08;指令二&#xff09;反复执行指令一&#xff0c;总得到不同结果&#x…

es6 --- 内置的Symbol值

Symbol.hasInstance // Symbol.hasInstance class MyClass {[Symbol.hasInstance] (foo) {return foo instanceof Array;} } [1, 2, 3] instanceof new MyClass() // true// symbol.hasInstance:会在[1, 2, 3] instanceof 时 自动调用 [Symbol.hasInstance] (foo) 方法... //…

15 调试

1. pdb pdb是基于命令行的调试工具&#xff0c;非常类似gnu的gdb&#xff08;调试c/c&#xff09;。 def getAverage(a,b):result abprint("result is %s"%result)return resulta 10 b 20 c ab ret getAverage(a,b) print(ret) 2.执行时调试 程序启动&#xff0…

html5播放视频只有声音不出现画面?

一开始网上大神们都是要把MP4的编码格式转换成AVC&#xff08;H264&#xff09;&#xff0c;然后赶紧用格式工厂把它给换了&#xff0c;结果&#xff01;&#xff01; 没用&#xff01;&#xff01;还是黑屏&#xff1f;&#xff1f;&#xff1f;咋回事啊&#xff0c;然后自己又…

vue项目代码改进(一)login组件

Login登录组件 1. 新增登录头像&#xff08;css样式回顾&#xff09; 1&#xff09;div.avatar 2&#xff09;子绝父相定位&#xff0c;left…top… 3&#xff09;border 4&#xff09;placeholder 5&#xff09;box-shadow box-shadow: offset-x offset-y blur spread color …

解析DBF文件

上周&#xff0c;公司给了许多DBF后缀的数据文件让我进行解析。 因为是DBF文件我发现mysql&#xff0c;和Oracle都能直接对DBF文件进行导入。在导入过程中发现这些数据库并不能识别这些文件。 通过百度找到了打开这种文件的软件Visual FoxPro、Access&#xff0c;用它们打开后出…

Scrum 冲刺 第一日

Scrum 冲刺 第一日 站立式会议燃尽图Alpha 阶段认领任务明日任务安排项目预期任务量成员贡献值计算规则今日贡献量参考资料站立式会议 返回目录 燃尽图 返回目录 Alpha 阶段认领任务 学号组员分工用时20162309邢天岳补充说明书&部分测试18h20162311张之睿编写代码20h201623…

浅析 NodeJs 的几种文件路径

Node 中的文件路径大概有 __dirname, __filename, process.cwd(), ./ 或者 ../&#xff0c;前三个都是绝对路径&#xff0c;为了便于比较&#xff0c;./ 和 ../ 我们通过 path.resolve(./)来转换为绝对路径。 先看一个简单的栗子&#xff1a; 假如我们有这样的文件结构&#xf…

es6 --- 使用node的memoryUsage检测WeakMap()

打开node命令行 $ node --expose-gc// --expose-gc:表示允许手动执行垃圾回收机制// 手动执行一次垃圾回收,保证获取的内存使用状态准确 > global.gc();// 查看内存占用的初始状态, > process.memoryUsage();可以发现初始用了4.7MB左右 // 创建一个WeakMap()实例wm >…

利用jQuery和bootstrap更改radio样式

<div class"container body-content"><div class"row"><div class"text-center col-xs-12"><h3>标题</h3><div class"well well-sm"><div class"btn-group" data-toggle"butto…

Vue项目代码改进(三)—— Cookie、LocalStorage和SessionStorage的使用

存在问题&#xff1a; 如果在退出页面时&#xff0c;没有点击“退出”按钮&#xff0c;而是直接关闭页面&#xff0c;token并没有被清除&#xff0c;依然能通过访问http://localhost:8080/#/ 直接进入主页。 原因&#xff1a; 使用了localStorage而非sessionStorage或Cookie 一…