Django之学员管理二
学生表的一对多的增删改查
views.py
def students(request):
#select students.sid,students.name,classes.title from students left JOIN classes on students.classes_id=classes.nid;
conn = pymysql.connect(host="127.0.0.1",port=3306,user='root',passwd='redhat',db='weibo',charset='utf8')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) #改为字典
cursor.execute("select students.sid,students.name,classes.title from students left JOIN classes on students.classes_id=classes.nid;")
students_list = cursor.fetchall()
print("students",students_list)
cursor.close()
conn.close()
return render(request, "students.html", {"students_list": students_list})
def add_students_add(request):
if request.method=="GET":
conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', charset='utf8')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) # 改为字典
cursor.execute("select nid,title from classes")
class_list = cursor.fetchall()
print("classes", class_list)
cursor.close()
conn.close()
return render(request,"add_students.html",{"class_list":class_list})
else:
htminput_name = request.POST.get("name")
classes_id = request.POST.get("classes_id")
conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', charset='utf8')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) # 改为字典
cursor.execute("insert into students(name,classes_id) value(%s,%s)",[htminput_name,classes_id])
conn.commit()
cursor.close()
conn.close()
return redirect("/students/")
def del_students_del(request):
sid = request.GET.get("sid")
conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', charset='utf8')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) # 改为字典
cursor.execute("delete from students where sid=%s",[sid,])
conn.commit()
cursor.close()
conn.close()
return redirect("/students/")
from utils import sqlheper
def edit_students_edit(request):
if request.method == "GET":
sid = request.GET.get("sid")
class_list = sqlheper.get_list("select * from classes",[])
students_name = sqlheper.get_one("select sid,name,classes_id from students where sid=%s",[sid,])
return render(request,"edit_students.html",{"class_list":class_list,"students_name":students_name})
else:
sid = request.GET.get("sid")
name = request.POST.get("name")
classes_id = request.POST.get("classes_id")
sqlheper.modify("update students set name=%s,classes_id=%s where sid=%s",[name,classes_id,sid])
return redirect("/students/")
sqlheper.py
import pymysql
def get_list(sql,args):
"""
获取列表信息
:param sql:
:param args:
:return:
"""
conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', 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):
"""
获取一条数据信息
:param sql:
:param args:
:return:
"""
conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', 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):
"""
提交事务，以便执行增删改操作
:param sql:
:param args:
:return:
"""
conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='weibo', charset='utf8')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) # 改为字典
cursor.execute(sql,args)
conn.commit()
cursor.close()
conn.close()
students.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>学生列表</h1>
<div>
<a href="/add_students_add/">添加学生</a>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>学生姓名</th>
<th>所属班级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for students in students_list %}
<tr>
<td>{{ students.sid }}</td>
<td>{{ students.name }}</td>
<td>{{ students.title }}</td>
<td>
<a href="/del_students_del/?sid={{ students.sid }}">删除</a>
|
<a href="/edit_students_edit/?sid={{ students.sid }}">编辑</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
add_students_add.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>添加学生</h1>
<form method="post" action="/add_students_add/">
<p>学生姓名：<input type="text" name="name" placeholder="please input your name"></p>
<p>所属班级：
<select name="classes_id">
{% for foo in class_list %}
<option value="{{ foo.nid }}">{{ foo.title }}</option>
{% endfor %}
</select>
</p>
<input type="submit" value="submit" >
</form>
</body>
</html>
edit_studetns_edit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>编辑学生</h1>
<form method="post" action="/edit_students_edit/?sid={{ students_name.sid }}">
<p>学生姓名：<input type="text" name="name" value="{{ students_name.name }}"></p>
<p>学生班级：
<select name="classes_id">
{% for row in class_list %}
{% if row.nid == students_name.classes_id %}
<option selected value="{{ row.nid }}">{{ row.title }}</option>
{% else %}
<option value="{{ row.nid }}">{{ row.title }}</option>
{% endif %}
{% endfor %}
</select>
</p>
<input type="submit" value="submit">
</form>
</body>
</html>
模态对话框添加班级classes：
模态对话框就是在页面上做两层处理。第一层是遮罩层，第二层是呈现对话框的显示层
对话框的处理在页面的头《head》里要写样式：
classes.html
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.shadow{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.4;
z-index: 999;
}
.model{
z-index: 1000;
position: fixed;
left: 50%;
top: 50%;
height: 300px;
400px;
background-color: white;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
在《body》里是：
<div id="shadow" class="shadow "></div>
<div id="model" class="model ">
<form method="post" action="/model_ajax_classes_add/">
<p>添加班级：<input type="text" name="title"></p>
<input type="submit" value="submit">{{ msg }}
</form>
</div>
<script>
function showModal(){
document.getElementById("shadow").classList.remove("hide");
document.getElementById("model").classList.remove("hide");
}
</script>
</body>
</html>
在模态对话框里，用到的form提交方式，期特点是提交页面就刷新。其弊病是在提交数据错误时。也依旧刷新，而不是在当前页面显示错误值。
比如，在输入空班级时，后端判断不得为0时，form依旧刷新，并没有提示词。
Form表单的特性就是刷新
在form表单中，使用form表单，在正常提交跳转是没有问题的，但是bug在于错误提交数据，页面还是会刷新，而不是在原有的页面中反馈错误信息。
所以，这里就需要用到Ajax操作。
另建对应单独的执行函数：
views.py
def model_ajax_classes_add(request):
model_ajax_add_classes_title = request.POST.get("title")
if len(model_ajax_add_classes_title)>0:
sqlheper.modify("insert into classes(title) values(%s)",[model_ajax_add_classes_title,])
return redirect("/classes/")
else:
return render(request,"classes.html",{"msg":"班级名称不能为空"})
Ajax对话框提交班级信息的实现方式：
Ajax的特点和知识点：
特点：Ajax提交，页面不刷新，形象理解为偷偷的提交数据给后端处理
实现ajax方法，要使用jQuery
知识点：1、ajax以什么方式提交数据type。
2、ajax往哪里提交要指定url。
3、ajax提交什么数据要指定data。
4、ajax提交成功和失败分别要干什么。
1-3执行完，会等待。
data是提交的数据，是字典的类型，values值提交的url中，data{"key":().val()} val是标定id里输入的值
success:function(data) 当服务端处理完函数返回数据时，自动调用这个function函数，这里的data是服务端返回的值.
比如：console.log（data）
在ajax执行完需要跳转时，是不能自行跳转的，需要些js来实现跳转。在django里用redirect也是实现不了的。
js的实现就是用location.href = "/url/"
ajax的执行流程，触发ajax，作为服务端的ajax获取到前端传输的数据data，以字典的value值的形式传给后端服务，当后端收到数据后，给前端一个返回值，执行success的function函数返回前端应该收到的返回值。在前端代码的console里可看到
ajax的班级添加demo示例：
classes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>classes</title>
<style>
.hide{
display: none;
}
.shadow{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.4;
z-index: 999;
}
.modal{
z-index: 1000;
position: fixed;
left: 50%;
top: 50%;
height: 300px;
400px;
background-color: white;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
<body>
<h1>classes_list</h1>
<div>
<a href="/add_class/">添加</a>
|
<a onclick="showModal();">对话框添加</a>
|
<a>对话框</a>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>班级名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for item in class_lsit %}
<tr>
<td>{{ item.nid }}</td>
<td>{{ item.title }}</td>
<td>
<a href="/del_class/?nid={{ item.nid }}">删除</a>
|
<a onclick="modelEdit();">对话框编辑</a>
|
<a href="/edit_class/?nid={{ item.nid }}">编辑</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div id="shadow" class="shadow hide"></div>
<div id="modal" class="modal hide">
<p>添加班级：<input id="title" type="text" name="title" placeholder="班级名称"></p>
<input type="button" value="submit" onclick="AjaxSend();"/>
<input type="button" value="取消" onclick="cancleModal();"/><span id="errormsg"></span>
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function showModal() {
document.getElementById("shadow").classList.remove("hide"); //找到遮罩层，并去挑遮罩层
document.getElementById("modal").classList.remove("hide");
}
function cancleModal() {
document.getElementById('shadow').classList.add('hide');
document.getElementById('modal').classList.add('hide')
document.getElementById('eidtModal').classList.add('hide')
}
function AjaxSend(){
$.ajax({
url:'/modal_add_classes_ajax/', //往哪里提交
type:'POST', //以什么方式提交
data:{"title":$("#title").val()}, //拿到全段输入的值
success:function (data) {
//当服务端处理完成后，返回数据时，该函数自动调用
//data是服务端返回的值
console.log(data);
if(data=="ok"){
location.href='/classes/'; //指定提交成功后跳转到哪里
}else {
$('#errormsg').text(data);
}
}
})
}
</script>
</body>
</html>
views.py的model_add_classes_ajax函数的操作示例：
def modal_add_classes_ajax(request):
#获取前端的title
title = request.POST.get('title')
print(title)
if len(title) > 0:
sqlheper.modify('insert into classes(title) values(%s)',[title,])
return HttpResponse('ok')
else:
return HttpResponse('班级标题不能为空')
--------- END ----------