Day43 of learning python --Django的增删改查(续)
一、要求
1.学生的管理，实现一对多的关系(一个班级对应多个学生)
数据库用的是：外键进行关联
实现：显示所在的学生及对应具体的班级，添加，编辑，删除。
2.模态对话框
由于Form表单一提交，页面就会刷新，不能进行验证等操作，而且模态框也会消失，所以引入了ajax。
$.ajax({ url:'要提交的地址', type:'POST',//GET或者POST,提交方式 data:{'k1':'v1','k2':'v2'},//提交的数据 success:function(data){ //当前服务端处理完毕后，自动执行的回调函数 //data返回的数据 } })
其他事项： 1.模板语言if条件语句 2.form表单提交，页面会刷新 3.Ajax提交页面不刷新 4.js实现页面跳转： location.href = '要跳转的地址' 5.模态对话框(Ajax) -少量的对话框 比如登陆 -数据少 新URL方式 -操作多 -对于大量的数据以及操作，比如博客
二、代码实现
from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ # path('admin/', admin.site.urls), path('classes/', views.classes), path('add_class/', views.add_class), path('del_class/', views.del_class), path('edit_class/', views.edit_class), path('students/', views.students), path('add_student/',views.add_student), path('edit_student/', views.edit_student), path('del_student/', views.del_student), path('modal_add_class/', views.modal_add_class), ]
from django.shortcuts import render,redirect,HttpResponse import pymysql def classes(request): conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='baicells', db='djangopratice',charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute("select id,tittle from class") class_list = cursor.fetchall() # 得到的是一个带有字典的列表 cursor.close() conn.close() return render(request,'classes.html',{'class_list':class_list}) def add_class(request): if request.method == "GET": return render(request,'add_class.html') else: #add_class.html点击提交按钮，才到这一步 print(request.POST) v = request.POST.get('tittle') conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='baicells', db='djangopratice',charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute("insert into class(tittle) values(%s)",[v,]) conn.commit() cursor.close() conn.close() return redirect('/classes/') def del_class(request): nid = request.GET.get('nid') conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='baicells', db='djangopratice',charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute("delete from class where id=%s", [nid, ]) conn.commit() cursor.close() conn.close() return redirect('/classes/') # 跳转到这个页面，重新刷新 def edit_class(request): if request.method == 'GET': # a标签的get请求 nid = request.GET.get('nid') # nid是classes添加过来的 conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='baicells', db='djangopratice', charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute("select id,tittle from class where id =%s",[nid,]) classone = cursor.fetchone() cursor.close() conn.close() return render(request,'edit_class.html',{'classone':classone}) else: # nid = request.POST.get('nid') nid = request.GET.get('nid') # 由于http是短连接，所以需要从编辑的页面再次获得数据才能知道需要更改的地方,通过网址获取 tittle = request.POST.get('tittle') conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='baicells', db='djangopratice', charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute("update class set tittle=%s where id=%s",[tittle,nid]) conn.commit() cursor.close() conn.close() return redirect('/classes/') def students(request): conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='baicells', db='djangopratice', charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute("select student.id,student.name,class.tittle from student LEFT JOIN class on student.class_id = class.id") students_list = cursor.fetchall() cursor.close() conn.close() return render(request,'students.html',{'students_list':students_list}) # 不能加双斜杠，要和html文件名字一致 def add_student(request): if request.method == "GET": conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='baicells', db='djangopratice', charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute("select id,tittle from class") class_list = cursor.fetchall() cursor.close() conn.close() return render(request,'add_student.html',{'class_list':class_list}) else: name = request.POST.get('name') class_id = request.POST.get('class_id') # form表单返回的是以{'class_id':'value的值'} conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='baicells', db='djangopratice',charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute("insert into student(name,class_id) values(%s,%s)",[name,class_id]) conn.commit() cursor.close() conn.close() return redirect('/students/') from utils import sqlhelper def edit_student(request): if request.method == "GET": class_list = sqlhelper.get_list('select id,tittle from class',[]) nid = request.GET.get('nid') student_list = sqlhelper.get_one('select id,name,class_id from student where id=%s',[nid,]) return render(request,'edit_student.html',{"class_list":class_list,"student_list":student_list}) else: nid = request.GET.get('nid') sname = request.POST.get('name') class_id = request.POST.get('class_id') sqlhelper.modify('update student set name=%s,class_id=%s where id=%s',[sname,class_id,nid]) # The view app01.views.edit_student didn't return an HttpResponse object. It returned None instead.不加return return redirect('/students/') def del_student(request): nid = request.GET.get('nid') sqlhelper.modify('delete from student where id=%s',[nid,]) return redirect('/students/') ##########################################模态框添加数据################################################################ import time def modal_add_class(request): tittle = request.POST.get('tittle') if len(tittle) > 0: sqlhelper.modify('insert into class(tittle) values(%s)',[tittle,]) # time.sleep(5) # 对于ajax，只能返回字符串 return HttpResponse('ok') else: # time.sleep(5) return HttpResponse('不能为空')
classes.html:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> //模态框样式 .hide { display: none; } .shadow { position: fixed; left:0; top:0; right:0; bottom:0; background-color: grey; opacity: 0.4; z-index: 999; } .modal { position: fixed; background-color: white; height: 300px; width: 400px; top: 50%; left: 50%; margin-left: -200px; margin-top: -150px; z-index: 1000; } </style> </head> <body> <h3>班级信息</h3> <div> <a href="/add_class/">添加</a> <a onclick="showModal();">模态框添加</a> </div> <table border="1"> <thead> <tr> <th>id</th> <th>tittle</th> <th>操作</th> </tr> </thead> <tbody> {% for row in class_list %} <tr> <td>{{ row.id }}</td> <td>{{ row.tittle }}</td> <td> <a href="/edit_class/?nid={{ row.id }}">编辑</a> | <a href="/del_class/?nid={{ row.id }}">删除</a> </td> </tr> {% endfor %} </tbody> </table> // 模态框的显示操作 <div id="shadow" class="shadow hide"></div> <div id="modal" class="modal hide"> <p>添加班级：<input id="tittle" type="text" name="'tittle"></p> <input type="button" value="提交" onclick="AjaxSend();"> //绑定ajax操作 <input type="button" value="取消" onclick="Cancel();"> <span style="color: red" id="error_msg"></span> </div> <script src="/static/jQuery-3.3.1.js"></script> <script> function showModal() { document.getElementById('shadow').classList.remove('hide'); document.getElementById('modal').classList.remove('hide'); } function Cancel() { document.getElementById('shadow').classList.add('hide'); document.getElementById('modal').classList.add('hide'); } function AjaxSend() { $.ajax( { url:'/modal_add_class/', type:'POST', data:{'tittle':$('#tittle').val()}, success:function (data) { // 当服务端处理完成后，返回数据时，该函数自动调用 //data服务返回的值 console.log(data); if(data == 'ok'){ location.href="/classes/" //用js来跳转 }else{ $('#error_msg').text(data); } } } ) } </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>add_class</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body> <h3>添加班级</h3> <form action="/add_class/" method="POST" > <p>班级：<input type="text" name="tittle"></p> <input type="submit" value="提交"> </form> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>add_class</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body> <h3>编辑班级</h3> <form action="/edit_class/?nid={{classone.id}}" method="POST" > <!--<p><input style="display: none" type="text" value={{ classone.id }} name="nid"></p> 一种方式利用form提交的方式，隐藏起来--> <p>班级：<input type="text" name="tittle" value={{ classone.tittle }}></p> <input type="submit" value="提交"> </form> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body> <h3>学生信息</h3> <div> <a href="/add_student/">添加</a> </div> <table border="1"> <thead> <tr> <th>id</th> <th>学生姓名</th> <th>所在班级</th> <th>操作</th> </tr> </thead> <tbody> {% for row in students_list %} <tr> <td>{{ row.id }}</td> <td>{{ row.name }}</td> <td>{{row.tittle}}</td> <td> <a href="/edit_student/?nid={{ row.id }}">编辑</a> | <a href="/del_student/?nid={{ row.id }}">删除</a> </td> </tr> {% endfor %} </tbody> </table> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body> <h3>学生信息</h3> <div> <a href="/add_student/">添加</a> </div> <table border="1"> <thead> <tr> <th>id</th> <th>学生姓名</th> <th>所在班级</th> <th>操作</th> </tr> </thead> <tbody> {% for row in students_list %} <tr> <td>{{ row.id }}</td> <td>{{ row.name }}</td> <td>{{row.tittle}}</td> <td> <a href="/edit_student/?nid={{ row.id }}">编辑</a> | <a href="/del_student/?nid={{ row.id }}">删除</a> </td> </tr> {% endfor %} </tbody> </table> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>add_class</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body> <h3>添加学生</h3> <form action="/add_student/" method="POST" > <p>学生姓名：<input type="text" name="name"></p> <div>所在班级： <select name="class_id"> {% for row in class_list %} <option value="{{ row.id }}">{{row.tittle}}</option> {% endfor %} </select> </div> <input type="submit" value="提交"> </form> </body> </html>
# 把数据库的操作归成一个文件 import pymysql def get_list(sql,args): conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='baicells', db='djangopratice',charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute(sql,args) result = cursor.fetchall() cursor.close() conn.close() return result def get_one(sql,args): conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='baicells', db='djangopratice',charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute(sql,args) result = cursor.fetchone() cursor.close() conn.close() return result def modify(sql,args): conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='baicells', db='djangopratice',charset='utf8') cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute(sql,args) conn.commit() cursor.close() conn.close()
