Django之学员管理三
Django之学员管理三
web框架的本质：
本质是客户端和服务端的交互。用socket实现。
socket客户端（浏览器）
2、发送ip和端口，http://www.baidu.com：80/index/ (http://www.baidu.com：80) 为ip和端口，（/index/ ）是url。客户端往服务端发送请求时，是要分post和get两种请求方式。
4、接受响应，普通的响应就是正常的拿到响应体浏览器是处理呈现，而重定向是要再发一次http请求，进行一次跳转才可以。
socket服务端（服务器）
1、服务端socket先运行起来进行监听 while循环来持续监听ip和端口，等待客户连接。
3、接受请求，处理并返回相应的结果，返回的本质是一堆字符串。返回的有响应头和响应体。还有一种响应方式，是重定向返回，在重定向返回里是没有响应体的，只有响应头。在响应头里有一区别是多了一个location，在location里定义要响应跳转的url。
django的web框架：
a、创建project：django-admin startproject mysite
b、配置：模板，静态文件，csrf
c、路由关系：url-》函数
d、视图函数：
def index(request):
获取的：request.method
request.POST
request.GET
返回的：return redirect("url")
return render(request, "模板路径", { } )
return HttpResponse("字符串")
e、模板渲染：{% for %} 和 {% if %}
Ajax的本质流程：
基于jQuery实现的ajax，
$.ajax({
url:"",
type:"",
data:{k1:"v1"},
success:function(arg){
}
})
小知识点：在onclick的前面加一个href的url，是先执行onclick的事件，在跳转到href的url。但是如何在ajax里的对应事件执行完，返回return False，那么在href里的url就不在执行啦。这个方法用在form表单中。
对班级表实现ajax方式的编辑删除操作（对话框的单表的编辑操作）：
注意点：一定要注意前后端的标签id是否一致，和$(#' ') 里面要拿取的标签id前的#符号，否则会找不到值，并且前端不会有报错。
前端操作代码：
<!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;
width: 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>
</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(this);">对话框编辑</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="cancel" onclick="cancleModal();"/><span id="errormsg"></span>
</div> <div id="editModel" class="modal hide">
<h3>编辑框</h3>
<p>
<input id="editId" type="text" name="nid" style="display: none" />
<input id="editTitle" type="text" name="title" />
</p>
<input type="button" value="submit" onclick="editAjaxSend();" /><span id="errormsg"></span>
<input type="button" value="cancel" onclick="cancleModal();" />
</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('editModel').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);
}
}
})
} function modelEdit(ths) {
document.getElementById("shadow").classList.remove("hide"); //找到遮罩层，并去挑遮罩层
document.getElementById("editModel").classList.remove("hide");
/*
1、获取当前点击标签
2、获取当前标签的父标签，再找其上方标签
3、获取当前行班级名称，赋值到编辑对话框中
*/
var row = $(ths).parent().prevAll() //$(ths)是获取当前标签。 .parent是当前父标签。 .prevAll是当前级标签的上面所有的标签。
console.log(row);
var content = $(row[0]).text(); //用列表取值的方式获取title。 .text是转成文本信息。
$('#editTitle').val(content); //找到title给他赋值给val里。 var contentId = $(row[1]).text();
$('#editId').val(contentId);
} function editAjaxSend() {
var nid = $('#editId').val(); //提交操作里前端获取id
var content = $('#editTitle').val(); // 提交操作，前端获取新输入的值
console.log(nid,content);
$.ajax({
url:'/modal_edit_classes_ajax/',
type:"POST",
data:{"nid":nid,"content":content},
success:function (arg) {
// arg字符串类型
// JSON.parse(字符串) => 对象
// JSON.stringify(对象) => 字符串
arg = JSON.parse(arg);
if(arg.status){
//location.href="/classes/" //这个是跳转
location.reload(); //这个是刷新
}else{
alert(arg.message);
}
}
})
} </script>
</body>
</html>
views.py 的对应函数：
def modal_edit_classes_ajax(request):
ret = {"status":True,"message":None} #当try代码块出现问题，可以用这种方式收集错误信息
try:
nid = request.POST.get("nid") # 拿id
print(nid)
content = request.POST.get("content") #拿内容
print(content)
sqlheper.modify("update classes set title=%s where nid=%s",[content,nid,])
print("1")
except Exception as e:
ret['status'] = False
ret['message'] = "处理异常"
# ret['message'] = str(e) #异常对象的内容，用字符串的形式拿到。
return HttpResponse(json.dumps(ret)) #用json.dumps的方法使的json将数据转成字符串，在发给前端
在单表的ajax里，编辑和添加操作，班级表和老师表是一致的。
下面，我们来研究一下如何实现一对多的ajax操作，也就是学生表的操作。在操作学生表中，对比操作单表而言，对了一个连表操作，那究竟如何在ajax中加以实现这个操作呐？下面我们来看一下如何实现吧！！！
我们先实现添加操作：
在这里说明一点，单表的ajax操作是用onclick的方式实现，那么在学生表里，我们就是jQuery实现一下，这样也是为了体验和运用两种绑定事件的方法。
实现步骤区别：在标签位，和onclick不同，在a标签里不写onclick，写id就好。在导入jQuery，然后添加$(function( { } ) )
students.html 代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>students</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;
}
.add-modal{
z-index: 1000;
position: fixed;
left: 50%;
top: 50%;
height: 300px;
width: 400px;
background-color: white;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
<body>
<h1>students_list</h1>
<div>
<a href="/add_students_add/">添加</a>
|
<a id="addModal">对话框添加</a>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>学生姓名</th>
<th>所属班级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for item in students_list %}
<tr>
<td>{{ item.sid }}</td>
<td>{{ item.name }}</td>
<td>{{ item.title }}</td>
<td>
<a href="/del_students_del/?sid={{ item.sid }}">删除</a>
|
<a href="/edit_students_edit/?sid={{ item.sid }}">编辑</a>
|
<a onclick="">对话框编辑</a>
</td>
</tr>
{% endfor %}
</tbody>
</table> <div id="shadow" class="shadow hide"></div> <div id="add-Modal" class="add-modal hide">
<p>
Name:<input id="addName" type="text" name="name" placeholder="Name">
</p>
<p>
Classes:
<select id="addClassesId" name="classesID" >
{% for row in classes_list %}
<option value="{{ row.nid }}">{{ row.title }}</option>
{% endfor %}
</select>
</p>
<input id="btnAdd" type="button" value="添加" />
<input id="btncancel" type="button" value="取消" />
<span id="addError" style="color: red;"></span>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script>
//绑定事件。click进行绑定事件
$(function () {
$("#addModal").click(function () {
$("#shadow,#add-Modal").removeClass('hide');
}) $("#btncancel").click(function () {
$("#shadow,#add-Modal").addClass("hide");
}) $('#btnAdd').click(function () {
$.ajax({
url:"/modal_add_students_modal/",
type:"POST",
data:{"name":$("#addName").val(),"classes_id":$("#addClassesId").val()},
success:function (arg) {
//回调函数，
console.log(arg); //将数据发送给后台
arg = JSON.parse(arg);
if(arg.status){
location.reload();
}else{
$("#addError").text(arg.message);
}
}
})
})
}) </script>
</body>
</html>
view.py 的students表的ajax实现的后端代码：
def modal_add_students_modal(request):
ret = {"status":True,"message":None}
try:
name = request.POST.get("name")
classes_id = request.POST.get("classes_id")
sqlheper.modify('insert into students(name,classes_id) values(%s,%s)',[name,classes_id,])
except Exception as e:
ret['status'] = False
ret['message'] = str(e) return HttpResponse(json.dumps(ret))
在实现了students的ajax的添加操作后，来实现一下编辑操作。
编辑操作的点在于如何拿取班级信息，因为学生的姓名和id和单表一致，可是学生表是一对多的关联班级表，所以，如何解决班级的id获取是关键。
在编辑时，拿取班级ID和学生默认值是问题点的核心。
下面来实现一下students的编辑操作：
students.html 的学生编辑ajax操作的前端代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>students</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;
}
.add-modal{
z-index: 1000;
position: fixed;
left: 50%;
top: 50%;
height: 300px;
width: 400px;
background-color: white;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
<body>
<h1>students_list</h1>
<div>
<a href="/add_students_add/">添加</a>
|
<a id="addModal">对话框添加</a>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>学生姓名</th>
<th>所属班级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for item in students_list %}
<tr>
<td>{{ item.sid }}</td>
<td>{{ item.name }}</td>
<td clsId="{{ item.classes_id }}">{{ item.title }}</td>
<td>
<a href="/del_students_del/?sid={{ item.sid }}">删除</a>
|
<a href="/edit_students_edit/?sid={{ item.sid }}">编辑</a>
|
<a class="btn-edit">对话框编辑</a>
</td>
</tr>
{% endfor %}
</tbody>
</table> <div id="shadow" class="shadow hide"></div> <div id="add-Modal" class="add-modal hide">
<p>
Name:<input id="addName" type="text" name="name" placeholder="Name">
</p>
<p>
Classes:
<select id="addClassesId" name="classesID" >
{% for row in classes_list %}
<option value="{{ row.nid }}">{{ row.title }}</option>
{% endfor %}
</select>
</p>
<input id="btnAdd" type="button" value="add" />
<input onclick="cancleModal();" type="button" value="cancel" />
<span id="addError" style="color: red;"></span>
</div> <div id="editModal" class="add-modal hide">
<h3>编辑学生信息</h3>
<p>
学生姓名：<input id="editName" type="text" name="name" placeholder="Name">
<input type="text" id="editId" style="display: none">
</p>
<p>
所属班级：
<select id="editClassesId" name="classes_id" >
{% for classes in classes_list %}
<option value="{{ classes.nid }}">{{ classes.title }}</option>
{% endfor %}
</select>
</p>
<input id="btnEdit" type="button" value="update">
<input onclick="cancleModal();" type="button" value="cancel">
<span id="editError" style="color: red;"></span>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script>
//绑定事件。click进行绑定事件
$(function () {
$("#addModal").click(function () {
$("#shadow,#add-Modal").removeClass('hide');
}) $('#btnAdd').click(function () {
$.ajax({
url:"/modal_add_students_modal/",
type:"POST",
data:{"name":$("#addName").val(),"classes_id":$("#addClassesId").val()},
success:function (arg) {
//回调函数，
console.log(arg); //将数据发送给后台
arg = JSON.parse(arg);
if(arg.status){
location.reload();
}else{
$("#addError").text(arg.message);
}
}
})
}) $(".btn-edit").click(function () {
$("#shadow,#editModal").removeClass("hide");
/*
1.获取当前标签 $(this) 就是当期标签
*/
var tds = $(this).parent().prevAll();
var studentsId = $(tds[2]).text();
var studentsName = $(tds[1]).text();
var classesId = $(tds[0]).attr("clsId");
console.log(studentsId,studentsName,classesId); //赋值操作，也就是带默认值
$("#editId").val(studentsId);
$("#editName").val(studentsName);
$("#editClassesId").val(classesId); }) $("#btnEdit").click(function () {
$.ajax({
url:'/modal_edit_students_modal/',
type:"POST",
data:{"sid":$("#editId").val(),"name":$("#editName").val(),"classes_id":$("#editClassesId").val()},
dataType:"JSON", //这里的JSON就直接做了JSON的序列化操作，执行JSON.parse(arg) 在这里JSON会先把arg先转换为对象
success:function (arg) {
if (arg.status){
location.reload();
}else{
$("#editError").text(arg.message);
}
}
})
})
}) //取消操作
function cancleModal() {
document.getElementById('shadow').classList.add('hide');
document.getElementById('add-Modal').classList.add('hide')
document.getElementById('editModal').classList.add('hide')
} </script>
</body>
</html>
views.py 的学生编辑ajax后端代码实现：
def modal_edit_students_modal(request):
ret = {"status":True,"message":None}
try:
sid = request.POST.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,])
except Exception as e:
ret["status"] = False
ret["message"] = str(e)
return HttpResponse(json.dumps(ret))
一对多的操作在学生表的操作里展现的可以简单说明啦，那么下面，我们来看一下多对多的操作：
老师班级关系表：
id teacher_id class_id
多对多建表操作请去目录数据库查看mysql多对多操作。
先实现查操作，就是在前端显示出老师和班级的关联：
但是，多对多的展示，是要有一个基准表的，一谁去查，比如我们的老师班级关系表，我们可以以老师为基准，去查看这个老师都授课了那些班级，也可以以班级表为基准，来查看这个班级都有那些老师来授课，并且有一点，在展示时，不能展示teacher_id 和 class_id 的id号，而是老师的姓名或班级的名称。
多对多操作：查看
我们这里以老师表为基准，来展示一下， 所以就创建一个teacherandclass。
问题点，如何在一行里显示一个老师任课的多个班级，是要将班级的字典都存在在一个列表里，那样就可以实现一行数据里显示一个老师或班级，所属的多个班级或老师啦。
teacherandclass.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>teacherandclass</title>
</head>
<body>
<h1>老师和班级关系表</h1>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Teacher name</th>
<th>Class name</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for foo in teacher_class_list %}
<tr>
<td>{{ foo.tid }}</td>
<td>{{ foo.name }}</td>
<td>
{% for item in foo.titles %}
<span style="display: inline-block;padding: 5px;border: 1px solid red;">{{ item }}</span>
{% endfor %}
</td>
<td>
<a >Edit</a>
|
<a >Delete</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
在后端的teacherandclass.py 函数：
def teacherandclass(request):
teacher_class_list = sqlheper.get_list("""
select teacher.nid as tid,teacher.`name`,classes.title from teacher
LEFT JOIN teacherandclasses ON teacher.nid = teacherandclasses.teacher_id
LEFT JOIN classes ON classes.nid = teacherandclasses.class_id;
""",[])
print(teacher_class_list)
result = {} #定义一个空字典，用来存放 teacher_class_list 的数据
for row in teacher_class_list: #循环teacher_class_list 列表，将列表的每一个字典取出来处理
tid = row["tid"] #拿取字典的每一个tid进行判断
if tid in result: #如果tid在已有的result字典里，就将这个tid所属的title加进新定义的titles里
result[tid]["titles"].append(row["title"])
else: #如果没有的话，就将新的tid按照新定义的形式，加到result里
result[tid] = {"tid":row["tid"],"name":row["name"],"titles":[row["title"],]}
return render(request,"teacherandclass.html",{"teacher_class_list":result.values()})
以上是多对多的查看操作的实现方式。
那么多对多的添加和编辑操作，如何实现呐！请看下回分解，在下一期，我们不仅仅会实现多对多的添加和编辑，还会有ajax的多对多的操作。
--------- END ----------
Django之学员管理三的更多相关文章
- Django之学员管理一
Django之学员管理一 建表结构: #班级表class: id title 1 五年一班 2 五年二班 3 五年三班 4 五年四班 #学生表student: id name 班级ID(FK外键) 1 ...
- Django之学员管理
Django之学员管理 实现-------在前端页面提交的数据,后端可直接写入数据库.在页面实现操作数据库的增删改查. 数据表设计:(三个角色四张表) 班级表: id title 1 花果山国小一年级 ...
- Django之学员管理二
Django之学员管理二 学生表的一对多的增删改查 views.py def students(request): #select students.sid,students.name,classes ...
- Django pymysql学员管理系统
学员管理系统 项目规划阶段 项目背景 近年来老男孩教育的入学学员数量稳步快速增长,传统的excel统计管理学员信息的方式已经无法满足日渐增长的业务需求.因此公司急需一套方便易用的“学员管理系统”,来提 ...
- 我的django之旅（三）数据库和模型
我的django之旅(三)模型和数据库 标签(空格分隔):模型 数据库 ORM 1.django ORM django内置了一套完整的解决方案,其中就包括他自己的ORM.可惜没有使用SQLAlchem ...
- Django 2.0.1 官方文档翻译: 编写你的第一个 Django app，第三部分（Page 8）
编写你的第一个 Django app,第三部分(Page 8)转载请注明链接地址 本页教程接前面的第二部分.我们继续开发 web-poll app,我们会专注于创建公共接口上 -- "视图& ...
- Django中模型（三）
Django中模型(三) 四.模型成员 1.类属性 objects:是Manager类的一个对象,作用是与数据库进行交互. 定义模型类时,没有定义管理器,则默认创建名为objects的管理器. 2.自 ...
- python框架Django使用xadmin管理后台数据
Django使用xadmin管理后台数据 关注公众号"轻松学编程"了解更多. 作用:xadmin比Django内置的admin更美观.更方便. 一.导入xadmin(第三方库) 方 ...
- python学习笔记--Django入门四 管理站点--二
接上一节 python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...
随机推荐
- Django使用dwebsocket来通信，服务器报错[Error 10038]
记录这次Django踩得最大的一次坑,没有之一.前前后后困扰了一周. 在使用Django的dwebsocket模块建立websocket时,不管是前端主动关闭,还是页面刷新,还是页面关闭.服务端均会报 ...
- python之list操作
序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. 列表(list)是最常用的Python数据类型,它可以作为一个方 ...
- Codeforces Round #402 (Div. 2) B
Description Polycarp is crazy about round numbers. He especially likes the numbers divisible by 10k. ...
- 暴力 Codeforces Round #305 (Div. 2) B. Mike and Fun
题目传送门 /* 暴力:每次更新该行的num[],然后暴力找出最优解就可以了:) */ #include <cstdio> #include <cstring> #includ ...
- Windows下DVWA安装指南
注意:DVWA需要依赖httpd.PHP.MySQL.php-mysql等应用或组件,最简单的方法是安装wampserver(http://www.wampserver.com/),安装完了所需的各种 ...
- Python+selenium定位不到元素的问题及解决方案
在操作过程中主要遇到两种阻塞的问题,总结如下: 1.页面中有iframe,定位元素时,需要用switch_to.frame()转换到元素所在的frame上再去定位 2.遇到一种新情况,有些按钮在htm ...
- Chrome下font-size小于12px的解决办法
自从Chorme取消了-webkit-text-size-adjust,这个问题又变得令人烦恼起来. 好在我们可以利用-webkit-transform这个私有属性. .box{ -webkit-tr ...
- MySQL系列：隐式类型转化可能带来的坑
在开发规范中,我们往往会要求研发避免在where条件中出现隐式类型转换,这么要求大概有以下两方面的原因: 隐式类型转换可能导致索引失效: 隐式类型转换可能产生非预期的结果. 注:这里说的是隐式类型转换 ...
- js事件、Js中的for循环和事件的关系、this
一.js事件 1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...
- 【学习笔记】深入理解js原型和闭包（6）——继承
为何用“继承”为标题,而不用“原型链”? 原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆.而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中 ...