BBS-文章详情页、点赞功能

文章详情页--布局中header和左边区域不变--用到继承

home_site和article_detail只是布局 中心区域 只是右侧不同-----用到继承原理

 --------

url

 # 文章详情页re_path('(?P\w)/(?P\d+)$',views.article_detail),

解决复用问题：方式1：封装函数

def get_query_data(username):user_obj = models.UserInfo.objects.filter(username=username).first()blog = user_obj.blogcate_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(模板层)

在项目文件下新建

my_tags.py

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

 运行：

 自定义标签和过滤器--解决复用问题

 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.blogcate_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的内容

 class="panel panel-warning">class="panel-heading">我的标签class="panel-body">{% for tag in tag_list %}
"/{{ username }}/tag/{{ tag.0 }}">{{ tag.0 }}({{ tag.1 }})
{% endfor %}
class="panel panel-danger">class="panel-heading">随笔分类class="panel-body">{% for cate in cate_list %}
"/{{ username }}/category/{{ cate.0 }}">{{ cate.0 }}({{ cate.1 }})
{% endfor %}

class="panel panel-success">class="panel-heading">随笔归档class="panel-body">{% for date in date_list %}
"/{{ username }}/archive/{{ date.0 }}">{{ date.0 }}({{ date.1 }})
{% endfor %}

---

标签字符串转义

safe 告诉浏览器不要做转义

在后台保存的是html代码

执行后正常显示：

文章点赞

 1、样式构建

方式一

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

 方式二：采用继承的方式：

 -

不需要引入图片

 2、点赞事件绑定

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

3、点赞的保存

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.pkard=models.ArticleUpDown.objects.create(user_id=user_id,article_id=article_id,is_up=is_up)return HttpResponse('ok')

点击一下点赞--数据库中存入数据

4、点赞数的数据同步

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)}}})})

 本节总结：

复用问题：采用构建函数的的方法解决--采用inclution_tag ，显示成功但

 点击分类的链接出现问题

样式引用问题，放在

静态文件static的一级目录下引入成功

转载于:https://www.cnblogs.com/foremostxl/p/10006092.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！