上节回顾
1 路由匹配从上往下匹配,一旦匹配成功,就不再往下匹配
re_path匹配根路径只能这样写成以什么开头,以什么结尾re_path(r'^$', book.index),
2 反向解析
-用在模板中 如果前面url中带有参数也就是类似re_path(r'^book_delete/?P<pk>\d+',book book_delete,name='bookdelete'),那么在模板中是,写{{ url 'bookdelete' book.id }} 就是别名后面直接空格加参数。理解的意思就是将参数传给反向解析,然后匹配前面的路由。前面有几个分组,后面就要传几个参数
-用在视图函数中 uri = reverse('bookdelete',args=[1,])参数在后面直接传
-以后一般使用book_delete/?pk=1 这种可以直接从GET中取出数据;不用book_delete/1/,因为这样要用无名分组或者有名分组或者转换器的方式写
3 图片列表之作者显示(for循环中套if),for+empty的使用
<td>
{% for author in book.authors.all %}
{% if forloop.last %}
{{ author.name }}
{% else %}
{{ author.name }} -- |--
{% endif %}
{% empty %}
未知作者
{% endfor %}
</td>
4 图书编辑的连接
-<td><a href="/boo_update/{{book.id}}/">编辑</a></td>
-<td><a href="{% url 'bookupdate' book.id %}/">编辑</a></td> # 推荐使用这种
-<td><a href="/boo_update/?pk={{book.id}}">编辑</a></td>
5 模板变量可以给js使用,模板语法本质就是字符串的替换
python中
ss='lqz'
<script>
var a='{{sss}}'
var a='lqz'
</script>
6 修改,出版社跟图书真正的出版社对应
<select class="form-control" name="publish">
{% for publish in publishs %}
{% if book.publish.id == publish.id %}
<option value="{{ publish.id }}" selected>{{ publish.name }}</option>
{% else %}
<option value="{{ publish.id }}">{{ publish.name }}</option>
{% endif %}
{% endfor %}
</select>
7 修改,作者
<select multiple class="form-control" name="authors">
{% with book.authors.all as xxx %}
{% for author in authors %}
{% if author in xxx %}
<option value="{{ author.id }}" selected>{{ author.name }}</option>
{% else %}
<option value="{{ author.id }}">{{ author.name }}</option>
{% endif %}
{% endfor %}
{% endwith %}
</select>
8 修改作者与图书的关系
models.Book.objects.filter(pk=pk).update(name=name, price=price, publish_date=publish_date, publish_id=publish) # update后返回的行数,是int类型
book=models.Book.objects.get(pk=pk)
book.authors.set(authors) # 传对象,传id都可以
# book.authors.clear()
# book.authors.add(*authors)
# django基础部分(没讲)
-choice的用法
-批量插入
-多对多关联关系的三种方式:中介模型(手动创建还是自动创建第三张表)******
-related_name,related_query_name (放在关联关系对象中的参数)ForeignKey(related_name='xx')
今日内容
1 ajax介绍
# 1 异步 Javascript 和 XML:
-异步:跟同步是对应的
-javascript:通过javascript来操作,发送请求,到服务端
-xml:数据交互使用xml,现在主流使用json格式
-xml:可阅读性比较高,解析复杂,占的空间大
<name>lqz</name>
<age>19</age>
-json:可阅读性比较高,解析简单,占的空间小
{"name":"lqz","age":19}
-浏览器页面局部刷新(是js的dom操作,并不算ajax的功能),如果用render,其实是整个页面都刷新
-通过js发送http的请求(go,java,php,requset),那么本质上来讲,其他语言也能发送http请求
# 2 同步和异步
#3 IAAS,PAAS,SAAS
# 4 同步交互和异步交互
同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
异步交互:客户端发出一个请求后,无需等待服务器响应结束(此时客户端可以干别的事),就可以发出第二个请求。
# 一般的企业网站一天访问量几十人到百多人访问,需要的带宽3-5M就差不多了
# 计算机数据一般以字节(Byte)为单位。B、KB、MB、GB、TB和换算到我们熟悉的文件大小,除以8;也就是说1Mbps带宽。它们之间的换算是1Byte=8bit,1KB=1024B,1MB=1024KB,1GB=1024MB,1TB=1024GB,理论下每秒可以下载的文件大小约是128KB每秒。网络传输损耗等其他因素,网站带宽可以参考:同时访问数*平均页面大小=网站的带宽/8.
2 ajax的简单使用
1 原生js写ajax请求(写起来很复杂,而且需要考虑浏览器版本)
2 jquery帮咱们封装好了一个方法 ajax,我们直接调用jquery的方法,就可以发送ajax的请求
3 # 前后端分离了,还可以继续使用jquery的ajax,但是axios更主流一些
4 现在我们学的jquery的ajax方法的使用
5 需求:通过Ajax,实现前端输入两个数字,服务器做加法,返回到前端页面
6 模板
<script>
$("#submit").click(function () {
$.ajax({
url: '/add/', # 向哪个地址发送请求,ajax一般单独写一个地址,一定不能写错,要完全一样,因为ajax不能重定向,浏览器中能重定向,它会帮我们在最后加个/,那么可能地址就正确了
method: 'post', # 发送什么请求 没有编码默认使用urlencoded编码
data:{'a':$("#first").val() ,'b':$("#second").val() }, # 使用jquery获取标签得到输入框的值,传到后端之后是根据a,b的值去取value的值,js中的字典的key可以不加'',即直接a,b,而且a,b两者是自己任意定义的
success:function (data) { # 数据正常返回就会触发该匿名函数的执行,其实是一个回调函数,返回的数据就会复制给data
$("#sum").val(data) # 把后端返回的数据,通过dom操作,写到特定标签的位置
},
error:function (error) {
//请求失败,触发,并且把数据复制给error
}
})
})
</script>
# 默认情况下ajax会把{'a':$("#first").val() ,'b':$("#second").val() }数据转成预处理数据 a=20&b=30,放到body体中
# 编码默认用urlencoded
# 下面图中,如果是取出来的是字符串,如果要数字相加,那么必须在转成int,否则就变成了字符串的拼接,HttpResponse返回什么,js中的data就是什么(是字符串),如果返回xml格式或者html格式,那么只要dom操作,将其渲染在某个位置,页面就局部刷新了
3 ajax上传文件
1 # http请求,body体中放文件内容,ajax本质就是发送http请求,所以它可以上传文件
2 两种上传文件的方式,form表单,ajax(不用放在form表单中,直接加提交的按钮就行)
3 固定模板
$("#btn_file").click(function () {
var formdata=new FormData() # 实例化一个对象,并把文件放到对象中
formdata.append('myfile',$("#id_file")[0].files[0]) # formdata.append('key值',文件对象),里面需要拿到文件步骤,通过控件$("#id_file")拿到jquery对象,然后$("#id_file")[0]拿到input标签,$("#id_file")[0].files拿到里面有哪几个文件,然后$("#id_file")[0].files[0]取出第0个文件
formdata.append('name',$("#id_name").val()) # 还可以同时带数据,模板那边只需要加上提交数据的框就行了
$.ajax({
url:'/uploadfile/',
method: 'post',
//上传文件必须写这两句话
processData:false, # 预处理数据,
contentType:false, # 不指定编码,如果不写contentType,默认用urlencoded
data:formdata, # formdata内部指定了编码,并且自行处理数据
success:function (data) {
location.herf='http://www.bilibili.com' # 此处不能不能跳转到某个页面,只能重定向
}
})
})
# 下面图中提交的一般会判断一下文件
file = request.FILES.get('myfile', None) # 获取上传文件,如果文件不存在,则默认为None
if not file:
return HttpResponse('no file for upload')
with open(os.path.join(r'C:\Django\templates', file.name), 'wb') as f: # 存放到指定的文件夹,对于大型网站来说,应该以用户的用户名(非重复)为文件夹,将每个用户上传的数据存放到不同的文件中
for line in file.chunks():
f.write(line)
return HttpResponse('上传成功')
4 ajax提交json格式
$.ajax({
url:'/uploajson/', //写全,是什么样就写什么样
method:'post',
contentType: 'application/json',
//data要是json格式字符串
//data:'{"name":"","password":""}',
//把字典转成json格式字符串
//JSON.stringify(dic)
//把json格式字符串转成对象
//JSON.parse(data)
data:JSON.stringify({name:$("#id_name1").val(),password:$("#id_password1").val()}),
success:function (data) {
//返回字符串类型,需要转成js的对象,字典
# //1 如果:django 返回的是HttpResponse,data是json格式字符串,需要自行转成字典
# //2 如果:django 返回的是JsonResponse,data就是字典,因为JsonResponse内部设置了响应的编码格式,数据来到前端后,ajax这个方法做的是,如果响应数据是json格式,自动反序列化,所以直接写成return JsonResponse(dic)
console.log(typeof data)
var res=JSON.parse(data) # 反序列化后变成了字典对象
console.log(typeof res)
console.log(res.status) # 对象.方法
console.log(res.msg)
}
})
# 在后端,无法通过POST取出json格式的数据,从body中取出数据,loads转
# JsonResponse 内部设置了响应的编码格式,数据来到前端后
5 django内置序列化器(了解,不好用,后面有更好的)
1 把对象转成json格式,json.dumps实现不了,
2 django内置了一个东西,可以把对象转成json格式
from django.core import serializers
book_list = Book.objects.all()
ret = serializers.serialize("json", book_list) # ret就是json格式字符串
ll=[]
for book in book_list:
ll.append({'name':book.name,'price':book.pirce})
import json
ret=json.dumps(ll)
return HttpResponse(ret)
拓展
1 js逆向,混淆和压缩
在浏览器中Sources带回的jurery代码,是直接服务器的代码,那么在里面写的函数都能看到,因此需要js逆向,混淆和压缩,防止别人爬虫