BBS-文章詳情頁、點贊功能

時間 2019-11-08

標籤 bbs 文章詳情功能简体版

原文原文鏈接

文章詳情頁--佈局中header和左邊區域不變--用到繼承css

home_site和article_detail只是佈局中心區域只是右側不一樣-----用到繼承原理html

--------git

urlajax

 # 文章詳情頁
    re_path('(?P<username>\w)/(?P<article_id>\d+)$',views.article_detail),

解決複用問題：方式1：封裝函數

def get_query_data(username):
    user_obj = models.UserInfo.objects.filter(username=username).first()
    blog = user_obj.blog
    cate_list = models.Category.objects.filter(blog=blog).values('pk').annotate(c=Count('article__title')).values_list(
        'title', 'c')
    tag_list = models.Tag.objects.filter(blog=blog).values('pk').annotate(count=Count('article')).values_list('title',
                                                                                                              'count')
    date_list = models.Article.objects.filter(user=user_obj).extra(
        select={'y_m_date': "date_format(create_time,'%%Y-%%m')"}).values('y_m_date').annotate(
        c=Count('nid')).values_list('y_m_date', 'c')
    return {"blog": blog, "cate_list": cate_list, "date_list": date_list, "tag_list": tag_list}

解決複用問題：方式2：inclution_tag 自定義tag(樣式和數據結合在一塊兒)

自定義標籤和過濾器--解決複用問題數據庫

templates(模板層)django

在項目文件下新建json

my_tags.py瀏覽器

from django import template
register=template.Library()
@register.simple_tag()
def multi_tag(x,y):
    return x*y

運行：ide

自定義標籤和過濾器--解決複用問題函數

my_tags.py:

from django import template
from blog import models
from django.db.models import Avg, Max, Min, Sum, Count
#  自定義標籤和過濾器--解決複用問題
register=template.Library()
@register.simple_tag()
def multi_tag(x,y):
    return x*y
@register.inclusion_tag('classification.html')
def get_classification_style(username):
    user_obj = models.UserInfo.objects.filter(username=username).first()
    blog = user_obj.blog
    cate_list = models.Category.objects.filter(blog=blog).values('pk').annotate(c=Count('article__title')).values_list(
        'title', 'c')
    tag_list = models.Tag.objects.filter(blog=blog).values('pk').annotate(count=Count('article')).values_list('title',
                                                                                                              'count')
    date_list = models.Article.objects.filter(user=user_obj).extra(
        select={'y_m_date': "date_format(create_time,'%%Y-%%m')"}).values('y_m_date').annotate(
        c=Count('nid')).values_list('y_m_date', 'c')
    return {"blog": blog, "cate_list": cate_list, "date_list": date_list, "tag_list": tag_list}

base.html中的col-md-3的內容

 <div class="panel panel-warning">
    <div class="panel-heading">個人標籤</div>
    <div class="panel-body">
        {% for tag in tag_list %}
            <p><a href="/{{ username }}/tag/{{ tag.0 }}">{{ tag.0 }}({{ tag.1 }})</a></p>
        {% endfor %}

    </div>
</div>

<div class="panel panel-danger">
    <div class="panel-heading">隨筆分類</div>
    <div class="panel-body">
        {% for cate in cate_list %}
            <p><a href="/{{ username }}/category/{{ cate.0 }}">{{ cate.0 }}({{ cate.1 }})</a></p>
        {% endfor %}

    </div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">隨筆歸檔</div>
    <div class="panel-body">
        {% for date in date_list %}
            <p><a href="/{{ username }}/archive/{{ date.0 }}">{{ date.0 }}({{ date.1 }})</a></p>
        {% endfor %}

    </div>
</div>

View Code

---

標籤字符串轉義

safe 告訴瀏覽器不要作轉義

在後臺保存的是html代碼

執行後正常顯示：

文章點贊

一、樣式構建

方式一

{#    在base引入home_site 和 article_datail的樣式#}
    <link rel="stylesheet" href="/static/blog/css/article_detail.css">
    <link rel="stylesheet" href="/static/blog/css/home_site.css">

方式二：採用繼承的方式：

不須要引入圖片

二、點贊事件綁定

  $('#div_digg .action').click(function () {
            var is_up=$(this).hasClass('diggit');
            alert(is_up)
        })

三、點讚的保存

url

 # 點贊
    path('digg/',views.digg),

    $('#div_digg .action').click(function () {
            var is_up=$(this).hasClass('diggit');
            {#alert(is_up)#}
            $.ajax({
                url:'/digg/',
                type:'post',
                data:{'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val(),
                'is_up':is_up,'article_id':{{article_obj.pk}} },
                success:function (data) {
                    console.log(data)

                }
            })

views.py

import json
def digg(request):
    print(request.POST)
    article_id=request.POST.get('article_id')
    # is_up=request.POST.get('is_up') # 字符串
    is_up=json.loads(request.POST.get('is_up')) # 字符串
    user_id=request.user.pk
    ard=models.ArticleUpDown.objects.create(user_id=user_id,article_id=article_id,is_up=is_up)

    return HttpResponse('ok')

點擊一下點贊--數據庫中存入數據

四、點贊數的數據同步

success:function (data) {
                    console.log(data);
                    if (data.state){
                        if(is_up){

                           var val=parseInt($('#digg_count').text());
                            $('#digg_count').text(val+1)
                        }
                        else {
                              var val=parseInt($('#bury_count').text());
                            $('#bury_count').text(val+1)
                        }

                    }
                    else {
                        if (data.handled){


                        $('#digg_tips').html('您已經推薦過了')
                        }
                        else {
                            $('#digg_tips').html('您已經反對過了')
                        }
                        setTimeout(function () {
                             $('#digg_tips').html('')
                        },1000)
                    }
                }

代碼優化

  $("#div_digg .action").click(function () {
                var is_up = $(this).hasClass("diggit");


                $obj = $(this).children("span");

                $.ajax({
                    url: "/digg/",
                    type: "post",
                    data: {
                        "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
                        "is_up": is_up,
                        "article_id": "{{ article_obj.pk }}",
                    },
                    success: function (data) {
                        console.log(data);

                        if (data.state) {
                            var val = parseInt($obj.text());
                            $obj.text(val + 1);
                        }
                        else {
                           var val = data.handled ? "您已經推薦過!" : "您已經反對過!";
                            $("#digg_tips").html(val);

                            setTimeout(function () {
                                $("#digg_tips").html("")
                            }, 1000)

                        }

                    }
                })

            })