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 ...
随机推荐
- 极限和连续 limits + Continue
上一节我们将导数定义为切线的斜率,这是一种几何解释.我们求出了1/x的斜率为 -1/x2 求出了 f(x) = xn 的斜率是 f”(x) = n*xn-1 这些几何的推导都是根据y-y0 = k ...
- android 百度地图
展示当前位置地图 参考百度定位demo (LocationDemo) 实现此功能,运行发现 BDLocationListener 的onReceiveLocation方法无法执行,原因是 Androi ...
- net 上传视频
[HttpPost] public ActionResult MultiUpload() { System.Web.HttpFileCollectio ...
- Spring 2.5
Spring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释,它们分别是:@Repository.@Service 和 @Controller.在目前的 Spring ...
- Lucky Array Codeforces - 121E && Bear and Bad Powers of 42 Codeforces - 679E
http://codeforces.com/contest/121/problem/E 话说这题貌似暴力可A啊... 正解是想出来了,结果重构代码,调了不知道多久才A 错误记录: 1.线段树搞混num ...
- Codeforces Round #325 (Div. 2)
水 A - Alena's Schedule /************************************************ * Author :Running_Time * Cr ...
- 【转】log4j的日志
一.Log4j配置 第一步:加入log4j-1.2.8.jar到lib下. 第二步:在CLASSPATH下建立log4j.properties.内容如下: 放在src下的话就不用配置 否则得去web. ...
- Android开发-浅谈架构(二)
写在前面的话 我记得有一期罗胖的<罗辑思维>中他提到 我们在这个碎片化 充满焦虑的时代该怎么学习--用30%的时间 了解70%该领域的知识然后迅速转移芳草鲜美的地方 像游牧民族那样.原话应 ...
- 外文翻译 《How we decide》被情感愚弄 第二节
本节阅读感言:我们在遭受损失后,很容易破罐子破摔,做出更糟糕的决定. 书的导言 本章第一节 情感系统的缺陷会产生很重要的影响.想一想股票市场,一个典型的随机系统的例子.短期的波动无法给未来长期的股市情 ...
- hdu1513 Palindrome
思路: dp+滚动数组. 实现: #include <iostream> #include <cstdio> #include <string> #include ...