百度网盘 做网站图床,163邮箱官方注册入口,wordpress 电台插件,学习做网站是什么专业Django评论
评论复杂的地方在于需要实现点击提交评论后评论内容需要立刻出现在下面#xff0c;还要保持页面位置不变#xff0c;所以提交后不能整体刷新页面#xff0c;因为刷新以后页面肯定在最上面#xff0c;而评论一般都在最下面#xff0c;所以要用到Ajax 整个过程用…Django评论
评论复杂的地方在于需要实现点击提交评论后评论内容需要立刻出现在下面还要保持页面位置不变所以提交后不能整体刷新页面因为刷新以后页面肯定在最上面而评论一般都在最下面所以要用到Ajax 整个过程用到了DjangoVue.js,reqwest,REST_framework,ajax 展示评论内容
展示评论内容可以直接用Django从数据库中取出数据然后在view中渲染到前端但这里我想用Vue.js为了减少django的工作量提高效率吧
// pinglun.js
let vue new Vue({el : #app,data : {pinglun : [{评论者:zhangsan,评论日期:2019-6-5,评论时间:17:47:23,评论内容:hahahha,对应文章_id:1},{评论者:zhangsan1,评论日期:2019-6-5,评论时间:17:48:23,评论内容:hahffahha,对应文章_id:1},],},
})!--pinglun.html--
div idappdiv classalert alert-secondary rolealert idpinglunlistdiv v-foritem in pinglun h5{{ item.评论者 }}/h5p{{ item.评论内容 }}/p/div/div
/div这样js中data的数据就可以渲染到html页面了但我们需要从数据库中拿到数据并且赋值给data中的pinglun,这里需要一个reqwest模块需要下载
npm i reqwest下载之后访问json文件里面的那个网址下载压缩包解压后里面有一个reqwest.js文件要把这个文件引入就和用Vue要引入Vue.main.js一样reqwest可以从一个url请求数据并且返回
// 这是官方api
reqwest({// 要请求的路径url: path/to/html// 请求方式, method: post// 请求时要携带的数据, data: { foo: bar, baz: 100 }// 成功请求的回调函数, success: function (resp) {// reap中就包含请求来的数据qwery(#content).html(resp)}
})
reqwest({url: path/to/html, method: get, data: [ { name: foo, value: bar }, { name: baz, value: 100 } ], success: function (resp) {qwery(#content).html(resp)}
})应为需要有一个请求的url所以还需要做一个api接口这里有两种办法一种是用Django提供的HttpResponse和json直接将序列化后的json数据渲染到页面但这样只能渲染成json类型,并且存在文字编码的问题还可以使用django-rest-framework框架Django REST框架是一个功能强大且灵活的构建Web api工具包
使用 HttpResponse 不推荐
# urls.py
path(api/json,views.injson),# views.py
def injson(request):# 这里的info是手写的假数据若使用这种方法可以从数据库中获取相应数据再用json.dumps序列化info [{评论者:zhangsan,评论日期:2019-6-5,评论时间:17:47:23,评论内容:hahahha,对应文章_id:1},{评论者:zhangsan1,评论日期:2019-6-5,评论时间:17:48:23,评论内容:hahffahha,对应文章_id:1},]return HttpResponse(json.dumps(info))使用REST框架
先要安装这个包以及依赖项
pip install djangorestframework
pip install markdown # Markdown support for the browsable API.
pip install django-filter # Filtering support其次需要在setting.py中配置app
INSTALLED_APPS [django.contrib.admin,django.contrib.auth,django.contrib.contenttypes,django.contrib.sessions,django.contrib.messages,django.contrib.staticfiles,myblog,# 这个就是REST依赖项rest_framework
]然后就要写api了先把评论的model放出来
class 评论(models.Model):评论者models.CharField(max_length20)评论日期models.DateField(auto_now_addTrue)评论时间models.TimeField(auto_now_addTrue)评论内容models.TextField()对应文章models.ForeignKey(myblog.文章内容,on_deletemodels.CASCADE)然后编写api.py
# api.py# 引入model
from .models import 评论
# REST提供的序列化工具
from rest_framework import serializers
from rest_framework.response import Response
from rest_framework.decorators import api_viewResonse
类似于HttpResponse用来渲染文本内容并根据内容决定返回给用户的数据类型
Response(data, statusNone, template_nameNone, headersNone, content_typeNone)# data:要渲染的数据可以是python的基本数据类型
# status状态码
# template_name模板名称
# headers头部信息
# content_type内容类型的响应因为Response只能渲染python基本数据类型对于复杂的数据类型需要serializers.ModelSerializer来序列化
# api.pyclass PingLun(serializers.ModelSerializer):class Meta:depth 1model 评论fields (评论者,评论日期,评论内容)然后就可以写url对应的回调函数了,可以不使用api_view修饰器但需要自己写一个判断来判断请求的类型
api_view([GET])
def showdata(request):id request.GET[id]print(id)datas评论.objects.filter(对应文章_idid)PingLunData PingLun(datas,manyTrue)return Response({data:PingLunData.data})这时候访问api就可以看到优雅的数据了完了以后完善Vue编写reqwest的内容
let vue new Vue({el : #app,data : {// 开始是一个空列表pinglun : [],},mounted(){console.log(卖个萌咋了人)this.getData()},computed : {},methods : {getData : function() {// 现在的this是window对象等进入reqwestthis就是rewqest对象了所以提前保存thislet self this// 只是为了获取当前文章的idlet myurl window.location.hreflet id myurl.toString().split(/).pop()reqwest({url: /blog/api/showpinglun/?formatjson, method: get, data: [{name: id,value: id}], success: function (data) {self._data.pinglun data.data}})},}
})到目前就可以使用Vue从数据库中获取数据并渲染到前端了总结一下
要用Vue渲染数据数据就必须在data中但我们又不能写死必须从一个地方动态获取数据这个地方就是apidjango有一个模块REST专门用来建立api要动态请求数据需要用到一个框架 reqwestREST渲染数据用到了Resonse但它只能渲染python基本数据从Object.filter()得到的显然不是因此还要序列化数据这里用到了serializers另外还需要api_view这个装饰器判断请求类型
提交评论
思路
使用POST请求把表单内容交给apiapi再保存到数据库
看着挺简单但这里面有两个问题
Django要求所有POST请求进行CSRF验证使用正常的表单我们可以添加{{csrf_token}},Django会自动在Cookies中添加csrf验证用的随机序列用reqwest怎么办一般情况下提交评论后评论会立刻显示在下面怎么做
解决Ajax发送POST请求的CSRF问题
这里有两种思路
思路一解决发现问题的人
这种思路简单粗暴既然问题出在了csrf验证上那就不让他进行验证就好了嘛组织进行验证有两个简单的办法
使用装饰器
在要取消进行csrf验证的视图函数上添加修饰器csrf_exempt
from django.views.decorators.csrf import csrf_exempt
csrf_exempt
def demo(request):pass赶尽杀绝法
第二种是狼人的做法比较绝直接从setting中删除csrf验证的依赖项
MIDDLEWARE [django.middleware.security.SecurityMiddleware,django.contrib.sessions.middleware.SessionMiddleware,django.middleware.common.CommonMiddleware,# 就是这个删了就ok但安全性嘛就。。。。django.middleware.csrf.CsrfViewMiddleware,django.contrib.auth.middleware.AuthenticationMiddleware,django.contrib.messages.middleware.MessageMiddleware,django.middleware.clickjacking.XFrameOptionsMiddleware,
]思路二釜底抽薪
思路一实现简单一劳永逸看似不错但取消csrf验证会让网站处于很危险的境地建议不要这样用第二种方法就要优雅很多首先要知道Django是怎样防御CSRF攻击的CSRF跨站请求伪造攻击是攻击者利用用户登录保存的cookies伪装成用户进行非发操作的攻击方式比如攻击者在某网站留下了一个付款的链接www.xxxx.com/shop?money500;tohark注意这个链接已经设计了用户验证只有正确登录后才能付款没登录直接访问这个链接会被重定向到登录界面一个受害者在访问这个钓鱼链接之前正好访问过付款的那个网站并登录留下了自己的cookies这时候她再去访问那个钓鱼链接浏览器就会检查本地有没有对应的cookies文件,正好有系统就认为是他本人在付款这就是一次csrf攻击csrf的特点是攻击者并没有拿到受害人的cookies针对这个特点django的处理办法是在cookies中增加一个csrf_token字段内容为随机序列同时表单提交时也把这个序列作为表单的一项同表单数据一起提交给后端做验证如果表单中的序列与cookies中的序列不一样就定义为csrf攻击在Debug模式下会抛出403错误。
根据这个我们只要在Ajax的请求头中加上cookies中的那个字段就可以了嘛其实如果不懂csrf直接在浏览器开发者工具里对比我们的Ajax请求头和正常的POST请求头就会发现我们少了X-CSRFToken这个字段获取本站cookies中的csrftoken字段添加到请求头中就可以。其实对比发现我们还缺了一项不写会报500错误Content-Type
setRequestHeader必须写在open之后
// js获取cookies依赖下面的库
script srchttps://cdn.jsdelivr.net/npm/js-cookie2/src/js.cookie.min.js/script// 获取cookies
let csrftoken Cookies.get(csrftoken);// 设置请求头
XHRObject.setRequestHeader(X-CSRFToken, csrftoken);Ajax发送POST请求
div idappdiv classalert alert-primary rolealertp评论/phr /div classform-grouplabel forexampleFormControlInput1评论者:/labelinput typetext classform-control idexampleFormControlInput1 placeholder请输入你的姓名 name评论者 maxlength20 required/divdiv classform-grouplabel forexampleFormControlTextarea1有问题不妨写下了.../labeltextarea classform-control name评论内容 idexampleFormControlTextarea1 rows3/textarea/divhrbutton typesubmit name评论提交 οnclickXMLDoc()提交评论/button/divfunction XMLDoc(){let XHRObject// 适配浏览器if(window.XMLHttpRequest){XHRObject new XMLHttpRequest}else{XHRObject new ActiveXObject(Microsoft.XMLHTTP)}// 接收XHRObject.onreadystatechange function () {if (XHRObject.status 200 XHRObject.readyState 4) {}}// 获取文章idlet url window.location.hreflet id url.toString().split(/).pop()// 获取csrftokenlet csrftoken Cookies.get(csrftoken);// 获取表单数据let name document.getElementById(exampleFormControlInput1).valuelet neirong document.getElementById(exampleFormControlTextarea1).value// 发送POST请求XHRObject.open(POST,/blog/api/postpinglun/?formatjson,true)// 设置请求头XHRObject.setRequestHeader(X-CSRFToken, csrftoken);XHRObject.setRequestHeader(Content-Type, application/x-www-form-urlencoded);// 发送请求只接受一个字符串键值用连接多个键值对用连接XHRObject.send(namenameneirongneirongidid.toString())document.getElementById(exampleFormControlInput1).value document.getElementById(exampleFormControlTextarea1).value }api保存数据到数据库
api_view([POST])
def postdata(request):# 获取Ajax传来的表单信息name request.POST[name]neirong request.POST[neirong]id request.POST[id]# 保存到数据库obj评论(评论者 name,评论日期 datetime.datetime.now().strftime(%Y-%m-%d),评论时间 datetime.datetime.now().strftime(%H:%M:%S),评论内容 neirong,对应文章_id id)obj.save()提交数据时更新下方评论列表
要在提交时更新就要绑定两个单击事件一个是Ajax的用来保存数据另一个是Vue的用来更新数据这里可以直接调用之前的getData函数 button typesubmit name评论提交 onclickXMLDoc() clickgetData()提交评论/button
