Django2训练新项目:开发设计本人blog系统软件(
摘要:这1篇实例教程,大家融合JQuery进行Django2本人blog系统软件的公布评价的作用。...
这1篇实例教程,大家融合JQuery进行Django2本人blog系统软件的公布评价的作用。
假如要公布评价,大家必须先界定1个公布评价的主视图涵数。
在这个主视图涵数中,将恳求中的数据信息根据实体模型储存到数据信息库。
这里要留意,评价的隶属文章内容和回应的总体目标评价都并不是客户填写的表单內容,而是必须根据恳求中的有关主要参数查寻到数据信息目标加上到评价目标中,再将评价目标和客户递交的表奇数据融合到1起建立表奇数据目标开展校检与储存。
示例编码:
from django.shortcuts import HttpResponse
from .forms import CommentForm
def pub_comment(request): # 公布评价涵数
if request.method == 'POST': # 假如是post恳求
comment = Comment() # 建立评价目标
comment.article = Article.objects.get(id=request.POST.get('article')) # 设定评价隶属的文章内容
if request.POST.get('reply') != '0': # 假如回应的并不是文章内容而是别人评价
comment.reply = Comment.objects.get(id=request.POST.get('reply')) # 设定回应的总体目标评价
form = CommentForm(request.POST, instance=comment) # 将客户的键入和评价目标融合为详细的表奇数据目标
if form.is_valid(): # 假如表奇数据校检合理
try:
form.save() # 将表奇数据存入数据信息库
result = '200' # 递交結果为取得成功编号
except: # 假如产生出现异常
result = '100' # 递交結果为不成功编号
else: # 假如表奇数据校检失效
result = '100' # 递交結果为不成功编号
return HttpResponse(result) # 回到递交結果到网页页面
else: # 假如并不是post恳求
return HttpResponse('不法恳求!') # 回到递交結果到网页页面
接下来,大家加上URL配备。
示例编码:
path('comment/', blog_view.pub_comment, name='comment'),
最终,大家来进行模版內容。
最先,在大家以前早已进行的模版內容中,评价內容后方“[回应]”的元素特性中都包括了以下特性:
onclick="reply('{{ comment.name }}',{{ comment.id }})
这个特性特定了当“[回应]”被点一下时实行“reply()”涵数。
因此,大家必须在模版內容中加上1个“reply()”涵数,它的功效是点一下“[回应]”时纪录回应总体目标的id和在评价內容键入框中显示信息被回应的评价人。
示例编码:
<script>
function reply(comment_name, comment_id) {
$('#content').attr('placeholder', '回应' + comment_name + '的內容:'); // 设定內容键入框的提醒
$('#reply').val(comment_id) //设定掩藏元素的值为评价总体目标的id
}
</script>
在上方编码中,根据“$(‘#元素id)”对元素的特性值开展了变更,当点一下“[回应]”的情况下就可以够展现大家必须的实际效果。
随后,大家再次加上回应按钮的涵数。
点一下回应按钮时,大家做1个简易的非空认证,假如全部內容均已填入,大家将內容递交,不然得出查验键入內容的提醒。
当內容一切正常递交以后,还要依据回到的結果得出“评价取得成功”或“评价不成功”的提醒。
此外,这里还要留意1点,大家的评价表单其实不是放在了1对“<form>…</form>”标识中,因此,沒有加上避免跨域进攻的编码。
这会致使递交评价时产生出现异常。
大家在撰写Javascript编码的情况下,必须加上避免跨域进攻的编码。
示例编码:
<script>
$(document).ready(function () {
$('#submit_comment').click(function () { // 界定回应按钮点一下时启用的涵数
$.ajaxSetup({ // 加上避免跨域进攻的编码
data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
});
var reply = $('#reply').val(); // 将评价总体目标id存入自变量
var name = $('#name').val(); // 将评价人昵称存入自变量
var email = $('#email').val(); // 将评价人电子邮箱详细地址存入自变量
var content = $('#content').val(); // 将评价內容存入自变量
if (name && email && content) { // 假如全部內容都已填写
$.post('{% url 'comment' %}', { // 用post方式递交恳求
'article': {{ article.id }}, // 恳求中包括的主要参数字典
'reply': reply,
'name': name,
'email': email,
'content': content
}, function (result) { // 回调函数涵数获得回到結果
if (result === '200') { // 假如回到评价取得成功编号
$('#comment_message').css({color: "green"}).html('评价取得成功!'); // 设定提醒元素的款式与文本
} else {
$('#comment_message').css({color: "red"}).html('评价不成功!');
}
});
$('#comment_message').removeAttr('hidden'); // 除去提醒元素的掩藏特性将提醒显示信息在网页页面
setTimeout(function () { // 设定请求超时后实行的涵数
location.reload() // 重载网页页面內容
}, 1000); // 设定请求超时时长
} else { // 假如并不是全部內容都已填写
$('#comment_message').removeAttr('hidden').html('请查验填写的內容!').css({color: "red"});
// 除去提醒元素的掩藏特性将提醒显示信息在网页页面,另外设定提醒的款式与文本
}
});
});
</script>
到这里大家就进行发布评价的作用。