Django之路：简单的增删改查，模态对话框、ajax（5）
1.学生管理系统
相对于上一种方法来说，会有许多的代码是可以重复使用的。所以创建文件mysite – app01 – sqlheper.py
import pymysql
def get_list(sql,args):
#获取列表全部信息
conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='root', db='pydata', charset='utf8')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
cursor.execute(sql, args)
result = cursor.fetchall()
cursor.close()
conn.close()
return result
def add_list(sql,args):
#增加修改删除都是用它
conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='root', db='pydata', charset='utf8')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
cursor.execute(sql, args)
conn.commit()
cursor.close()
conn.close()
def get_one(sql,args):
#拿一条信息用这个
conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='root', db='pydata', charset='utf8')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
cursor.execute(sql, args)
result = cursor.fetchone()
cursor.close()
conn.close()
return result
views.py
注意要在文件开头先加载文件
from app01 import sqlheper
增加函数
#学生添加
def add_student(request):
if request.method == "GET":
class_list = sqlheper.get_list("select id,title from class",[])
return render(request,'add_student.html',{'class_list':class_list})
else:
name = request.POST.get('name')
class_id = request.POST.get('class_id')
sqlheper.add_list("insert into student(name,class_id) values (%s,%s)",[name,class_id])
return redirect('/students/')
#学生删除
def del_student(request):
sid = request.GET.get('sid')
sqlheper.add_list("delete from student where id=%s", [sid, ])
return redirect('/students/')
新建html文件，mysite – templates – student.html
<body>
<h1>学生列表</h1>
<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 student_list %}
<tr>
<td>{{ row.id }}</td>
<td>{{ row.name }}</td>
<td>{{ row.title }}</td> {# //自定义属性，班级名里面包含班级ID#}
{# {{ row.class_id }} #}
<td><a href="/edit_student/?sid={{row.id}}">编辑</a>
| <a class="btn_edit">对话框编辑</a>
| <a href="/del_student/?sid={{row.id}}">删除</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
新建html文件，mysite – templates – add_student.html
<body>
<h1>添加学生</h1>
<form method="post" action="/add_student/">
<p>学生姓名：<input type="text" name="name"></p>
<p>所属班级：
{# 下面的是下拉框，班级名称的输入不能手动去输入，要从class数据库里面去拿#}
<select name="class_id">
{% for row in class_list %}
<option value="{{ row.id }}">{{ row.title }}</option>
{% endfor %}
</select>
</p>
<input type="submit" value="提交">
</form>
</body>
编辑这个是重点，拿出来单独看
POST下面的 sid = request.GET.get(‘sid’)为什么是用GET，是因为在html上，发送的请求是 action="/edit_student/?sid={{ surrent_student_info.id }}，这里的sid是跟着url一起过来的，是GET请求。而name,clss_id是在请求体过来的，是POST
#学生编辑
def edit_student(request):
if request.method == "GET":
sid = request.GET.get('sid')
class_list = sqlheper.get_list("select id,title from class",[]) #查询出全部的班级
surrent_student_info = sqlheper.get_one('select id,name,class_id from student where id=%s',[sid,]) #查询出一个学生的全部信息
return render(request,'edit_student.html',{'class_list':class_list,'surrent_student_info': surrent_student_info})
else:
#post请求过来，分别获取到sid,name,class_id,调用数据库函数，
sid = request.GET.get('sid')
name = request.POST.get('name')
class_id = request.POST.get('class_id')
sqlheper.add_list("update student set name= %s ,class_id=%s where id = %s", [name,class_id,sid, ])
return redirect('/students/')
新建html文件，mysite – templates – edit_student.html
<body>
<h1>编辑学生</h1>
<form method="post" action="/edit_student/?sid={{ surrent_student_info.id }}">
<p>学生姓名：<input type="text" name="name" value="{{surrent_student_info.name}}"></p>
<p>所属班级：
<select name="class_id">
{% for row in class_list %} {# 循环获取所有班级#}
{# 如果是当前学生所在的班级，则默认选中#}
{# 如果循环row_id == surrent_student_info.class_id 就默认显示 rug #}
{% if row.id == surrent_student_info.class_id %}
<option selected value="{{ row.id }}">{{ row.title }}</option>
{% else %}
<option value="{{ row.id }}">{{ row.title }}</option>
{% endif %}
{% endfor %}
</select>
</p>
<input type="submit" value="修改">
</form>
</body>
{% if row.id == surrent_student_info.class_id %}
{{ row.title }}
{% else %}
{{ row.title }}
{% endif %}
这个意义为，该学生以有的班级class_id，这我这边页面要把这个班级名称设置为默认值，而不能单纯的做成下拉框循环数班级名称数据而已。当 row.id == surrent_student_info.class_id，下拉框默认为selected value="{{ row.id }}">{{ row.title }}，否则{{ row.title }}是轮询出的最好的那个了。
注意别忘了urls.py需要增加
path('students/',views.students),
path('add_student/',views.add_student),
path('del_student/',views.del_student),
path('edit_student/',views.edit_student),
2.模态对话框
修改之前的classes.html页面的代码
下面的包含了模态对话框和Ajax的内容
模态对话框中间注释的是使用Formt提交的方式，而Form的特性是点提交后会刷新页面,如果要#目标是要页面不刷新，页面显示错误提示，，但由于使用form表单提交，这个功能无法实现。者需要用上Ajax。
<!DOCTYPE html>
<html lang="en">
<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: 99; {# 这个值越大，越在前面 #}
}
.modal{
z-index: 100; {# 这个值越大，越在前面 #}
position: fixed;
left: 50%;
top: 50%;
height: 300px; {#高度#}
width: 400px;{#宽度#}
background-color: white;{#背景颜色#}
margin-left: -200px; {#左移动200#}
margin-top: -150px;
}
</style>
</head>
<body>
<h1>班级列表</h1>
<div>
<a href="/add_class/">添加</a>{{ add_se }}
<a onclick="showModal()">对话框添加</a> {# m模态对话框 showModal()使用上一个函数 #}
</div>
<table border="1" >
<thead>
<tr>
<th>班级ID</th>
<th>班级名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for msg in class_list %}
<tr>
<td>{{ msg.id }}</td>
<td>{{ msg.title }}</td><td><a href="/edit_class/?nid={{ msg.id }}">编辑</a> | <a href="/del_class/?nid={{ msg.id }}">删除</a></td>
</tr>
{% endfor %}
</tbody>
</table>
{# m模态对话框 #}
{# 遮罩层 #}
<div id="shadow" class="shadow hide" ></div>
{# 对话框 #}
<div id="modal" class="modal hide">
<h3>添加班级：</h3>
{# #目标是要页面不刷新，页面显示错误提示，，但由于使用form表单提交，这个功能无法实现。 使用ajax #}
{#
{# #}
{# #}
{# #}
{# #}
{##}
{# #}
{#views.py增加函数
################对话框###################
def modal_add_class(request):
title = request.POST.get('title')
if len(title)>0:
sqlheper.add_list('insert into class(title) value (%s)', [title, ])
# return redirect('/classes/') 通过ajax返回什么都不会跳转，本质上，它只返回字符串，想要跳转，只能自己写JS跳转
return HttpResponse("ok")
else:
return HttpResponse('标题不能为空')
# print(title)
# import time
# time.sleep(5) #延时五秒
# return HttpResponse('ok')
# if len(title)>0:
# sqlheper.add_list('insert into class(title) value (%s)' ,[title,])
# return redirect('/classes/')
# #form表单提交的特性，只要提交了都会刷新页面
# else:
# #目标是要页面不刷新，页面显示错误提示，，但由于使用form表单提交，这个功能无法实现。
# pass
urls.py,增加
path('modal_add_class/',views.modal_add_class),
3.Ajax
#目标是要页面不刷新，页面显示错误提示，，但由于使用form表单提交，这个功能无法实现。
Ajax可实现页面不刷新，数据偷偷地发送到后台，
没有对话框一样可以提交数据，没有模态对话框也一样可以用。
引入jQuery
创建文件夹 --mysite – static,把架包jquery-2.1.4.min.js放进去
链接：https://pan.baidu.com/s/1d8-muJkgTk6b4sLAsnwdyQ
提取码：cm6k
$.ajax({
url:‘要提交的地址’，
type:‘POST’, //GET或POST，提交方式
data:{‘k1’:‘v1’,‘k2’:‘v2’}, //提交的数据
success:function(data){
//当前服务端处理完毕后，自动执行的回调函数
//data返回的数据
}
})
其他：
1.目标语言if条件语句
2.form表单提交，页面会刷新
3.Ajax提交页面不会刷新页面
4.jd实现页面跳转：
location.href = “要跳转的地址”
5.模态对话框（Ajax）
-少量的输入框或下拉框
-数据少
常用登陆框
新URL方式
-对于大量的操作和数据这个是适用的
- 数据多.