内容概要
1、Form表单
2、Ajax
3、布局，Django母板
4、序列化
5、Ajax相关
6、分页
7、XSS攻击
8、CSRF
9、CBV、FBV
10、类中用装饰器的两种方法
11、上传文件
12、数据库正向查询、反向查询、多对多查询
13、jQuery对象和DOM对象可以互相转换
14、cookie和session
用户管理，功能：
1、用户登录
2、注册
3、注销
4、后台管理菜单
5、班级操作
6、老师、学生
补充知识点：
前端提交数据到后端的两种方法：
——form表单
——ajax
1、Form表单
用法：
通过type=submit提交
一般表单提交通过type=submit实现，input type="submit",浏览器显示为button按钮，通过点击这个按钮提交表单数据跳转到/url.do
<form action="/url.do" method="post"><input type="text" name="name"/><input type="submit" value="提交">
</form> 学生管理的添加页面中，下拉框选班级用select option标签
add_student.html中
<form action="/add_student.html" method="POST"><p><input placeholder="学生姓名" type="text" name="name" /></p><p><input placeholder="学生邮箱" type="text" name="email" /></p><p><!-- <input placeholder="班级ID" type="text" name="cls_id" /> -->
{# form表单提交时会将select里面选中的结果cls_id=value的值一起提交过去 #} <select name="cls_id">{% for op in cls_list %}<option value="{{ op.id }}">{{ op.caption }}</option>{% endfor %}</select></p><input type="submit" value="提交"/></form>
views中的函数def add_student(request):if request.method == "GET":cls_list = models.Classes.objects.all()[0: 20]return render(request, 'add_student.html', {'cls_list': cls_list})elif request.method == "POST":name = request.POST.get('name')email = request.POST.get('email')cls_id = request.POST.get('cls_id')models.Student.objects.create(name=name,email=email,cls_id=cls_id)return redirect('/student.html')
详细内容：
表单标签<form>
表单用于向服务器传输数据。
1.表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式 post/get 默认取值 就是 get（信封）
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
get/post是常见的两种请求方式.
2.表单元素
<input> 标签的属性和对应值
type: text 文本输入框password 密码输入框radio 单选框checkbox 多选框 submit 提交按钮 button 按钮(需要配合js使用.) button和submit的区别？file 提交文件：form表单需要加上属性enctype="multipart/form-data" name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：1.type="button", "reset", "submit" - 定义按钮上的显示的文本2.type="text", "password", "hidden" - 定义输入字段的初始值3.type="checkbox", "radio", "image" - 定义与输入相关联的值 checked: radio 和 checkbox 默认被选中4.readonly: 只读. text 和 password5.disabled: 对所用input都好使.上传文件注意两点：
1 请求方式必须是post
2 enctype="multipart/form-data"
实例：接收文件的py文件
def index(request):print request.POSTprint request.GETprint request.FILESfor item in request.FILES:fileObj = request.FILES.get(item)f = open(fileObj.name, 'wb')iter_file = fileObj.chunks()for line in iter_file:f.write(line)f.close()return HttpResponse('ok')
2、Ajax
基于jQuery的ajax：
$.ajax({url:"//",data:{a:1,b:2}, /*当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式(urlencoded:?a=1&b=2)发送给服务端；*/dataType： /*预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。*/type:"GET",success:function(){}})
基于JS的ajax：
采用ajax异步方式，通过js获取form中所有input、select等组件的值，将这些值组成Json格式，通过异步的方式与服务器端进行交互，
一般将表单数据传送给服务器端，服务器端处理数据并返回结果信息等
用法：
- 处理浏览器兼容问题，来创建XMLHttpRequest对象：
- 创建XMLHttpRequest对象；
- 调用open()方法打开与服务器的连接；
- 调用send()方法发送请求；
- 为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在 XMLHttpRequest的1、2、3、4，四种状态时被调用；
<h1>AJAX</h1>
<button οnclick="send()">测试</button>
<div id="div1"></div><script>function createXMLHttpRequest() {try {return new XMLHttpRequest();//大多数浏览器} catch (e) {try {return new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {return new ActiveXObject("Microsoft.XMLHTTP");}}}function send() {var xmlHttp = createXMLHttpRequest();xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {var div = document.getElementById("div1");div.innerText = xmlHttp.responseText;div.textContent = xmlHttp.responseText;}};xmlHttp.open("POST", "/ajax_post/", true);//post: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xmlHttp.send(null); //post: xmlHttp.send("b=B");}</script>#--------------------------------views.py
from django.views.decorators.csrf import csrf_exemptdef login(request):print('hello ajax')return render(request,'index.html')@csrf_exempt ＃csrf防御
def ajax_post(request):print('ok')return HttpResponse('helloyuanhao')
注：POST请求时，要在send之前，open之后加请求头
3、布局，Django母板
母板中：
{% block title（给这个block取一个名字） %}
………………
{% endblock %}
子模板中：
{% extends "base.html" %}#继承自“base.html”{% block title %}Future time{% endblock %}{% block content %}
<p>In {{ hour_offset }} hour(s), it will be {{ next_time }}.</p>
{% endblock %}
8.CSRF
{%csrf_token%}：csrf_token标签
用于生成csrf_token的标签，用于防治跨站攻击验证。注意如果你在view的index里用的是render_to_response方法，不会生效，而应该用render。
其实，这里是会生成一个input标签，和其他表单标签一起提交给后台的。
<form action="{% url "bieming"%}" ><input type="text"><input type="submit"value="提交">{%csrf_token%}
</form>
9.FBV 和 CBV
views.py
# 方法一：FBV
def login(request):if request.method == "POST":user = request.POST.get("user")pwd = request.POST.get("pwd")c = models.Administrator.objects.filter(username=user,password=pwd).count()print(c)if c:#设置session中存储的数据request.session["is_login"] = Truerequest.session["username"] = user#尤其注意跳转到哪个页面！！！return render(request,"index.html",{"username":user})else:msg = "用户名或密码错误"return redirect("/login.html",{"msg":msg})return render(request,"login.html")
-----------------------------------------------------------------
urs.py
# url(r'^login.html$', views.login),
cbv：
#CBV
from django import views
class Login(views.View):def get(self,request,*args,**kwargs):return render(request, "login.html")def post(self,request,*args,**kwargs):user = request.POST.get("user")pwd = request.POST.get("pwd")c = models.Administrator.objects.filter(username=user, password=pwd).count()print(c)if c:#设置session中存储的数据request.session["is_login"] = Truerequest.session["username"] = user#尤其注意跳转到哪个页面！！！return render(request,"index.html",{"username":user})else:msg = "用户名或密码错误"return redirect("/login.html",{"msg":msg})
-----------------------------------------------------
urs.pyurl(r'^login.html$', views.Login.as_view()),#以类的方式进行创建
10.类中用装饰器
方法一：自定义装饰器
from django import views
from django.utils.decorators import method_decorator#1.引入库
#2.定义装饰器函数
def outer(func):def inner(request,*args,**kwargs):print(request.method)return func(request,*args,**kwargs)return innerclass Login(views.View):#3.使用装饰器@method_decorator(outer)def get(self,request,*args,**kwargs):return render(request, "login.html")
方法二：自定义dispatch方法，同时继承父类该方法，等同于装饰器
from django import viewsclass Login(views.View):#1.先执行自定义的dispatch方法def dispatch(self, request, *args, **kwargs):print(11111)if request.method == "GET":return HttpResponse("ok")#2.再调用父类中的dispatch方法，dispatch方法类似路由分发ret = super(Login,self).dispatch(request, *args, **kwargs)print(22222)return retdef get(self,request,*args,**kwargs):return render(request, "login.html")def post(self,request,*args,**kwargs):user = request.POST.get("user")pwd = request.POST.get("pwd")c = models.Administrator.objects.filter(username=user, password=pwd).count()print(c)if c:#设置session中存储的数据request.session["is_login"] = Truerequest.session["username"] = user#尤其注意跳转到哪个页面！！！return render(request,"index.html",{"username":user})else:msg = "用户名或密码错误"return redirect("/login.html",{"msg":msg})
11、上传文件
文件上传
----- Form表单上传文件 基于FormData() （上传后，页面需要刷新后才能显示）
----- Ajax上传文件 基于FormData() （无需刷新页面）
----- 基于form表单和iframe自己实现ajax请求 （因为有些浏览器可能不兼容FormData()）
a.form表单上传
-------------------------views.py--------------------------------
import os
def upload(request):if request.method == 'GET':img_list = models.Img.objects.all()return render(request,'upload.html',{'img_list': img_list})elif request.method == "POST":user = request.POST.get('user')fafafa = request.POST.get('fafafa')obj = request.FILES.get('fafafa') # request.FILES.get来接收文件file_path = os.path.join('static','upload',obj.name) #地址拼接f = open(file_path, 'wb')for chunk in obj.chunks(): #obj.chunks很多块文件（文件是分块接收的）f.write(chunk)f.close()models.Img.objects.create(path=file_path) #将图片保存到数据库return redirect('/upload.html')--------------------------------------upload.html------------------------
<form method="POST" action="/upload.html" enctype="multipart/form-data"><input type="text" name="user" /><input type="file" name="fafafa" /><input type="submit" value="提交" /></form><div>{% for item in img_list %}<img style="height: 200px;width: 200px;" src="/{{ item.path }}" />{% endfor %}</div>
-----------------------------models.py------------------------------------
class Img(models.Model):path = models.CharField(max_length=128)
b. 悄悄的上传（ajax）
xmlHttpRequestxml = new XMLHttpRequest();xml.open('post', '/upload.html', true) #以post方式发送到/upload.html，以异步方式发xml.send("k1=v1; k2=v2;")jQuery $.ajax({url:data: {'k1': 'v1', 'k2': 'v2'}})FormData对象dict = new FormData()dict.append('k1','v1');dict.append('k2','v2');dict.append('fafafa', 文件对象);xml.send(dict)或$.ajax({url:data: dict,})
实例：让用户看到当前上传的图片
三种ajax方法的实例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>上传文件</title><style>.container img{width: 200px;height: 200px;}</style><script>function li(arg) {console.log(arg);}</script>
</head>
<body><h1>测试Iframe功能</h1><input type="text" id="url" /><input type="button" value="点我" οnclick="iframeChange();" /><iframe id="ifr" src=""></iframe><hr/><h1>基于iframe实现form提交</h1><form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data"><iframe style="display: none" id="iframe_1" name="iframe_1" src="" οnlοad="loadIframe();"></iframe><input type="text" name="user" /><input type="file" name="fafafa" /><input type="submit" /></form><h1>图片列表</h1><div class="container" id="imgs">{% for img in img_list %}<img src="/{{ img.path }}">{% endfor %}</div> <input type="file" id="img" /><input type="button" value="提交XML" οnclick="UploadXML()" /><input type="button" value="提交JQ" οnclick="Uploadjq()" /><script src="/static/jquery-2.1.4.min.js"></script><script>function UploadXML() {var dic = new FormData();dic.append('user', 'v1');dic.append('fafafa', document.getElementById('img').files[0]);var xml = new XMLHttpRequest();xml.open('post', '/upload.html', true);xml.onreadystatechange = function () {if(xml.readyState == 4){var obj = JSON.parse(xml.responseText);if(obj.status){var img = document.createElement('img');img.src = "/" + obj.path;document.getElementById("imgs").appendChild(img);}}};xml.send(dic);}function Uploadjq() {var dic = new FormData();dic.append('user', 'v1');dic.append('fafafa', document.getElementById('img').files[0]);$.ajax({url: '/upload.html',type: 'POST',data: dic,processData: false, // tell jQuery not to process the datacontentType: false, // tell jQuery not to set contentTypedataType: 'JSON',success: function (arg) {if (arg.status){var img = document.createElement('img');img.src = "/" + arg.path;$('#imgs').append(img);}}})}function iframeChange() {var url = $('#url').val();$('#ifr').attr('src', url);}function loadIframe() {console.log(1);// 获取iframe内部的内容var str_json = $('#iframe_1').contents().find('body').text();var obj = JSON.parse(str_json);if (obj.status){var img = document.createElement('img');img.src = "/" + obj.path;$('#imgs').append(img);}}</script></body>
</html>
views.py文件：
import os
def upload(request):if request.method == 'GET':img_list = models.Img.objects.all()return render(request,'upload.html',{'img_list': img_list})elif request.method == "POST":user = request.POST.get('user')fafafa = request.POST.get('fafafa')#只能获取到文件名obj = request.FILES.get('fafafa')#必须这样才能取到文件file_path = os.path.join('static','upload',obj.name)f = open(file_path, 'wb')for chunk in obj.chunks():f.write(chunk)f.close()models.Img.objects.create(path=file_path)ret = {'status': True, 'path': file_path}return HttpResponse(json.dumps(ret))
12、数据库正向查询、反向查询、多对多查询
一、一对多（ForeignKey）
-------------------------------views.py----------------------------------------------def test(request):
# 例一：# pro_list = models.Province.objects.all()# print(pro_list)# city_list = models.City.objects.all()# print(city_list)
正向查找（通过具有外键字段的类，City）# filter(故意写错，可以知道可以添加哪些字段)# v = models.City.objects.all()# print(v)反向查找（如_ _name）# v = models.Province.objects.values('id','name','city__name')# print(v)# pro_list = models.Province.objects.all()# for item in pro_list:# print(item.id,item.name,item.city_set.filter(id__lt=3)) #id<3return HttpResponse("OK")--------------------------------models.py----------------------------------
class Province(models.Model):name = models.CharField(max_length=32)class City(models.Model):name = models.CharField(max_length=32)pro = models.ForeignKey("Province")
二、多对多查询（ManyToMany）
----------------------------------------views.py-------------------------------------------------
# 例二：
def test(request):
1、创建：多表操作时，可以忽略manytomany，不影响单表的字段创建# 如：# models.Book.objects.create(name='书名')# models.Author.objects.create(name='人名')正向查找 第三张表（因为m在author里面）# obj,人，金鑫# obj = models.Author.objects.get(id=1)# # 金鑫所有的著作全部获取到# obj.m.all()反向查找 第三张表（用...._set）# 金品买# obj = models.Book.objects.get(id=1)# # 金鑫，吴超# obj.author_set.all()2、性能方面：# 正向查找# 10+1 以下方法查询数据库次数多，性能不高# author_list = models.Author.objects.all()# for author in author_list:# print(author.name,author.m.all())#推荐此方法，用values来传值# author_list = models.Author.objects.values('id','name','m', "m__name")# for item in author_list:# print(item['id'],item['name'],'书籍ID:',item['m'],item['m__name'])3、添加、删除、清空、set#正向操作：# obj = models.Author.objects.get(id=1)# 第三张表中增加一个对应关系 1 5# 增加# obj.m.add(5) 第三张表中增加一个对应关系 1 5# obj.m.add(*[4,5]) 第三张表中增加一个对应关系 1 4和1 5# obj.m.add(5,6)# 删除第三张表中.....的对应关系# obj.m.remove(5)# obj.m.remove(5,6)# obj.m.remove(*[5,6])# 清空# obj.m.clear()# 更新对应关系 id=1的只能对应1和对应2和对应3，id=1的其他对应关系会被自动删掉# obj.m.set([1,2,3])# 反向操作：# obj = models.Book.objects.get(id=1)# obj.author_set.add(1)# obj.author_set.add(1,2,3,4)# ...同上return HttpResponse("OK")
-----------------------------models.py-----------------------------class Book(models.Model):name =models.CharField(max_length=32)class Author(models.Model):name = models.CharField(max_length=32)m = models.ManyToManyField('Book')
系统默认生成第三张表（关系表）
三、等于和不等于（补充）
models.tb.objects.filter(name='root') name 等于models.tb.objects.exclude(name='root') name 不等于models.tb.objects.filter(id__in=[11,2,3]) 在models.tb.objects.exclude(id__in=[11,2,3]) 不在
13、jQuery对象和DOM对象可以互相转换
obj = document.getElementById('sel')
$(obj) dom转为jQuery$('#sel')
$('#sel')[0] jQuery转成dom对象select标签的Dom对象中有 selectedOptions来获得选中的标签op1 = $('#sel')[0].selectedOptions dom标签再用jQuery对象的appendTo（）方法，就可将选中的标签加到右边的空标签里面$(op1).appendTo("#none") jQuery标签
14、JSONP原理（面试重点）：跨域用的
jsonp的本质就是动态的在head里面创建script标签，执行完后，又将其删除
用jsonp原因：
由于浏览器的同源策略，所以跨域请求不行，所以要想跨域请求，需要用jsonp，jsonp不是一个技术，而是一种策略，是小机智，由于script扩展src不受同源策略保护，所以可以动态的生成一个script标签，加上src属性，请求完成后就立即将此script标签删除。
自己写一个jsonp：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="button" οnclick="jsonpRequest();" value="跨域请求" /><script>TAG = null;/* 定义一个全局变量tag*/function jsonpRequest() {TAG = document.createElement('script'); TAG.src = "http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403"; // 返回值是list([11,22,33,44])document.head.appendChild(TAG);}function list(arg) {console.log(arg); document.head.removeChild(TAG);}</script>
</body>
</html>
14、cookie和session
Cookie：
就是保存在浏览器端的键值对
可以利用做登录
1、保存在用户浏览器
2、可以主动清楚
3、也可以被“伪造”
4、跨域名cookie不共享
5、浏览器设置不接受cookie后，就登录不上了
Cookie是什么？
客户端浏览器上保存的键值对
服务端操作的Cookie服务端操作的Cookieobj.set_cookie('k1','v1')obj.set_cookie('k1','v1',max_age=10)v = datetime.datetime.utcnow() + datetime.timedelta(seconds=10)obj.set_cookie('k1','v1',max_age=10,expires=v)----------------------------------参数-------------------------------- 1、可设置超时时间，超时后cookie就自动失效max-age、expires都可用于设置超时时间2、path: / 表示，全局生效/xxxx/ 表示，只有当前url生效3、domian:设置域名，可设置顶级域名，cookie可在顶级域名下生效。obj.set_cookie('k4','v4',max_age=10,expires=v, domain='oldboy.com')obj.set_cookie('k1','v1')4、httponly: 仅仅HTTP网络传输使用，不能通过js获取cookie。
客户端浏览器上操作cookie客户端浏览器上操作cookiedom --> 麻烦jquery插件 --> 先准备：（1）jquery.cookie.js（2）jquery.cookie.js用法：$.cookie()一个参数：$.cookie(k) 获得值两个参数：$.cookie(k,v) 设置值
Session：
session是服务器端的一个键值对
session内部机制依赖于cookie
request.session['k'] 获取值request.session['k1'] = v 设置键值对request.session['k2'] = vdel request.session['k1'] 删除request.session.clear() 清空# 获取、设置、删除Session中数据request.session['k1']request.session.get('k1',None)request.session['k1'] = 123request.session.setdefault('k1',123) # 存在则不设置del request.session['k1']# 所有 键、值、键值对request.session.keys()request.session.values()request.session.items()request.session.iterkeys()request.session.itervalues()request.session.iteritems()# 用户session的随机字符串request.session.session_key# 将所有Session失效日期小于当前日期的数据删除request.session.clear_expired()# 检查 用户session的随机字符串 在数据库中是否request.session.exists("session_key")# 删除当前用户的所有Session数据request.session.delete("session_key")
