前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >BBS 项目(五)

BBS 项目(五)

作者头像
HammerZe
发布2022-03-24 15:23:57
1690
发布2022-03-24 15:23:57
举报
文章被收录于专栏:Hammer随笔

目录

BBS 项目(五)

img
img

实现伪静态(人工智能版)

路由整合

代码语言:javascript
复制
re_path('^(?P<username>\w+)/(?P<condition>category|tag|archive)/(?P<params>.*).html$', views.personal_site),

视图函数

代码语言:javascript
复制
def personal_site(request, username, **kwargs):
    user = models.UserInfo.objects.filter(username=username).first()
    if user:

        article_list = user.blog.article_set.all()
        if kwargs:
            condition = kwargs.get('condition')
            params = kwargs.get('params')
            if condition == 'category':
                article_list = article_list.filter(category_id=params)
            elif condition == 'tag':
                article_list = article_list.filter(tag__id=params) #跨表了
            elif condition == 'archive':
                param_year, param_month = params.split('/')
                article_list = article_list.filter(create_time__year=param_year, create_time__month=param_month)



        return render(request, 'site.html', locals())
    else:
        return render(request, '404.html')

左侧标签,分类,归档写成inclusion_tag

left.py

代码语言:javascript
复制
from django import template
register = template.Library()
from blog import models
from django.db.models.functions import TruncMonth
from django.db.models import Count

@register.inclusion_tag('left.html')
def left_inclusion_tag(username):
    user=models.UserInfo.objects.filter(username=username).first()
    category_list = models.Category.objects.filter(blog=user.blog).annotate(count=Count('article')).values('count',
                                                                                                           'name', 'id')
    tag_list = models.Tag.objects.filter(blog=user.blog).annotate(count=Count('article')).values_list('count',
                                                                                                      'name', 'id')

    month_list = models.Article.objects.filter(blog=user.blog).annotate(month=TruncMonth('create_time')).values(
        'month').annotate(count=Count('id')).values_list('month', 'count')

    return {'username':username,'category_list':category_list,'tag_list':tag_list,'month_list':month_list}

left.html

代码语言:javascript
复制
<div>


    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">我的标签</h3>
        </div>
        <div class="panel-body">
            {% for tag in tag_list %}
                <p><a href="/{{ username }}/tag/{{ tag.2 }}.html">{{ tag.1 }}({{ tag.0 }})</a></p>
            {% endfor %}


        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">我的分类</h3>
        </div>
        <div class="panel-body">
            {% for category in category_list %}
                <p>
                    <a href="/{{ username }}/category/{{ category.id }}.html">{{ category.name }}({{ category.count }})</a>
                </p>
            {% endfor %}
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">随笔档案</h3>
        </div>
        <div class="panel-body">
            {% for month in month_list %}

                <p>
                    <a href="/{{ username }}/archive/{{ month.0|date:'Y/m' }}.html">{{ month.0|date:'Y年m月' }}({{ month.1 }})</a>
                </p>
            {% endfor %}

        </div>
    </div>


</div>

使用

这样哪里需要左侧样式直接cpoy就可以了

代码语言:javascript
复制
{% load left %}
{% left_inclusion_tag username %}

文章详情页面搭建

模仿博客园的样式搭建,图片要下载下来有防盗链

代码语言:javascript
复制
{% extends 'base.html' %}

{% block js %}
    <link rel="stylesheet" href="/static/css/article_css.css">
{% endblock %}



{% block title %}
    {{ article.title }} --- 文章
{% endblock %}


{% block site_name %}
    {{ article.blog.site_name }}
{% endblock %}


{% block main %}

    <div>
        <div class="text-center">
            <h3>{{ article.title }}</h3>
        </div>
        <hr>
        {{ article.content|safe }}
    </div>

    {#  点赞 #}
    <div id="div_digg">
        <div class="diggit action">
            <span class="diggnum" id="digg_count">{{ article.up_num }}</span>
        </div>
        <div class="buryit action">
            <span class="burynum" id="bury_count">{{ article.down_num }}</span>
        </div>
        <div class="clear"></div>
        <div class="diggword" id="digg_tips">

        </div>
    </div>



{% endblock %}



{% block footer %}

    <div>
        <br><br><br><br><br>
    </div>
    <div class="footer text-center" style="background-color: rgb(243,243,243)">
        <footer id="footer" class="footer">
            <div>
                <!--done-->
                Copyright © 2022 HammerZe
                <br><span id="poweredby">Powered by .NET 6 on Kubernetes</span>


                <span class="esa-copyright">&amp; Theme <a href="https://github.com/esofar/cnblogs-theme-silence"
                                                           target="_blank">Silence v3.0.0</a></span></div>
        </footer>
    </div>
{% endblock %}

{% block footer_js %}
    <script>
        {# 点赞和点踩统一,不分开写 #}
        $('.action').click(function () {
            var is_up = $(this).hasClass('diggit')
            /*alert(is_up),如果点了赞就是true,点了踩就是false*/
            var span= $(this).children('span')
            $.ajax({
                url: '/upanddown/',
                method: 'post',
                data: {article_id: '{{ article.id }}', is_up: is_up, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                success: function (data) {
                    console.log(data)
                    {#显示点赞/点踩提示信息#}
                    $('#digg_tips').html(data.msg)
                    {#点赞数显示#}
                    if (data.status=='100'){
                    //let num=Number(span.html())+1
                    span.html(Number(span.html())+1)
                }
                }
            })
        })
    </script>
{% endblock %}

文章点赞点踩样式

代码语言:javascript
复制
   <div id="div_digg">
            <div class="diggit action">
                <span class="diggnum" id="digg_count">{{ article.up_num }}</span>
            </div>
            <div class="buryit action">
                <span class="burynum" id="bury_count">{{ article.down_num }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="digg_tips">

            </div>
        </div>
代码语言:javascript
复制
#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: red;
}

文章点赞点踩后端

后端

代码语言:javascript
复制
def upanddown(request):
    if request.is_ajax():
        response = {'status': 100, 'msg': None}
        if request.user.is_authenticated:
            article_id = request.POST.get('article_id')
            is_up = json.loads(request.POST.get('is_up'))
            res = models.UpAndDown.objects.filter(article_id=article_id, user=request.user)
            if res:
                # 点过了
                response['status'] = 102
                response['msg'] = '你已经点过了'
                return JsonResponse(response)
            # 事务操作
            with transaction.atomic():
                if is_up:
                    models.Article.objects.filter(id=article_id).update(up_num=F('up_num') + 1)
                    response['msg'] = '点赞成功'
                else:
                    models.Article.objects.filter(id=article_id).update(down_num=F('down_num') + 1)
                    response['msg'] = '点踩成功'

                models.UpAndDown.objects.create(user=request.user, article_id=article_id, is_up=is_up)
            return JsonResponse(response)
        else:
            response['status'] = '101'
            response['msg'] = '请去<a href="/login/">登录</a>'
            return JsonResponse(response)

前端

代码语言:javascript
复制
   $('.action').click(function () {
        var is_up=$(this).hasClass('diggit')
        var span= $(this).children('span')
        $.ajax({
            url:'/upanddown/',
            method:'post',
            //谁(当前登录用户)对那篇文章点赞或点踩
            data:{article_id:'{{ article.id }}',is_up:is_up,'csrfmiddlewaretoken':'{{ csrf_token }}'},
            success:function (data) {
                console.log(data)

                $('#digg_tips').html(data.msg)
                if (data.status=='100'){
                    //let num=Number(span.html())+1
                    span.html(Number(span.html())+1)
                }

            }
        })

    })
image
image
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-03-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • BBS 项目(五)
    • 实现伪静态(人工智能版)
      • 路由整合
      • 视图函数
    • 左侧标签,分类,归档写成inclusion_tag
      • left.py
      • left.html
      • 使用
    • 文章详情页面搭建
      • 文章点赞点踩样式
        • 文章点赞点踩后端
          • 后端
          • 前端
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档