day90-django学生列表之增删改查（form提交)、思路、关于ajax的知识点
1.urls.py from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('students/', views.students), path('add_student/', views.add_student), path('del_student/', views.del_student), path('edit_student/', views.edit_student), ] 2.sqlhelper.py import pymysql def get_list(sql,args): conn = pymysql.connect( host='localhost', port=3306, user='root', password='123', database='django_test', charset='utf8' ) cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute(sql,args) result = cursor.fetchall()#[{k1:v1,k2:v2,k3:v3},{k1:v1,k2:v2,k3:v3}] cursor.close() conn.close() return result def get_one(sql,args): conn = pymysql.connect( host='localhost', port=3306, user='root', password='123', database='django_test', charset='utf8' ) cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute(sql,args) result = cursor.fetchone()#{k1:v1,k2:v2,k3:v3} cursor.close() conn.close() return result def modify(sql,args): conn = pymysql.connect( host='localhost', port=3306, user='root', password='123', database='django_test', charset='utf8' ) cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) cursor.execute(sql,args) conn.commit() cursor.close() conn.close() 3.views.py from app01 import sqlhelper from django.shortcuts import render,redirect #学生列表 def students(request): result = sqlhelper.get_list('select students.id,students.name,classes.title from students left join classes on students.class_id = classes.id',[]) return render(request,'students.html',{'result':result}) #添加学生 def add_student(request): if request.method == 'GET': classes = sqlhelper.get_list('select id,title from classes',[]) return render(request,'add_student.html',{'classes':classes}) else: name = request.POST.get('name') class_id = request.POST.get('class_id') if name.strip(): sqlhelper.modify('insert into students(name,class_id) values(%s,%s) ',[name,class_id]) return redirect('/students/') else: classes = sqlhelper.get_list('select id,title from classes', []) return render(request, 'add_student.html', {'classes': classes,'name_error':'姓名不能为空'}) #删除学生 def del_student(request): nid = request.GET.get('nid') sqlhelper.modify('delete from students where id=%s',[nid]) return redirect('/students/') #编辑学生 def edit_student(request): if request.method == 'GET': nid = request.GET.get('nid') students = sqlhelper.get_one('select id,name,class_id from students where id=%s',[nid]) classes = sqlhelper.get_list('select id,title from classes',[]) return render(request,'edit_student.html',{'students':students,'classes':classes}) else: nid = request.GET.get('nid') name = request.POST.get('name') class_id = request.POST.get('class_id') if name.strip(): sqlhelper.modify('update students set name=%s,class_id=%s where id=%s',[name,class_id,nid]) return redirect('/students/') else: students = sqlhelper.get_one('select id,name,class_id from students where id=%s', [nid]) classes = sqlhelper.get_list('select id,title from classes', []) return render(request, 'edit_student.html', {'students': students, 'classes': classes,'name_error':'姓名不能为空'})
4.students.html
<body> <h1>学生列表</h1> <a href="/add_student/">添加</a> <table border="1"> <thead> <tr> <th>id</th> <th>name</th> <th>title</th> <th>操作</th> </tr> </thead> <tbody> {% for row in result %} <tr> <td>{{ row.id }}</td> <td>{{ row.name }}</td> <td>{{ row.title }}</td> <td> <a href="/edit_student/?nid={{ row.id }}">编辑</a> | <a href="/del_student/?nid={{ row.id }}">删除</a> </td> </tr> {% endfor %} </tbody> </table> </body>
5.add_student.html
<body> <h1>添加学生</h1> <form method="POST" action="/add_student/"> <p>姓名： <input type="text" name="name"> <span style="color:red">{{ name_error }}</span> </p> <p>班级： <select name="class_id"> {% for row in classes %} <option value="{{ row.id }}">{{ row.title }}</option> {% endfor %} </select> </p> <p> <input type="submit" value="提交"> </p> </form> </body>
6.edit_student.html
<body> <h1>编辑学生</h1> <form method="POST" action="/edit_student/?nid={{ students.id }}"> <p>姓名： <input type="text" name="name" value="{{ students.name }}"> <span style="color:red">{{ name_error }}</span> </p> <p>班级： <select name="class_id"> {% for row in classes %} <!--如果学生表的班级id等于班级表的id，就选中该学生所在的班级显示出来--> {% if students.class_id == row.id %} <option selected value="{{ row.id }}">{{ row.title }}</option> {% else %} <option value="{{ row.id }}">{{ row.title }}</option> {% endif %} {% endfor %} </select> </p> <p> <input type="submit" value="提交"> <a href="/students/">取消</a> </p> </form> </body>
步骤：
添加学生(跳转到新的页面,没使用模态框)
1.学生列表点添加(a标签)
2.把请求通过/url/发给服务器
3.fetchall获取班级表的id、title
4.模板语言-特殊字符替换(班级表的id、title)
5.返回新的html给浏览器
6.浏览器跳转到新的页面
7.页面就有了默认班级名称可选择
8.输入了姓名和选择了班级,点提交
9.服务器request.POST.get('name')获取姓名，request.POST.get('class_id')获取选择的班级id
10.把姓名、班级id传给数据库的sql语句做修改
11.最后return redirect('/students/')给浏览器，浏览器展示学生列表页面
2.把请求通过/url/发给服务器
3.fetchall获取班级表的id、title
4.模板语言-特殊字符替换(班级表的id、title)
5.返回新的html给浏览器
6.浏览器跳转到新的页面
7.页面就有了默认班级名称可选择
8.输入了姓名和选择了班级,点提交
9.服务器request.POST.get('name')获取姓名，request.POST.get('class_id')获取选择的班级id
10.把姓名、班级id传给数据库的sql语句做修改
11.最后return redirect('/students/')给浏览器，浏览器展示学生列表页面
编辑学生(跳转到新的页面,没使用模态框)
1.学生列表点编辑(a标签)
2.把请求通过/url/?nid={{row.id}}发给服务器
3.服务器request.GET.get('nid')获取到编辑的当前行的id
4.把id传给数据库的sql语句
5.fetchone获取到编辑的当前行的学生表的id、name、class_id放在字典result里面
6.fetchall获取班级表的id、title
7.模板语言-特殊字符替换，edit_student.html(如果学生表的班级class_id等于班级表的id，就被选中，姓名就可以跟班级名称对应上)
8.返回新的html给浏览器
9.浏览器跳转到新的页面
10.页面就有了默认的name和title(姓名和班级名称)
11.修改了name、title,点提交
12.服务器request.GET.get('nid')获取id，request.POST.get('name')获取修改后的名字name，
request.POST.get('class_id')获取修改后的class_id
13.把id、name、class_id传给数据库的sql语句做修改
14.最后return redirect('/students/')给浏览器，浏览器展示学生列表页面
2.把请求通过/url/?nid={{row.id}}发给服务器
3.服务器request.GET.get('nid')获取到编辑的当前行的id
4.把id传给数据库的sql语句
5.fetchone获取到编辑的当前行的学生表的id、name、class_id放在字典result里面
6.fetchall获取班级表的id、title
7.模板语言-特殊字符替换，edit_student.html(如果学生表的班级class_id等于班级表的id，就被选中，姓名就可以跟班级名称对应上)
8.返回新的html给浏览器
9.浏览器跳转到新的页面
10.页面就有了默认的name和title(姓名和班级名称)
11.修改了name、title,点提交
12.服务器request.GET.get('nid')获取id，request.POST.get('name')获取修改后的名字name，
request.POST.get('class_id')获取修改后的class_id
13.把id、name、class_id传给数据库的sql语句做修改
14.最后return redirect('/students/')给浏览器，浏览器展示学生列表页面
删除学生(跳转到新的页面,没使用模态框)
1.学生列表点删除(a标签)
2.把请求通过/url/?nid={{row.id}}发给服务器
3.服务器request.GET.get('nid')获取到删除的当前行的id
4.把id传给数据库的sql语句，删除当前行
5.最后return redirect('/students/')给浏览器，浏览器展示学生列表页面
2.把请求通过/url/?nid={{row.id}}发给服务器
3.服务器request.GET.get('nid')获取到删除的当前行的id
4.把id传给数据库的sql语句，删除当前行
5.最后return redirect('/students/')给浏览器，浏览器展示学生列表页面
知识点：
1.模板语言if语句
2.Form表单提交会刷新页面，导致模态框消失，当服务器检测到提交的数据为空时，Ajax提交不需要刷新页面，模态框不消失，
就可以在模态框当中显示‘内容不能为空’
3.Ajax内部使用js实现页面跳转：location.href = '/classes/'是跳到指定页面；location.reload()是跳到当前页面
4.模态框+Ajax：少量输入框，数据少，例如抽屉新热榜网站的登录页面
新的页面：有广告，数据量大，操作多，例如京东登录页面
5.创建模块：pymysql操作mysql的语句，封装到函数里面。
6.后台序列化：import json
str_dict = json.dumps(dict)字典转为字符串：序列化
dict = json.loads(str_dict)字符串转为字典：反序列化
7.前端序列化：JSON.parse(字符串) => 对象,字符串转为对象（反序列化）。前端叫对象，没字典的概念。对象.key = value
JSON.stringify(对象) => 字符串，对象转为字符串（序列化）
dataType:'JSON',相当于JSON.parse(字符串)，要写在success:function(args){}的前面，ajax内部就不需要写JSON.parse(字符串)了。
8.<div id='d1' cls_id='10'>title</div> 通过自定义属性来取值，$('#d1').attr('cls_id')结果是10
9.<select id='d2'>
<option value='1'>title1<option>
<option value='2'>title2<option>
</select>
如果选中了title1，那么$('#d2').val()就是选中的值1；
如果想设置默认值，那么$('#d2').val('2')就是设置值2作为默认值，到时title2会自动显示出来。(模态框的默认值有用到这个知识点)
1.模板语言if语句
2.Form表单提交会刷新页面，导致模态框消失，当服务器检测到提交的数据为空时，Ajax提交不需要刷新页面，模态框不消失，
就可以在模态框当中显示‘内容不能为空’
3.Ajax内部使用js实现页面跳转：location.href = '/classes/'是跳到指定页面；location.reload()是跳到当前页面
4.模态框+Ajax：少量输入框，数据少，例如抽屉新热榜网站的登录页面
新的页面：有广告，数据量大，操作多，例如京东登录页面
5.创建模块：pymysql操作mysql的语句，封装到函数里面。
6.后台序列化：import json
str_dict = json.dumps(dict)字典转为字符串：序列化
dict = json.loads(str_dict)字符串转为字典：反序列化
7.前端序列化：JSON.parse(字符串) => 对象,字符串转为对象（反序列化）。前端叫对象，没字典的概念。对象.key = value
JSON.stringify(对象) => 字符串，对象转为字符串（序列化）
dataType:'JSON',相当于JSON.parse(字符串)，要写在success:function(args){}的前面，ajax内部就不需要写JSON.parse(字符串)了。
8.<div id='d1' cls_id='10'>title</div> 通过自定义属性来取值，$('#d1').attr('cls_id')结果是10
9.<select id='d2'>
<option value='1'>title1<option>
<option value='2'>title2<option>
</select>
如果选中了title1，那么$('#d2').val()就是选中的值1；
如果想设置默认值，那么$('#d2').val('2')就是设置值2作为默认值，到时title2会自动显示出来。(模态框的默认值有用到这个知识点)
