【小白实战】利用django2.0,搭建属于自己的博客(7)


发布时间:2019-02-15 13:08    作者: Uncle Hui   已过去:1 年,4 月   阅读总量:1013 已被赞:0


今天我们来实现文章的阅读量统计功能和在页面的展示(后台手动添加数据):

第一:在副标题展示某文章的阅读总量。

第二:在文章下面,动态生成最近7日该文章的阅读量,并按天生成动态折线图

阅读量自动添加到数据库留到下一篇文章实现,今天的数据就全部由后台手动添加!

【blog/models.py新建存放阅读量的表模型】

class Read_post(models.Model):
    read_num = models.IntegerField(verbose_name='阅读人数')
    post_title = models.ForeignKey(Post,verbose_name='关联文章',on_delete=models.DO_NOTHING)
    read_time = models.DateField(verbose_name='阅读时间',default=timezone.now)
    IP = models.GenericIPAddressField(verbose_name='IP地址',blank=True,null=True)

    class Meta:  # 后台管理显示汉字,这里必须用Meta
        ordering = ['-read_time']  #按修改时间倒序排列
        verbose_name = '阅读数管理'
        verbose_name_plural = verbose_name

【blog/admin.py将新建的Read_post注册进去】

@admin.register(Read_post)
class Read_postAdmin(admin.ModelAdmin):
    '''文章阅读'''
    list_display = ['read_num', 'post_title', 'read_time', 'IP']

【执行数据库迁移命令】

python manage.py makemigrations
python manage.py  migrate
【启动程序,进入后台,添加一些数据进去】

【blog/views.py 写出来代码】

在文章详情处理视图里写:

from django.db.models import  Sum
import datetime
def post_read(request,post_id):
    #获取指定的文章
    post = Post.objects.get(pk=post_id)
    #获取今天的日期
    today = datetime.datetime.now().date()
    #新建日期列表,存放遍历出来的日期
    dates=[]
    # 新建阅读量列表,存放遍历出来的每天的阅读量
    post_read_num = []
    #遍历出过去7天,每天的日期
    for i in range(7,0,-1):
        #每循环一次,日期倒退一天
        date = today - datetime.timedelta(days=i)
        #将日期存放进列表,并用strftime方法格式化
        dates.append(date.strftime('%m/%d'))
        #去阅读数量统计表里查找出当前阅读的文章和指定的日期的文章
        posts = Read_post.objects.filter(post_title=post_id,read_time=date)
        #通过聚合函数aggregate,分组计算,以read_num字段求和,并将结果保存到read_num_sum中
        num = posts.aggregate(read_num_sum=Sum('read_num'))
        #将结果保存到列表里,如果获取不到值,就保存为0
        post_read_num.append(num['read_num_sum'] or 0)
        #渲染到前端
    #统计这篇文章的全部阅读总量
    post_num_sum =Read_post.objects.filter(post_title=post_id).aggregate(read_num_sums=Sum('read_num'))
    content = {
                'post':post,
                'dates':dates,
                'post_read_num':post_read_num,
                'post_num_sum':post_num_sum
    }
    return render(request, 'blog/post_read.html', content)

【修改post_read.html】

这里使用了的三方统计插件,https://www.hcharts.cn/docs/chart-types

{% extends 'blog/base.html' %}
{% load staticfiles %}
{% block post %}
    <div class="blog-post">
        <h3 class="blog-post-title" align="center">{{ post.title }}</h3>
        <p class="blog-post-meta" align="center">发布时间:{{ post.put_in_time|date:"Y-m-d H:i" }}&nbsp;&nbsp;&nbsp;
            作者: <a href="#">{{ post.author }}</a> &nbsp;&nbsp;已过去:{{ post.put_in_time|timesince }}&nbsp;&nbsp;&nbsp;阅读总量:{{ post_num_sum.read_num_sums|default_if_none:0 }}</p>
        <hr>
        <p>{{ post.context|safe }}</p>
    </div><!-- /.blog-post -->
  <!-- 图表容器 DOM -->
    <div id="container" style="width: 600px;height:400px;"></div>
    <!-- 引入 highcharts.js -->
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script>
        // 图表配置
        var options = {
            chart:{type:'line'},
            title: {text: '本文最近七日阅读量'},
            xAxis: {
                categories:{{ dates|safe }},   // x 轴分类
                tickmarkPlacement:'on'
            },
            yAxis: {
                title: {text:null},
                labels:{enabled:false},
                gridLineDashStyle:'Dash',
            },
            series: [{                              // 数据列
                name: '阅读量',                        // 数据列名
                data: {{ post_read_num}}                     // 数据
            }],
            plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        }
    }
},
            legend:{enabled:false},
            credits:{enabled:false},
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
{% endblock %}
{% block you %}
    <div class="sidebar-module sidebar-module-inset">
        <h4>About</h4>
        <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum.
            Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
    <div class="sidebar-module">
        <h4>Archives</h4>
        <ol class="list-unstyled">
            <li><a href="#">March 2014</a></li>
            <li><a href="#">February 2014</a></li>
        </ol>
    </div>
    <div class="sidebar-module">
        <h4>Elsewhere</h4>
        <ol class="list-unstyled">
            <li><a href="#">GitHub</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
        </ol>
    </div>
    <footer class="blog-footer">
        <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.
        </p>
        <p>
            <a href="#">Back to top</a>
        </p>
    </footer>
{% endblock %}

【启动看看效果】

点赞

0




登陆后方可评论