博客園打開需要拷貝的文章,右鍵檢查--》選擇cnblogs_post_body這一個(gè)div,然后復(fù)制outer HTML到admin后臺(tái)文章表里面
創(chuàng)新互聯(lián)建站,為您提供網(wǎng)站建設(shè)公司、網(wǎng)站制作、網(wǎng)站營(yíng)銷推廣、網(wǎng)站開發(fā)設(shè)計(jì),對(duì)服務(wù)成都iso認(rèn)證等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈,認(rèn)真對(duì)待每位客戶,為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步,是我們永遠(yuǎn)的責(zé)任!
最后需要在文章詳情頁(yè)的文章內(nèi)容那一行添加一個(gè)|safe
前端樣式:
不會(huì)寫,直接拷貝博客園的點(diǎn)贊點(diǎn)踩html和css樣式
{# 點(diǎn)贊點(diǎn)踩樣式開始:復(fù)制博客園的點(diǎn)贊點(diǎn)踩樣式,拷貝其對(duì)應(yīng)的out HTML和css到下面就行#}
<div class="clearfix">
<div id="div_digg">
<div class="diggit action">
<span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
</div>
<div class="buryit action">
<span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips" style="color: red">
</div>
</div>
</div>
{# 點(diǎn)贊點(diǎn)踩樣式結(jié)束#}
{% block css %}
<style>
#div_digg {
float: right;
margin-bottom: 10px;
margin-right: 30px;
font-size: 12px;
width: 125px;
text-align: center;
margin-top: 10px;
}
.diggit {
float: left;
width: 46px;
height: 52px;
background: url(/static/img/upup.gif) no-repeat;
text-align: center;
cursor: pointer;
margin-top: 2px;
padding-top: 5px;
}
.buryit {
float: right;
margin-left: 20px;
width: 46px;
height: 52px;
background: url(/static/img/downdown.gif) no-repeat;
text-align: center;
cursor: pointer;
margin-top: 2px;
padding-top: 5px;
}
.clear {
clear: both;
}
.diggword {
margin-top: 5px;
margin-left: 0;
font-size: 12px;
color: #;
}
</style>
{% endblock %}
向后端提交點(diǎn)贊點(diǎn)踩數(shù)據(jù):
// 思考然后判斷用戶是點(diǎn)了贊還是點(diǎn)了踩??
// 法1:給點(diǎn)贊和點(diǎn)踩的div分別綁定一個(gè)事件,以此來(lái)判斷用戶點(diǎn)贊點(diǎn)踩;法2:給div綁定同一個(gè)類屬性action,在內(nèi)部判斷是否有diggit或者buryit來(lái)判斷點(diǎn)贊還是點(diǎn)踩、
$('.action').click(function () {
// 保存一下用戶是否點(diǎn)贊還是點(diǎn)踩
let isUp = $(this).hasClass('diggit');
// 向后端發(fā)送ajajx提交用戶是否點(diǎn)贊點(diǎn)踩數(shù)據(jù)
let div = $(this);
$.ajax({
type: 'post',
url: '/up_or_down/',
// 提交數(shù)據(jù):哪個(gè)用戶為那篇文章點(diǎn)贊了還是點(diǎn)踩了,用戶后端有了不用提交了
data: {
'article_id': '{{ article_obj.pk }}',
'is_up': isUp,
'csrfmiddlewaretoken': '{{ csrf_token }}',
},
success: function (args) {
if (args.code == 1000) {
$('#digg_tips').text(args.msg)
let oldNum = div.children().text();
div.children().text(Number(oldNum) + 1)
} else {
$('#digg_tips').html(args.msg)
}
}
})
})
后端邏輯代碼:
# 八、點(diǎn)贊點(diǎn)踩視圖函數(shù)
def up_or_down(request):
"""
邏輯:
1.判斷是否登錄(未登錄需要先登錄)
2.判斷用戶點(diǎn)贊是否是自己的文章(自己不能給自己文章點(diǎn)贊)
3.判斷用戶是否已經(jīng)給該文章點(diǎn)過(guò)了(點(diǎn)過(guò)就不能點(diǎn)了)
4.操作數(shù)據(jù)庫(kù)存儲(chǔ)數(shù)據(jù)
:param request:
:return:
"""
# 1.判斷是否為ajax請(qǐng)求
if request.method == 'POST':
# 2.定義一個(gè)回調(diào)字典
back_dic = {'code':1000,'msg':''}
# 3.獲取提交的數(shù)據(jù)
article_id = request.POST.get('article_id')
is_up = request.POST.get('is_up') # 注意結(jié)束的是字符串形式需要轉(zhuǎn)為布爾值形式
is_up = json.loads(is_up)
# 4.判斷是否登錄(未登錄需要先登錄)
if request.user.is_authenticated:
# 5.判斷用戶點(diǎn)贊是否是自己的文章(自己不能給自己文章點(diǎn)贊)根據(jù)當(dāng)前文章主鍵查出該文章的用戶與request.user比對(duì)
article_obj = models.Article.objects.filter(pk=article_id).first()
user_obj = article_obj.blog.userinfo
if not request.user == user_obj:
# 6.判斷用戶是否已經(jīng)給該文章點(diǎn)過(guò)了(點(diǎn)過(guò)就不能點(diǎn)了)查點(diǎn)贊點(diǎn)踩表是否有對(duì)應(yīng)數(shù)據(jù)
is_click = models.UpAndDown.objects.filter(article=article_obj,user=request.user)
if not is_click:
# 7.操作數(shù)據(jù)庫(kù)存儲(chǔ)數(shù)據(jù),注意article表里的數(shù)據(jù)也要同步
# 8.判斷是點(diǎn)贊了還是點(diǎn)踩了
if is_up:
models.Article.objects.filter(pk=article_id).update(up_num=F('up_num') + 1)
back_dic['msg'] = '點(diǎn)贊成功'
else:
models.Article.objects.filter(pk=article_id).update(down_num=F('down_num')+1)
back_dic['msg'] = '點(diǎn)踩成功'
models.UpAndDown.objects.create(user=request.user,article=article_obj,is_up=is_up)
else:
back_dic['code'] = 1001
back_dic['msg'] = '您已經(jīng)支持過(guò)了'
else:
back_dic['code'] = 1002
back_dic['msg'] = '您不能給自己文章點(diǎn)贊點(diǎn)踩'
else:
back_dic['code'] = 1003
back_dic['msg'] = '<a href="/login/">請(qǐng)先登錄</a>'
return JsonResponse(back_dic)
當(dāng)前文章:文章的點(diǎn)贊點(diǎn)踩制作
瀏覽路徑:http://redsoil1982.com.cn/article14/dsogcge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、品牌網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)、定制開發(fā)、關(guān)鍵詞優(yōu)化、App設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)